/* ============================================================
   运动层（bridge-motion）  1.9.7
   ------------------------------------------------------------
   这一层只负责一件事：让画面"在动"，而且是一直在动。

   为什么单独一个文件：bridge-home.css 已经 2900 行，动效散在里面
   改一处要读三屏；更要紧的是**这一层可以整份删掉**——出问题把
   这个文件去掉，页面立刻回到 1.9.6 的静态样子，别的一行不用动。

   铁律（别破坏这些，破坏了会连带炸掉两屏高度与点击热区）：
   1. 所有新增元素 position: fixed / absolute + pointer-events: none，
      一律不参与文档流 —— 两屏高度、卡片位置、点击热区全不受影响。
   2. 只动 transform / opacity / translate，不动 top/left/width/height
      （那三个每帧都会触发 layout + paint）。
   3. 亮度是"加"出来的，不是"调暗"出来的 —— 欢哥说过整页偏暗，
      所以这一层不叠任何压暗的 vignette，只有噪点、扫描线和一道亮带。
   4. 全层过 prefers-reduced-motion。开了系统"减少动态效果"就整层静音。
   ============================================================ */

/* ---------- 一、大气层：噪点 + 扫描线 + HUD 刷新带 ----------
   .bh-fx 由 js/bridge-motion.js 插到 body 末尾，只在首页。 */
.bh-fx {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  /* 自己不开 will-change：整层常驻合成层会吃掉显存，
     真正需要提升的是里面那条会动的带子，交给它自己。 */
}
.bh-fx > * {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 真空里的颗粒。没有它，再亮的线也像 PPT 蒙版；
   有了它，纯色暗部才会有"成片"的质感。
   data-uri 里的 feTurbulence 是静态噪声，不耗运行时。 */
.bh-fx__grain {
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
}

/* 扫描线：3px 一个周期、2.8% 白。
   再浓一点就成了"CRT 滤镜玩具"，这个浓度是盯久了才察觉的量。 */
.bh-fx__scan {
  opacity: 0.42;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.026) 0 1px,
    transparent 1px 3px
  );
}

/* HUD 刷新带：全屏自上而下扫过的一道光，13 秒一次。
   这条是"整页在活着"的主要来源 —— 环再转也只转在中间那一小块，
   而带子每次都会从头顶走到脚底。
   ⚠ 不加 mix-blend-mode：全屏混合每帧都要重新合成整个页面，
     老机器上会拖慢滚动；暗底上普通叠加和 screen 的观感差别很小。 */
.bh-fx__band {
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  height: 180px;
  transform: translate3d(0, -180px, 0);
  background: linear-gradient(
    180deg,
    rgba(56, 217, 255, 0) 0%,
    rgba(56, 217, 255, 0.018) 55%,
    rgba(56, 217, 255, 0.075) 92%,
    rgba(120, 232, 255, 0.2) 99.6%,
    rgba(190, 245, 255, 0.32) 100%
  );
  animation: bh-fx-band 13s linear infinite;
  will-change: transform;
}
/* 带子的头必须"进得来、出得去"：起点在视口上方整条带子之外，
   终点要走到视口下方整条带子之外，否则收尾那一下会凭空消失。 */
@keyframes bh-fx-band {
  0% { transform: translate3d(0, -190px, 0); }
  100% { transform: translate3d(0, calc(100vh + 10px), 0); }
}

/* ---------- 二、首屏地平线：给平面加纵深 ----------
   透视网格铺在甲板底部，慢慢向观者漂过来。
   ⚠ 角度别贪陡：rotateX(70deg) 时 1080 高的平面投影只剩 84px，
     看起来像底部贴了一小块网格碎片，而不是"地板"。
     按 y' = H·cosθ·d/(d+H·sinθ) 反算，56° + 700px 透视能落到 260px 上下，
     正好铺满甲板底部三分之一。 */
.bh-hz {
  position: absolute;
  left: 50%;
  bottom: -10%;
  width: 260%;
  height: 120%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  transform: translateX(-50%) perspective(700px) rotateX(56deg);
  transform-origin: 50% 100%;
  /* 上缘必须化开，否则会看见一条硬边横在甲板中间 */
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%);
  mask: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%);
  opacity: 0.8;
}
/* 真正在动的是里面这层：上下各多铺一格（44px），
   位移满一格再回位，接缝正好落在同一行线上 ⇒ 无缝。
   ⚠ 动的是 transform 不是 background-position：
     后者每帧都要重画这一整块（宽度 260%），低端机直接掉帧。 */
