/* 首屏序列帧舞台
   层级：0 兜底静态图 / 1 canvas 序列帧 / 2 末段压暗层 / 3 渐变颗粒等叠层 / 5+ 文字 UI
   序列帧就绪后兜底图淡出；JS 没跑起来时兜底图就是最终画面，不会白屏。
   注：2 层原来是指针折射镜头，用户 2026-09-20 要求去掉，已默认关闭。 */
.sequence-stage{position:absolute;inset:0;z-index:0}
.sequence-stage.is-loading .cinematic-background{opacity:0}
.sequence-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block}
/* 兜底图（由 JS 插入，内容同第一帧）：只在 canvas 之上作为保险的最后一层 */
.cinematic-background .frame{opacity:0;transition:opacity .4s linear}
.cinematic-background .frame.is-ready{opacity:1}
.sequence-stage.has-sequences .cinematic-background{opacity:0;transition:opacity .6s linear}
.stage-overlays{position:absolute;inset:0;z-index:3;pointer-events:none}
.stage-overlays .gradient-overlay,
.stage-overlays .vignette,
.stage-overlays .film-grain,
.stage-overlays .light-sweep{position:absolute;inset:0}

/* 播放头进度：细线在顶部，不抢画面 */
.stage-progress{position:absolute;left:0;right:0;top:0;height:2px;z-index:4;pointer-events:none;background:rgba(255,255,255,.06)}
.stage-progress>span{display:block;height:100%;background:var(--accent);width:calc(var(--intro-progress,0)*100%);box-shadow:0 0 12px rgba(217,223,114,.5)}

.hero{--intro-tail:0;--intro-progress:0}

/* 末段收束：画面轻微压暗，为进入正文交代。
   ⚠️ 2026-09-20 性能修复：这里原来是
       .sequence-canvas{filter:brightness(calc(1 - var(--intro-tail)*.16))}
   filter 只要带变化的值，浏览器就得**每帧把整个满屏 canvas 重新合成一遍**，
   是首屏卡顿的主要来源之一（另一个是已去掉的指针折射镜头）。
   改成"canvas 不动 + 上面盖一层纯黑、只改 opacity"：opacity 走合成器，
   只在 GPU 上混一次，不触发重绘。

   ⚠️⚠️ 系数是 (1 - tail)，不是 tail！
   原式 brightness(1 - tail*.16)：tail=0 → brightness(1)=不压暗，tail=1 → brightness(0.84)=只压 16%。
   黑层要等价，透明度就必须是 tail*.16（alpha=k 等价于 brightness(1-k)）；
   写成 opacity:var(--intro-tail) 在 tail=1 时是**全黑**，实测平均亮度 30.7 → 5.1，画面整个没了。
   `1 - (1 - tail*.16)` 化简后就是 tail*.16。 */
.stage-tail{position:absolute;inset:0;z-index:2;background:#050506;opacity:calc(var(--intro-tail,0) * .16);pointer-events:none}

/* 桌面页脚：中文标签整体不换行，跨行交给 flex 换行处理 */
.hero-caption{overflow-wrap:normal;word-break:keep-all}
.hero-caption b{font-weight:400;white-space:nowrap}

/* 开场文案与自我介绍面板的版式都在 scene-text.css：
   那里按每张画面的留白分析定了三套位置，不要在本文件里重复定义。 */

/* 底部序列 HUD */
/* ⚠️ 2026-09-20 用户要求整体不要：页码（01 / 05）会暴露"一共几段、现在第几段"，
   「滚轮或点击画面切换」又把操作方式讲明了 —— 用户要的是"神秘一些，
   不要让用户看到是怎么变的"。整块隐藏，只留左侧字标与右侧 REPLAY。
   元素本身还留着（sequence.js 仍在写 .seq-counter 与箭头状态），
   所以这只是"看不见"，随时可以删掉这一行恢复。 */
.sequence-hud{display:none}
.sequence-hud{display:flex;align-items:center;gap:14px;letter-spacing:.14em}
.seq-counter{font-size:10px;font-variant-numeric:tabular-nums;color:#c0bfb7;min-width:56px;text-align:center}
.seq-arrow{width:30px;height:30px;line-height:1;font-size:12px;border:1px solid var(--border);border-radius:50%;color:#c0bfb7;display:grid;place-items:center;transition:color .25s,border-color .25s,background .25s}
.seq-arrow:hover{color:var(--black-main);background:var(--accent);border-color:var(--accent)}
.seq-arrow[aria-disabled="true"]{opacity:.3;pointer-events:none}
.hud-hint{font-size:9px;letter-spacing:.16em;color:#6f6f6a}

@media(max-width:1100px){.hud-hint{display:none}}
@media(max-width:700px){
 .sequence-hud{gap:8px}
 .seq-arrow{width:26px;height:26px}
 .seq-counter{min-width:48px;font-size:9px}
 /* 窄屏页脚一行挤三块，中文标签会被拦腰断行，这里收紧并禁止词内换行 */
 .hero-footer{gap:10px 12px}
 .hero-caption{max-width:168px;font-size:10px;line-height:1.7;overflow-wrap:normal;word-break:keep-all}
 .hero-caption i{display:none}
 .intro-control{font-size:9px;letter-spacing:.1em}
}
@media(prefers-reduced-motion:reduce){
 .sequence-canvas,.cinematic-background{transition:none}
 .sequence-canvas{filter:none;transform:none}
}