/* ============================================================
   首页 hero 场景：侦探事务所 · 滚动镜头推进
   结构：.hero-track（约 3 屏高的滚动轨道）
         └ .hero-stage（sticky 100vh 取景框）
             ├ .hs-scene（远景/近景两张静帧 + 遮罩层）
             ├ .hero（原有 HUD 文字层，推进时淡出）
             └ .hs-caption（推进途中的旁白与落点文案）
   镜头逻辑在 js/hero-scene.js：滚动进度 -> 变焦/交叉淡入。
   ============================================================ */

.hero-track {
  position: relative;
  height: 300vh;
}
.hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* ── 场景层 ── */
.hs-scene {
  position: absolute;
  inset: 0;
  background: #0a0a0a;
}
.hs-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform, opacity;
}
/* 远景：证物墙在画面中偏右上，推进原点对准它 */
.hs-img--wide {
  object-position: 52% 42%;
  transform-origin: 60% 38%;
}
/* 近景：接棒继续向证物墙推进 */
.hs-img--close {
  object-position: 50% 40%;
  transform-origin: 55% 40%;
  opacity: 0;
}
/* 首屏「落定」微缩（1.06 -> 1）由 JS 与滚动变焦乘算，避免动画打架 */

/* ── 大气层：让静帧「活着」 ── */
/* 烟雾：两团超低透明度的柔光斑，异速漂移（blend screen，暗图上只提亮） */
.hs-smoke { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hs-smoke i {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}
.hs-smoke i:nth-child(1) {
  left: 30%; top: 28%;
  width: 46vw; height: 34vh;
  background: radial-gradient(ellipse at center, rgba(214, 200, 176, 0.1), transparent 62%);
  animation: hsSmokeA 34s ease-in-out infinite;
}
.hs-smoke i:nth-child(2) {
  left: 44%; top: 44%;
  width: 34vw; height: 26vh;
  background: radial-gradient(ellipse at center, rgba(196, 188, 170, 0.085), transparent 60%);
  animation: hsSmokeB 24s ease-in-out infinite;
}
@keyframes hsSmokeA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(3.5%, -5%) scale(1.12); }
  66% { transform: translate(-2.5%, -1.5%) scale(0.96); }
}
@keyframes hsSmokeB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-4%, -6%) scale(1.18); }
}

/* 体积光束：顺着百叶窗方向斜下来的一道光，带极轻的电压不稳式闪烁 */
.hs-beam {
  position: absolute;
  top: -12%; bottom: -4%;
  left: -6%; width: 52%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(
    112deg,
    rgba(226, 216, 196, 0.18) 0%,
    rgba(226, 216, 196, 0.07) 34%,
    transparent 62%
  );
  -webkit-mask-image: linear-gradient(to bottom, #000 12%, rgba(0,0,0,0.5) 66%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 12%, rgba(0,0,0,0.5) 66%, transparent 96%);
  animation: hsBeamFlicker 7.5s steps(1) infinite;
  will-change: opacity;
}
/* --bm 由 JS 驱动（推近证物墙后光束整体退场），闪烁在其上乘算 */
@keyframes hsBeamFlicker {
  0%, 100% { opacity: calc(var(--bm, 1) * 0.85); }
  12% { opacity: calc(var(--bm, 1) * 0.95); }
  13.2% { opacity: calc(var(--bm, 1) * 0.72); }
  14% { opacity: calc(var(--bm, 1) * 0.92); }
  46% { opacity: calc(var(--bm, 1) * 0.8); }
  47% { opacity: var(--bm, 1); }
  48.4% { opacity: calc(var(--bm, 1) * 0.84); }
  76% { opacity: calc(var(--bm, 1) * 0.9); }
  77.6% { opacity: calc(var(--bm, 1) * 0.68); }
  78.4% { opacity: calc(var(--bm, 1) * 0.88); }
}

/* 尘埃粒子（canvas 由 JS 绘制，集中在光束区域） */
.hs-dust { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }

/* 压暗渐变：保证顶部 HUD 与底部提示可读，四周轻微暗角 */
.hs-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(8, 8, 8, 0.62), transparent 26%, transparent 70%, rgba(8, 8, 8, 0.72)),
    radial-gradient(ellipse 130% 96% at 50% 46%, transparent 55%, rgba(6, 6, 6, 0.55) 100%);
}

