/* ==========================================================================
   Spline 星空动态背景层 —— 样式（取自 UEMO 404 页背景层，1:1）
   用途：替换原 #bgStars（galaxy-background.js 程序化星空 shader）。
   2026-09-12 用户「星空背景替换」→ 背景层换成 Spline 3D 星空场景 spline005.splinecode。

   结构（与 package 的 bg.css 相同，只是容器沿用 id="bgStars"）：
     <div id="bgStars" class="spline-bg-layer" aria-hidden="true">
       <div class="spline-bg-box"><div class="spline-bg"><div class="spline-bg-inner">
         <spline-viewer loading="auto" url="vendor/spline/spline005.splinecode"></spline-viewer>
       </div></div></div>
     </div>

   ⚠️ 容器沿用 id="bgStars" 是**有意**的：js/hero-banner415.js 里「首屏把星空压到 0.2、
      滚过约 0.9 屏淡入到 1.0」的逻辑是按这个 id 找元素的，沿用 id 就不用改那支共享脚本。
   ⚠️ pointer-events:none 必须保留：否则背景层会吃掉导航/按钮/iframe 的鼠标事件。
   ========================================================================== */

.spline-bg-layer {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background: #000;            /* Spline 场景自带透明背景，底下垫黑 */
}

.spline-bg-layer .spline-bg-box { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

.spline-bg-layer .spline-bg {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.spline-bg-layer .spline-bg-inner {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  height: 100%;
  transform: translateZ(0);    /* 单独提层，避免滚动时闪动 */
}

.spline-bg-layer .spline-bg-inner spline-viewer {
  position: absolute;
  width: 100%;
  height: 100%;
}



/* ---------- 「星空2」（#bgStars2，2026-09-12 第三版：程序化星空 · 更慢）----------
   用户「到这里（Showroom 屏）显示星空是要慢的」→ 这层用程序化 shader（js/galaxy-background.js），
   参数写在该 canvas 的 data-* 上：density 0.22 / speed 0.09 / twinkle 0.015 / rotationSpeed 0.012。
   为什么不用 brand 页那套 Spline：同一动画铺满整屏后位移被放大就显得快，而 Spline 场景速度烘焙在文件里调不了。
   显隐：与星空1 在 STAR2 区间交叉淡入淡出（js/hero-banner415.js）。canvas 铺满视口、不加 transform
   （分辨率在 shader 里封到 dpr<=1.0，配合 30fps 节流）。 */
#bgStars2 {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.2s cubic-bezier(.45, 0, .55, 1);
}

/* ---------- 滚动卡顿排查开关（2026-09-12）----------
   访问 /index.html?lite=1 → 关掉两个 mix-blend-mode:screen 的满屏叠加层（鼠标流体 + 波浪带）；
   ?lite=2 → 再关掉星空2。便于在真机上定位卡顿来源，不影响正常访问。 */
html[data-lite="1"] #splashCanvas, html[data-lite="1"] #heroSpline,
html[data-lite="2"] #splashCanvas, html[data-lite="2"] #heroSpline, html[data-lite="2"] #bgStars2 { display: none !important; }

/* ---------- 「首屏网格」（#heroGrid，2026-09-12 用户「网格加在四边，有空间，中间不加」）----------
   四条边带各铺 64px 白色细网格，朝画面中间渐隐；中间 ~50% 完全留空（主视觉区干净）。
   只在首屏出现：js/hero-banner415.js 让它跟着波浪带一起淡出。想调密度改 background-size，
   想调浓淡改线条的 rgba 值，想调边带宽度改四条 .hg-* 的 height/width。 */
#heroGrid { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 1;
  transition: opacity .4s linear; }
#heroGrid i {
  position: absolute; display: block;
  background-image:
    linear-gradient(rgba(255,255,255,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px);
  background-size: 64px 64px;
}
#heroGrid .hg-t { top: 0; left: 0; right: 0; height: 26%;
  -webkit-mask-image: linear-gradient(#000 0%, #000 42%, transparent 100%);
          mask-image: linear-gradient(#000 0%, #000 42%, transparent 100%); }
#heroGrid .hg-b { bottom: 0; left: 0; right: 0; height: 30%;
  -webkit-mask-image: linear-gradient(transparent 0%, #000 58%, #000 100%);
          mask-image: linear-gradient(transparent 0%, #000 58%, #000 100%); }
#heroGrid .hg-l { top: 0; bottom: 0; left: 0; width: 24%;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 100%); }
#heroGrid .hg-r { top: 0; bottom: 0; right: 0; width: 24%;
  -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 40%, transparent 100%);
          mask-image: linear-gradient(270deg, #000 0%, #000 40%, transparent 100%); }