/* ══════════════════════════════════════════════════════════════
   动力舟 · 首屏图片轮播
   ──────────────────────────────────────────────────────────────
   复刻 szmynet.com 的切换机制：
     · 滑动式切换（非淡入淡出），speed 1200ms
     · 背景图位移 = 文字位移 × 1.5（视差）
     · 背景图缩放 = 1 + |progress| × 0.4（最大 1.4 倍）

   层叠结构（关键）：
     .banner-viewport (z-index:0 → 层叠上下文)
       └ .banner-track (transform → 又一层叠上下文)
           └ .banner-slide
               ├ img.banner-bg   (z auto)
               ├ .banner-veil    (z 1)   ← 必须在这里，不能放到 slide 外面
               └ .banner-cont    (z 2)   ← 文字和按钮
   蒙版若放在 slide 外面，会被 viewport 的层叠上下文锁住，
   反而盖到文字上面 —— 这是上线时踩过的坑。

   选择器统一用 .spatial-hero.banner-hero 提高权重（0,3,0），
   压过 bundle 里的 .spatial-hero .eyebrow / .hero .lead 等同权重规则。
   ══════════════════════════════════════════════════════════════ */

/* ── ① 容器 ── */
.spatial-hero.banner-hero{
  position:relative;
  display:block;
  max-width:none;
  min-height:640px;
  height:86vh;
  max-height:880px;
  padding:0;
  overflow:hidden;
  background:#0a1220;
  isolation:isolate;
}

/* ── ② 原 CSS 3D 场景隐去 ── */
.spatial-hero.banner-hero .spatial-scene{ display:none !important; }

/* ── ③ 视口 + 滑动轨道 ── */
.banner-viewport{
  position:absolute; inset:0; z-index:0;
  overflow:hidden;
}
.banner-track{
  display:flex;
  height:100%;
  will-change:transform;
  transform:translate3d(0,0,0);
}
.banner-slide{
  position:relative;
  flex:0 0 100%;
  height:100%;
  overflow:hidden;
}

/* ── ④ 推近层：缓缓由远到近（Ken Burns）
      单独一层，和下面的视差层各管一个 transform，互不干扰。
      inset 负值让图片比 slide 大一圈，给视差平移留余量 ——
      否则过渡中途图片边缘会露出底色。 ── */
.banner-zoom{
  position:absolute; inset:-9%;
  z-index:0;
  transform-origin:center center;
  backface-visibility:hidden;
  will-change:transform;
}
.banner-zoom.is-ken{
  animation:bannerKen var(--banner-ken, 6000ms) linear forwards;
}
@keyframes bannerKen{
  from{ transform:scale(1) }
  to  { transform:scale(1.12) }
}

/* ── ⑤ 视差层：切换时冲得比文字快 ── */
.banner-bg{
  position:absolute; inset:0;
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  transform-origin:center center;
  backface-visibility:hidden;
  will-change:transform;
}

/* ── ⑤ 蒙版：在 slide 内部、文字下方，只压暗图片 ── */
.banner-veil{
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(6,12,24,.84) 0%,
      rgba(6,12,24,.68) 30%,
      rgba(6,12,24,.28) 58%,
      rgba(6,12,24,.08) 100%),
    linear-gradient(180deg,
      rgba(6,12,24,.34) 0%,
      rgba(6,12,24,0) 28%,
      rgba(6,12,24,.26) 100%);
}

/* ── ⑥ 文字：z-index 2，恒在蒙版之上 ── */
.banner-cont{
  position:relative; z-index:2;
  height:100%;
  display:flex;
  align-items:center;
  padding:0 6%;
}
.banner-copy{ max-width:660px; }

.spatial-hero.banner-hero .eyebrow{
  margin:0 0 18px;
  color:#5fe3d2;
  font-size:12px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  text-shadow:0 1px 12px rgba(4,10,20,.85);
}
.spatial-hero.banner-hero h1,
.spatial-hero.banner-hero .banner-title{
  margin:0 0 20px;
  color:#fff;
  font-size:clamp(34px, 4.1vw, 58px);
  line-height:1.16;
  font-weight:700;
  letter-spacing:-.01em;
  text-shadow:0 2px 26px rgba(4,10,20,.75);
}
.spatial-hero.banner-hero .lead{
  margin:0 0 32px;
  max-width:560px;
  color:rgba(255,255,255,.94);
  font-size:clamp(15px, 1.1vw, 17px);
  line-height:1.85;
  text-shadow:0 1px 14px rgba(4,10,20,.75);
}