/* 首屏定场蒙板：与 hs-scrim 互补——scrim 压四边，这层轻压中央，
   把大字与浮层同背景（证物墙亮部正在字后）隔开一档。
   只属于"信息还在"的定场态：JS 让它跟 hero 文字层同曲线淡出，推进段不遮场景 */
.hs-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 88% 78% at 50% 45%, rgba(6, 6, 6, 0.5), rgba(6, 6, 6, 0.12) 76%, transparent 100%);
  will-change: opacity;
}

/* 电影黑边：推进开始时收紧，落幕前松开（高度由 JS 写 --bar 0~1） */
.hs-bars { position: absolute; inset: 0; pointer-events: none; --bar: 0; }
.hs-bars::before,
.hs-bars::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--bar) * 7vh);
  background: #060606;
}
.hs-bars::before { top: 0; }
.hs-bars::after { bottom: 0; }

/* 景别切换的剪辑点：一次极短的压暗（opacity 由 JS 按进度钟形驱动） */
.hs-blink {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: #000;
  opacity: 0;
}

/* ── 取景器 HUD：推进段像透过侦探的相机看现场 ── */
.hs-finder {
  position: absolute;
  inset: calc(7vh + 18px) 26px;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}
.hs-finder .fc {
  position: absolute;
  width: 28px; height: 28px;
  border: 1.5px solid rgba(255, 42, 42, 0.72);
}
.hs-finder .fc--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.hs-finder .fc--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.hs-finder .fc--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.hs-finder .fc--br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.hs-finder__rec {
  position: absolute;
  top: 9px; left: 40px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: rgba(255, 42, 42, 0.85);
}
.hs-finder__rec b {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: hsRec 1.1s steps(1) infinite;
}
@keyframes hsRec { 50% { opacity: 0.15; } }
.hs-finder__tc {
  position: absolute;
  bottom: 8px; left: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(233, 230, 223, 0.6);
  font-variant-numeric: tabular-nums;
}

/* 收尾：淡入页面底色，交棒给正文 */
.hs-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--bg, #131313);
  opacity: 0;
}

/* ── 原 hero 文字层：铺满取景框，作为第一景别的界面 ── */
.hero-stage .hero {
  position: absolute;
  inset: 0;
  min-height: 0;
  z-index: 3;
  will-change: transform, opacity;
}
/* 场景已提供底光，hero 自身的红色环境辉光减弱避免糊图 */
.hero-stage .hero::before { opacity: 0.45; }
/* 大标题压在实景上需要一点黑晕才能「坐进」场景 */
.hero-stage .hero__name { filter: drop-shadow(0 6px 28px rgba(0, 0, 0, 0.6)); }

/* ── 悬浮层实物化：轻纸片形态（hero 实景是主，这层是副，质感克制） ──
   右：白边拍立得（胶带贴顶，照片走 settings.hero_portrait_image 绑定）
   左：牛皮纸证物签（打孔 + 胶带）
   质感只来自三处小细节：低透明度噪点纸纹、立体图钉、带轻投影的红线。 */

.hero-stage {
  /* 纸面颗粒：黑色 alpha 0.06 的 fractalNoise，叠在纸片渐变上当第一层 */
  --paper-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='pg'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='140' height='140' filter='url(%23pg)'/></svg>");
}

/* 共用胶带 */
.hero-stage .hero__deco-1::after,
.hero-stage .hero__deco-2::before {
  content: '';
  position: absolute;
  height: 22px;
  background: linear-gradient(to bottom, rgba(226, 219, 201, 0.5), rgba(214, 206, 186, 0.42));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  z-index: 3;
  animation: none;
}

/* 右：拍立得 */
.hero-stage .hero__deco-2 {
  width: 186px;
  padding: 9px 9px 10px;
  background:
    var(--paper-grain),
    linear-gradient(168deg, #e9e5da 0%, #ddd8ca 100%);
  border: none;
  border-radius: 1px;
  transform: rotate(6deg);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.42),
    0 18px 42px rgba(0, 0, 0, 0.5);
  transition: transform 0.45s var(--ease, ease);
}
.hero-stage .hero__deco-2:hover { transform: rotate(4deg) translateY(-4px); }
.hero-stage .hero__deco-2::before {
  inset: auto;
  top: -11px;
  left: 50%;
  width: 78px;
  transform: translateX(-50%) rotate(-3.5deg);
}
.hero-stage .hero__deco-2::after { content: none; }
.hero-stage .hero__deco-2 .photo-fake {
  margin-bottom: 0;
  filter: brightness(0.97) contrast(1.03);
}
.hero-stage .hero__deco-2 .photo-cap {
  margin-top: 9px;
  padding-bottom: 2px;
  text-align: center;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: #4a443a;
}