.bh-hz__grid {
  position: absolute;
  left: 0;
  right: 0;
  top: -44px;
  bottom: -44px;
  background-image:
    linear-gradient(rgba(56, 217, 255, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 217, 255, 0.16) 1px, transparent 1px);
  background-size: 100% 44px, 44px 100%;
  animation: bh-hz-run 6.8s linear infinite;
  will-change: transform;
}
@keyframes bh-hz-run {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, 44px, 0); }
}

/* ---------- 三、环系提速：原来太慢，等于没在转 ----------
   120 秒转一圈的刻度盘，人眼在 5 秒里看不到任何位移，
   读起来就是一张静态图。这里把"看得见的"那几个提速，
   看不见的（纯圆环、无刻度）保持原样 —— 转它也没用。 */
.bh-ring-scale { animation-duration: 58s; }
.bh-ring2 { animation-duration: 72s; }
.bh-orbit.o1 { animation-duration: 34s; }
.bh-orbit.o2 { animation-duration: 26s; }
.bh-sweep { animation-duration: 9s; }

/* 扫描扇提一点亮度：0.22 在提亮过的底上已经偏糊了 */
.bh-bridge .bh-sweep {
  background: conic-gradient(
    from 0deg,
    rgba(56, 217, 255, 0.3),
    rgba(56, 217, 255, 0.06) 58deg,
    transparent 76deg,
    transparent 360deg
  );
}

/* 星点：原来是"呼吸"（缩放 0.72↔1.35），看起来像在喘气。
   改成雷达上的 ping —— 一圈环由内向外炸开、同时消失。 */
.bh-blip::after {
  animation: bh-blip-ping 3.2s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
@keyframes bh-blip-ping {
  0% { transform: scale(0.4); opacity: 0.95; }
  70% { opacity: 0.12; }
  100% { transform: scale(2.6); opacity: 0; }
}
.bh-blip.b2::after { animation-delay: 1.05s; }
.bh-blip.b3::after { animation-delay: 2.1s; }

/* ---------- 四、主打封面：极缓的推近 ----------
   卡片本身一根手指都不许动（1.7.4 的教训：倾斜/位移/切角会连带
   打乱整个甲板的对齐），能动的只有 cover 里面那张图。
   .bh-cover 是 overflow:hidden，放大 4% 不会溢出去。 */
.bh-card-feat .bh-cover img {
  animation: bh-ken 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes bh-ken {
  from { transform: scale(1); }
  to { transform: scale(1.045); }
}

/* ---------- 五、第二屏：环境网格往前推 ----------
   两个透视网格（tunnel / deck）本来是纯静态的，站上去像贴了张画。
   用独立的 translate 属性做位移：它和 transform 是两个属性，
   不会互相覆盖（这几个元素身上已经有 perspective + rotateX，
   拿 transform 去加位移就得把整串重写一遍，改错一次纵深就翻车）。 */
.bh-flow__amb-tunnel {
  --run: 64px;
  animation: bh-amb-run-y 7.4s linear infinite;
}
.bh-flow__amb-deck {
  --run: 76px;
  animation: bh-amb-run-y 6.2s linear infinite;
}
@keyframes bh-amb-run-y {
  from { translate: 0 0; }
  to { translate: 0 var(--run, 64px); }
}
.bh-flow__amb-ring { animation-duration: 62s; }

/* ---------- 六、静音 ----------
   系统开了"减少动态效果"就整层停掉，连大气层也保留（它不闪不晃，
   只是纹理）。这条必须在最后，才能盖住上面所有 animation 声明。 */
@media (prefers-reduced-motion: reduce) {
  .bh-fx__band,
  .bh-hz__grid,
  .bh-ring-scale,
  .bh-ring2,
  .bh-orbit.o1,
  .bh-orbit.o2,
  .bh-sweep,
  .bh-blip::after,
  .bh-card-feat .bh-cover img,
  .bh-flow__amb-tunnel,
  .bh-flow__amb-deck,
  .bh-flow__amb-ring {
    animation: none !important;
  }
  .bh-fx__band { display: none; }
}

/* ---------- 七、窄屏收力 ----------
   单栏（≤900）本身就在竖向堆两屏，常驻的固定层会一直跟着滚，
   叠加的合成开销最不划算：留噪点与扫描线，停掉带子和地平线，
   第二屏的网格位移降到最慢。 */
@media (max-width: 900px) {
  .bh-fx__band { display: none; }
  .bh-hz { display: none; }
  .bh-card-feat .bh-cover img { animation-duration: 40s; }
  .bh-flow__amb-tunnel { animation-duration: 12s; }
  .bh-flow__amb-deck { animation-duration: 10s; }
}