/* ── ⑦ 按钮 ── */
.spatial-hero.banner-hero .actions{ display:flex; gap:14px; flex-wrap:wrap; }
.spatial-hero.banner-hero .button{
  display:inline-flex; align-items:center; gap:8px;
  padding:15px 30px; border-radius:8px;
  font-size:15px; font-weight:600; text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.spatial-hero.banner-hero .button-primary{
  background:#e8076b; color:#fff;
  box-shadow:0 10px 30px rgba(232,7,107,.42);
}
.spatial-hero.banner-hero .button-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(232,7,107,.52); }
.spatial-hero.banner-hero .button-ghost{
  color:#fff;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.spatial-hero.banner-hero .button-ghost:hover{ background:rgba(255,255,255,.22); }

/* ── ⑧ 主动切换：圆点导航（同时是进度指示） ── */
.banner-dots{
  position:absolute; left:6%; bottom:80px; z-index:6;
  display:flex; align-items:center; gap:10px;
}
.banner-dots button{
  position:relative;
  width:11px; height:11px; padding:0;
  border:1px solid rgba(255,255,255,.55);
  border-radius:99px;
  background:rgba(255,255,255,.20);
  cursor:pointer;
  overflow:hidden;
  transition:width .45s cubic-bezier(.4,0,.2,1),
             background .3s ease,
             border-color .3s ease;
}
.banner-dots button:hover{
  background:rgba(255,255,255,.55);
  border-color:#fff;
}
.banner-dots button:focus-visible{
  outline:2px solid #5fe3d2; outline-offset:3px;
}
.banner-dots button i{
  position:absolute; inset:0;
  display:block; width:0;
  background:#5fe3d2;
}
.banner-dots button.is-done i{ width:100%; }
.banner-dots button.is-active{
  width:38px;
  background:rgba(255,255,255,.22);
  border-color:#5fe3d2;
}
.banner-dots button.is-active i{
  animation:bannerFill var(--banner-dur, 6000ms) linear forwards;
}
@keyframes bannerFill{ from{ width:0 } to{ width:100% } }

/* ── ⑨ 底部条 ── */
.spatial-hero.banner-hero .hero-bottom{
  position:absolute; left:6%; right:6%; bottom:3px; z-index:4;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  margin:0; padding:16px 0 18px;
  border-top:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.72);
  font-size:11px; letter-spacing:.14em;
}
.spatial-hero.banner-hero .hero-bottom a{
  color:rgba(255,255,255,.94);
  text-decoration:none; white-space:nowrap;
}

/* ── ⑩ 窄屏 ── */
@media (max-width: 900px){
  .spatial-hero.banner-hero{
    height:auto;
    min-height:78vh;
    max-height:none;
    padding:0;
  }
  .banner-cont{ padding:96px 7% 132px; align-items:center; }
  .spatial-hero.banner-hero .lead{ margin-bottom:26px; }
  .banner-veil{
    background:linear-gradient(180deg,
      rgba(6,12,24,.56) 0%,
      rgba(6,12,24,.42) 32%,
      rgba(6,12,24,.86) 100%);
  }
  .banner-dots{ left:7%; bottom:86px; }
  .spatial-hero.banner-hero .hero-bottom{
    left:7%; right:7%; font-size:10px; letter-spacing:.06em;
  }
  .spatial-hero.banner-hero .hero-bottom span{ display:none; }
}

/* ── 降低动效 ── */
@media (prefers-reduced-motion: reduce){
  .banner-track, .banner-bg,
  .spatial-hero.banner-hero .button,
  .banner-dots button{ transition:none !important; }
  .banner-bg{ transform:none !important; }
  .banner-zoom,
  .banner-zoom.is-ken{ animation:none !important; transform:none !important; }
  .banner-dots button.is-active i{ animation:none; width:100%; }
}