/* 左：证物签 */
.hero-stage .hero__deco-1 {
  transform: rotate(-4.5deg);
  border: none;
  background:
    var(--paper-grain),
    linear-gradient(172deg, #d9d3c5 0%, #cdc7b7 100%);
  color: #2e2a24;
  padding: 11px 16px 11px 30px;
  letter-spacing: 0.16em;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.38),
    0 12px 28px rgba(0, 0, 0, 0.45);
  border-radius: 1px;
}
.hero-stage .hero__deco-1 .row { line-height: 1.75; }
.hero-stage .hero__deco-1 .row:first-child { color: var(--accent); }
/* 打孔 */
.hero-stage .hero__deco-1::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: #14110d;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* 胶带贴左上角 */
.hero-stage .hero__deco-1::after {
  top: -9px;
  left: 16px;
  width: 56px;
  transform: rotate(-5deg);
}

/* ── 证物板：图钉、红线与新增道具 ── */

/* 红图钉：所有卡片的线锚点（立体小细节：渐变球 + 高光 + 落影） */
.hs-pin {
  position: absolute;
  top: -5px;
  left: 50%;
  margin-left: -5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #ff8577 0%, #d92b22 40%, #911511 74%, #66100d 100%);
  box-shadow:
    inset -2px -3px 3px rgba(0, 0, 0, 0.4),
    inset 1px 2px 2px rgba(255, 255, 255, 0.26),
    0 2px 3px rgba(0, 0, 0, 0.5);
  z-index: 4;
}
.hs-pin--corner { left: 16px; margin-left: 0; }
/* 钉在纸上的落影 */
.hs-pin::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 7px;
  width: 14px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35), transparent 68%);
  z-index: -1;
}
/* 顶部高光点 */
.hs-pin::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2.5px;
  width: 3.5px;
  height: 2.5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  filter: blur(0.4px);
}

/* 红线画布：盖过卡片、走主标题后面 */
.hero__strings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
/* 双层线：底层一道很轻的暗影 + 上层红线，加一点离墙感但不抢 */
.hero__strings path {
  fill: none;
  stroke: rgba(198, 34, 30, 0.78);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.hero__strings path.shadow {
  stroke: rgba(0, 0, 0, 0.3);
  stroke-width: 1.8;
  filter: blur(1px);
}
/* 标题、副标题、红框压在红线之上，保证可读；线只从文字后面穿过 */
.hero-stage .hero__name,
.hero-stage .hero__sub,
.hero-stage .hero__case { z-index: 3; }

/* 旧版顶部白点：全局线索红线的起点已移到推进轨道之后，
   这个复刻白点悬在实景照片上空没有意义，隐藏 */
.hero-stage .hero__top-mark { display: none; }

/* ── 下方两张卡用实物素材打底（本人定的尺度：只这两块稍重，上排保持轻） ── */
.hero-stage .prop {
  border: none;
  padding: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: none;
  /* 素材偏黄褐：压饱和 + 微提亮，别比场景里的实物道具跳 */
  filter: saturate(0.75) brightness(1.05) contrast(1.02) drop-shadow(0 12px 18px rgba(0, 0, 0, 0.5));
}
.hero-stage .prop .prop__body { position: absolute; z-index: 2; }
/* 素材卡上的图钉按 --px/--py 定位（素材自带木夹/燕尾夹，钉要避开它们） */
.hero-stage .prop .hs-pin {
  top: var(--py, 0%);
  left: var(--px, 50%);
  margin: -6px 0 0 -6px;
}

.hero__clip {
  position: absolute;
  border-radius: 1px;
}

/* 左下：报纸剪条（轻版纸片，本人确认过素材版观感不好） */
.hero-stage .hero__clip--news {
  left: 7%;
  top: 56%;
  width: 148px;
  padding: 12px 14px 10px;
  background:
    var(--paper-grain),
    linear-gradient(170deg, #e2ddcf 0%, #d3cdbc 100%);
  transform: rotate(-6deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.38), 0 12px 28px rgba(0, 0, 0, 0.45);
}
/* 剪报右上角斜贴一条胶带（半压纸面，避免浮空感） */
.hero-stage .hero__clip--news::after {
  content: '';
  position: absolute;
  top: -6px;
  right: 14px;
  width: 46px;
  height: 17px;
  transform: rotate(6deg);
  background: linear-gradient(to bottom, rgba(226, 219, 201, 0.48), rgba(214, 206, 186, 0.38));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}
.clip-news__head {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--accent);
  border-bottom: 1px solid rgba(46, 42, 36, 0.35);
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.clip-news__lines i {
  display: block;
  height: 4px;
  margin-bottom: 5px;
  background: rgba(46, 42, 36, 0.32);
}
.clip-news__lines i:nth-child(2) { width: 92%; }
.clip-news__lines i:nth-child(3) { width: 97%; }
.clip-news__lines i:nth-child(4) { width: 84%; }
.clip-news__lines i:nth-child(5) { width: 58%; }
.clip-news__tag {
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  color: #57503f;
}

/* 签名红卡（右侧）：保持简洁，只加噪点和一道很轻的折痕 */
.hero__clip--card {
  right: 5.5%;
  top: 32%;
  width: 96px;
  padding: 14px 12px 10px;
  background:
    var(--paper-grain),
    linear-gradient(115deg, transparent 44%, rgba(255, 255, 255, 0.06) 45.5%, rgba(0, 0, 0, 0.08) 47%, transparent 49%),
    linear-gradient(165deg, #b8352e 0%, #97231f 100%);
  transform: rotate(7.5deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 14px 30px rgba(0, 0, 0, 0.5);
}
/* 红卡左下角补一条半透明胶带（避开顶部图钉） */
.hero-stage .hero__clip--card::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: -12px;
  width: 44px;
  height: 16px;
  transform: rotate(-32deg);
  background: linear-gradient(to bottom, rgba(226, 219, 201, 0.4), rgba(214, 206, 186, 0.3));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.clip-card__sig { display: block; width: 62px; margin: 2px auto 6px; opacity: 0.92; }
.clip-card__note {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  color: rgba(238, 228, 210, 0.75);
}

/* ── 证物板小装饰：黄便签 / 散钉 / 回形针 ── */

/* 做旧黄便签：手写体短字，参考侦探板上的 sticky note（压暗融进场景） */
.hs-note {
  position: absolute;
  z-index: 2;
  width: 58px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    var(--paper-grain),
    linear-gradient(164deg, #c9b45c 0%, #b7a24b 68%, #9a853a 100%);
  color: #2a2312;
  font-family: 'Marker Felt', 'Chalkboard SE', 'Segoe Print', 'Comic Sans MS', cursive;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.42), 0 10px 22px rgba(0, 0, 0, 0.4);
}
/* 右下翘角：过渡柔一点，折面带渐变 */
.hs-note::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 13px;
  height: 13px;
  background: linear-gradient(315deg, transparent 45%, rgba(0, 0, 0, 0.16) 49%, #937d36 54%, #a08a3f 72%, #8d7833 100%);
}
.hs-note { transition: transform 0.45s var(--ease, ease); }
.hs-note--1 { left: 21%; top: 64%; transform: rotate(-7deg); }
.hs-note--1:hover { transform: rotate(-4.5deg) translateY(-3px); }
.hs-note--2 { right: 17%; top: 46%; transform: rotate(5deg); font-size: 12px; }
.hs-note--2:hover { transform: rotate(7deg) translateY(-3px); }

/* 散落的图钉：不连线，只是板上的杂钉 */
.hs-tack {
  position: absolute;
  z-index: 2;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #ff8577 0%, #d92b22 40%, #911511 74%, #66100d 100%);
  box-shadow:
    inset -2px -3px 3px rgba(0, 0, 0, 0.4),
    inset 1px 2px 2px rgba(255, 255, 255, 0.26),
    0 2px 3px rgba(0, 0, 0, 0.5);
}
/* 钉的落影：和 hs-pin 一致的离墙感 */
.hs-tack::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 6px;
  width: 13px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35), transparent 68%);
  z-index: -1;
}
.hs-tack::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2.5px;
  width: 3px;
  height: 2.5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  filter: blur(0.4px);
}
.hs-tack--1 { left: 31%; top: 23%; }
.hs-tack--2 { right: 27%; top: 71%; width: 9px; height: 9px; }

/* 回形针：夹在拍立得左上边（外圈亮银、内圈暗一档，模拟金属反光） */
.hs-paperclip {
  position: absolute;
  top: -13px;
  left: 20px;
  width: 13px;
  height: 30px;
  z-index: 5;
  transform: rotate(9deg);
  border: 1.6px solid #b3ad9c;
  border-left-color: #8f8a7a;
  border-radius: 6.5px / 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.hs-paperclip::before {
  content: '';
  position: absolute;
  inset: 3px 2.5px -5px;
  border: 1.6px solid #9d9786;
  border-top-color: transparent;
  border-radius: 5px / 7px;
}

/* 右下：燕尾夹板便签（素材 720×542，纸区在虚线框内） */
.hero-stage .hero__log {
  width: 188px;
  aspect-ratio: 720 / 542;
  background-image: url('/img/damien-wang/hero/prop-clipboard.webp');
  transform: rotate(-2.6deg);
  text-align: left;
  opacity: 1;
}
/* 注意不能用 flex：`>>` 文本节点会被拆成独立 flex item 竖排溢出 */
.hero-stage .hero__log .prop__body {
  inset: 26% 13% 14% 16%;
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  line-height: 1.9;
  color: #a8231d;
  overflow: hidden;
  white-space: nowrap;
}
/* 每行独立截断：英文长句超出纸面时收省略号 */
.hero-stage .hero__log .prop__body .log-line {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-stage .hero__log span { color: #3d3227; }

@media (max-width: 720px) {
  .hero__clip, .hero__strings, .hs-note, .hs-tack, .hs-paperclip { display: none; }
}

/* ── 推进途中的旁白（打字机，进度驱动） ── */
.hs-caption {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hs-caption--a {
  left: clamp(24px, 8vw, 120px);
  bottom: 18vh;
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.4vw, 15px);
  letter-spacing: 0.18em;
  color: rgba(233, 230, 223, 0.92);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8);
}
.hs-caption--a .t::after {
  content: '';
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  margin-left: 4px;
  vertical-align: text-bottom;
  background: var(--accent);
  animation: hsCursor 0.9s steps(1) infinite;
}
@keyframes hsCursor { 50% { opacity: 0; } }

/* ── 落点文案：近景定格时出现 ── */
.hs-caption--b {
  left: 50%;
  bottom: 16vh;
  transform: translateX(-50%);
  text-align: center;
  width: min(90vw, 720px);
}
.hs-caption--b .line {
  /* 与 statement 同款宋体（--font-serif 中文回退是黑体系，报纸感不对） */
  font-family: 'Baskerville', 'Songti SC', 'STSongti-SC', 'Noto Serif SC', 'SimSun', Georgia, serif;
  font-weight: 600;
  font-size: clamp(23px, 3.1vw, 39px);
  line-height: 1.5;
  color: #ece7db;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
  will-change: letter-spacing, opacity;
}
.hs-caption--b .hint {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--accent);
}

/* ── 首屏底部滚动提示 ── */
.hs-hint {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--text-dim, rgba(233, 230, 223, 0.55));
  pointer-events: none;
  animation: hsHintPulse 2.6s ease-in-out infinite;
}
@keyframes hsHintPulse {
  0%, 100% { opacity: 0.45; transform: translate(-50%, 0); }
  50% { opacity: 1; transform: translate(-50%, 5px); }
}
/* 推进开始后隐藏提示（动画会覆盖内联 opacity，必须用类停掉动画） */
.hero-stage.is-pushing .hs-hint {
  animation: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ── 降级：减少动效时不做推进，只展示第一屏 ── */
@media (prefers-reduced-motion: reduce) {
  .hero-track { height: auto; }
  .hero-stage { position: relative; height: 100vh; }
  .hs-caption, .hs-hint, .hs-smoke, .hs-beam, .hs-dust, .hs-finder, .hs-blink { display: none; }
}

@media (max-width: 720px) {
  .hero-track { height: 260vh; }
  .hs-img--wide { object-position: 56% 42%; }
  .hs-caption--a { bottom: 22vh; }
  .hs-caption--b .line { font-size: 22px; }
}