/* ============================================================
   首页 hero 场景：侦探事务所 · 滚动镜头推进
   结构：.hero-track（约 3 屏高的滚动轨道）
         └ .hero-stage（sticky 100vh 取景框）
             ├ .hs-scene（远景/近景两张静帧 + 遮罩层）
             ├ .hero（原有 HUD 文字层，推进时淡出）
             └ .hs-poster（推进段的海报排版：四角题头 + 四个词 + 底部大标题）
   镜头逻辑在 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-reel，2026-11-03 起）：推进时整条当一张远景放大，原点对准画面中心偏下 */
.hs-img--wide {
  transform-origin: 50% 55%;
}

/* 分镜循环片：底下垫首帧静图，视频真正开始播（.is-playing）才淡上来；两者首帧是同一张图，接缝看不出。
   镜头的动全在视频里，CSS 不再做慢推 / 漂移 / 闪帧（2026-11-03 本人否掉） */
.hs-reel { overflow: hidden; }
.hs-reel picture { display: contents; }   /* 首帧静图横竖两张由 picture 选（手机竖屏用竖屏那张） */
.hs-reel__still,
.hs-reel__vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.hs-reel__vid {
  opacity: 0;
  transition: opacity .25s linear;
}
.hs-reel.is-playing .hs-reel__vid { opacity: 1; }
/* 首屏「落定」微缩（1.06 -> 1）由 JS 与滚动变焦乘算，避免动画打架 */

/* 烟雾光斑、斜光束、尘埃粒子 2026-11-05 拿掉（本人：「把 hero 页雾蒙蒙的去掉」），循环片本身是高反差黑白 / 红黑，不需要再「让静帧活着」 */

/* 压暗渐变：保证顶部 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 文字层同曲线淡出，推进段不遮场景 */
/* 2026-11-04 本人：「背景整体再暗一点」→ 中央那团之外再叠一层整屏均匀压暗（名字后面的环境光同时收了一档） */
.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%),
    rgba(4, 4, 4, 0.45);
  will-change: opacity;
}

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

/* 推进段的电影黑边、取景器 HUD（REC / 时间码 / 四角框）2026-11-05 拿掉：推进段换成海报边框（.hs-poster），四角给题头用 */
/* 收尾：淡入页面底色，交棒给正文 */
.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;
}

/* 大标题压在实景上需要一点黑晕才能「坐进」场景 */
/* ── 首屏电影标题：名字是往前斜的白字（js/tech-text.js，2026-11-05 照夜魔侠片名定「A 白」）。
   11-03～11-04 名字的光晕 / 环境光颜色跟着首屏画面变（--glow），11-05 光晕拿掉、字色不再跟画面，--glow 已删 */
/* 名字外圈三层光晕（text-shadow）和字后面那片被照亮的环境光（.hero__ambient）2026-11-05 拿掉：本人「把 hero 页雾蒙蒙的去掉」，
   字边被光晕糊开、整片发灰就是它们。名字现在是干净的实心白字，别再加光晕 / 雾 */
/* 名字底下的雾（亮光条 + 光束、后来的噪声云）2026-11-03 本人两次都说不好看：「主标题底部也不要底了好丑」，已整个拿掉，别再加 */
/* ── 首屏排版（2026-11-03 起回到线上版的骨架）──
   电影片头式 D（名字撑满半屏、文案拆到左右下角）本人说「排版也不行甚至不如之前的，还少了文案内容」，
   改回线上版那样居中一列：职位小字 → 名字 → 三行副标题（关键词标红），文案照线上版补全，名字缩回线上版的比例。
   否掉过、别再用的：After Hours 亚巡那种细字拉开字距、Hurry Up Tomorrow 那种全红粗字 + 左右两块、电影片头式 D */
/* 整组（连同上方的灯）比线上版大一档、重心落在屏幕正中略下（本人：「整体有点小位置也有点偏上」）；
   名字同时受屏高限制，矮屏笔记本上不顶到页头 */
.hero-stage .hero {
  justify-content: center;
  padding: calc(max(24px, 4.2vh) + 3vh) 0 0;
}
/* ── 首屏小字（2026-11-04 本人：「hero 页我还是想要主标题和灯，但是小字那些排版和字体可以改」，照「虚无哨兵」混剪的海报）──
   名字上方一排题头：左 PRODUCT、右 DESIGN 用名字同款的压缩粗黑、正红；中间一块红底白字小牌 PORTFOLIO 2026（参考里的厂牌）；
   两端和名字对齐（名字宽 ≈ 字号 × 2.9）。名字下方：一条细线 + 一小段居中的衬线小字（参考里大标题下那段说明），
   中文落到宋体；关键词不再标红。--name-size 是名字的字号，题头、细线都按它算 */
.hero-stage .hero { --name-size: clamp(80px, min(13.8vw, 27vh), 240px); }
.hero-stage .hero__case {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(var(--name-size) * 2.9);
  border: 0;
  padding: 0;
  margin: 0 0 calc(var(--name-size) * 0.07);
  font-family: var(--font-title);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: none;
  text-shadow: none;
  animation: heroFadeUp 0.9s 0.35s var(--ease) both;
}
.hero__tag {
  font-size: calc(var(--name-size) * 0.15);
  /* 参考里是红字压在灰白天空上；这里压在名字上方那盏红灯的红光里，红字会被吃掉，改近白 */
  color: rgba(244, 244, 244, 0.92);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
.hero__plate {
  padding: 0.14em 0.5em 0.1em;
  font-size: calc(var(--name-size) * 0.1);
  color: #f4f4f4;
  background: var(--accent);
}
.hero-stage .hero__name {
  font-size: var(--name-size);
  line-height: 0.9;
}
.hero-stage .hero__sub {
  position: relative;
  margin-top: calc(var(--name-size) * 0.16);
  padding-top: calc(var(--name-size) * 0.07);
  font-family: 'Baskerville', 'Songti SC', 'STSongti-SC', 'DW Serif SC', 'Noto Serif SC', 'SimSun', Georgia, serif;
  font-size: clamp(13px, 1.02vw, 16px);
  font-weight: 400;
  line-height: 1.38;
  letter-spacing: 0.01em;
  color: rgba(240, 240, 240, 0.92);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75);
}
/* 细线：和名字一样宽，压在小字上面 */
.hero-stage .hero__sub::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--name-size) * 2.9);
  height: 1px;
  translate: -50% 0;
  background: rgba(240, 240, 240, 0.7);
}
.hero-stage .hero__sub b { color: inherit; font-weight: 400; }
.hero-stage .hero__sub .muted { color: rgba(240, 240, 240, 0.62); }
/* 中文：压缩粗黑没有中文，题头落到普惠体最粗一档 */
body[data-lang="zh"] .hero-stage .hero__case { font-family: 'Alibaba PuHuiTi', 'PingFang SC', sans-serif; font-weight: 900; letter-spacing: 0.08em; }
@media (max-width: 720px) {
  .hero-stage .hero { --name-size: clamp(64px, 26vw, 150px); }
  .hero-stage .hero__sub { font-size: 14px; }
}

/* ── 名字上方的灯（2026-11-03 本人给的 Aceternity「Lamp」组件：「主标题上加个这个光试试」）──
   原组件是 React + framer-motion + Tailwind，站是原生 JS，照它的结构和数值写成纯 CSS：一根灯管、管下一团亮芯、
   左右两块锥形渐变拼成往下散开的光、再垫一团大光晕，整体纵向拉长 1.25 倍；青色换成站点红。
   原组件在纯黑底上靠几块黑色把光「切」出形状，这里底下是视频，改成灯管以上整块裁掉、锥光外侧和下沿用遮罩收。
   灯放在场景层而不在 .hero 里：.hero 是隔离的层，里面的混合模式碰不到视频；screen 叠上去只提亮。
   --u 相当于原组件的 1rem（灯管 30u 长），--lamp-y（灯管位置）和 --lw（灯管长）由 hero-scene.js 照名字量好写进来。
   入场照原组件：loading 退场后 0.3 秒，灯管、亮芯、锥光从一半长拉满，亮度从一半到满，0.8 秒 */
.hs-lamp {
  --lw: min(44vw, 640px);
  --u: calc(var(--lw) / 30);
  --lamp: 255, 42, 42;          /* 锥光、大光晕：站点红（原组件 cyan-500） */
  --lamp-hot: 255, 112, 100;    /* 灯管、亮芯：浅一档（原组件 cyan-400） */
  position: absolute;
  left: 0;
  right: 0;
  top: var(--lamp-y, 24vh);
  height: calc(var(--u) * 26);
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: opacity;
}
.hs-lamp__in {
  position: absolute;
  inset: 0;
  transform: scaleY(1.25);
  transform-origin: 50% 0;
  opacity: 0.5;
  transition: opacity 0.8s 0.3s ease-in-out;
}
.hs-lamp__in > i { position: absolute; top: 0; }
.hs-lamp__beam {
  width: calc(var(--u) * 15);
  height: calc(var(--u) * 14);
  transition: width 0.8s 0.3s ease-in-out;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.hs-lamp__beam--l {
  right: 50%;
  background: conic-gradient(from 70deg at 50% 0%, rgb(var(--lamp)), transparent 50%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--u) * 4), transparent), linear-gradient(to right, transparent, #000 calc(var(--u) * 10));
  mask-image: linear-gradient(to bottom, #000 calc(var(--u) * 4), transparent), linear-gradient(to right, transparent, #000 calc(var(--u) * 10));
}
.hs-lamp__beam--r {
  left: 50%;
  background: conic-gradient(from 290deg at 50% 0%, transparent, transparent 50%, rgb(var(--lamp)));
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--u) * 4), transparent), linear-gradient(to left, transparent, #000 calc(var(--u) * 10));
  mask-image: linear-gradient(to bottom, #000 calc(var(--u) * 4), transparent), linear-gradient(to left, transparent, #000 calc(var(--u) * 10));
}
.hs-lamp__glow {
  left: 50%;
  top: calc(var(--u) * 2.5);
  width: calc(var(--u) * 28);
  height: calc(var(--u) * 9);
  translate: -50% 0;
  border-radius: 50%;
  background: rgb(var(--lamp));
  opacity: 0.5;
  filter: blur(calc(var(--u) * 4));
}
.hs-lamp__core {
  left: 50%;
  top: calc(var(--u) * -3.5);
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 9);
  translate: -50% 0;
  border-radius: 50%;
  background: rgb(var(--lamp-hot));
  filter: blur(calc(var(--u) * 2.5));
  transition: width 0.8s 0.3s ease-in-out;
}
.hs-lamp__line {
  left: 50%;
  width: calc(var(--u) * 15);
  height: 2px;
  translate: -50% 0;
  background: rgb(var(--lamp-hot));
  transition: width 0.8s 0.3s ease-in-out;
}
/* 开关灯（2026-11-04，拉绳 .hero__cord）：关灯时锥光、光晕、亮芯 0.5 秒熄掉，灯管留一道暗红的余烬；
   开灯时整盏灯像钨丝通电那样闪两下再亮稳（.is-flick 0.7 秒）。照站上全局吊灯 js/lamp.js 的「钨丝点亮 / 余烬熄灭」 */
.hs-lamp__beam { transition: width 0.8s 0.3s ease-in-out, opacity 0.5s ease-out; }
.hs-lamp__glow { transition: opacity 0.5s ease-out; }
.hs-lamp__core { transition: width 0.8s 0.3s ease-in-out, opacity 0.5s ease-out; }
.hs-lamp__line { transition: width 0.8s 0.3s ease-in-out, background-color 0.9s ease-out, box-shadow 0.9s ease-out; }
.hs-lamp.is-off .hs-lamp__beam,
.hs-lamp.is-off .hs-lamp__glow,
.hs-lamp.is-off .hs-lamp__core { opacity: 0; }
.hs-lamp.is-off .hs-lamp__line { background-color: rgb(96, 18, 18); box-shadow: none; }
.hs-lamp.is-flick .hs-lamp__in { animation: hsLampFlick 0.7s linear; transition: none; }   /* 闪的时候关掉入场渐亮，不然闪完会露出还没走完的渐亮、亮度往回掉一下 */
@keyframes hsLampFlick {
  0% { opacity: 0.15; }
  12% { opacity: 0.85; }
  20% { opacity: 0.2; }
  34% { opacity: 0.95; }
  42% { opacity: 0.5; }
  60%, 100% { opacity: 1; }
}
.hs-lamp.is-on .hs-lamp__in { opacity: 1; }
.hs-lamp.is-on .hs-lamp__beam,
.hs-lamp.is-on .hs-lamp__line { width: calc(var(--u) * 30); }
.hs-lamp.is-on .hs-lamp__core { width: calc(var(--u) * 16); }
/* 拉绳：灯管右端垂下一根细线，线头一颗小红珠；平时轻轻晃，鼠标移上去珠子亮一点，点一下往下一拽再弹回。
   位置（--cx / --cy）由 hero-scene.js 照灯管量好写进来 */
.hero__cord {
  position: absolute;
  left: var(--cx, 70%);
  top: var(--cy, 24vh);
  z-index: 4;
  width: 28px;
  height: 64px;
  margin-left: -14px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.4s 0.25s ease;    /* 进站时拉绳先出来，hero-scene.js 随后让它自己拽一下开灯 */
}
.hero__cord.is-ready { opacity: 1; }
.hero__cord i {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 46px;
  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.28));
  transform-origin: 50% 0;
  animation: heroCordSway 4.6s ease-in-out infinite;
}
.hero__cord i::after {
  content: '';
  position: absolute;
  left: -3.5px;
  bottom: -7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(255, 42, 42, 0.55);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.hero__cord:hover i::after,
.hero__cord:focus-visible i::after { box-shadow: 0 0 0 4px rgba(255, 42, 42, 0.18), 0 0 18px rgba(255, 42, 42, 0.9); transform: scale(1.15); }
.hero__cord:focus-visible { outline: none; }
.hero__cord.is-pull i { animation: heroCordPull 0.42s cubic-bezier(0.3, 1.6, 0.5, 1); }
.hero__cord[aria-pressed="false"] i::after { background: rgb(120, 26, 26); box-shadow: none; }
@keyframes heroCordSway {
  0%, 100% { transform: rotate(-2.2deg); }
  50% { transform: rotate(2.2deg); }
}
@keyframes heroCordPull {
  0% { transform: translateY(0) scaleY(1); }
  35% { transform: translateY(10px) scaleY(1.18); }
  100% { transform: translateY(0) scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hs-lamp__in,
  .hs-lamp__in > i { transition: none; }
  .hs-lamp.is-flick .hs-lamp__in,
  .hero__cord i,
  .hero__cord.is-pull i { animation: none; }
}
/* 原来横扫首屏的红色扫描线、固定的红色辉光：换成上面跟着画面变色的环境光 */
.hero-stage .hero::after,
.hero-stage .hero::before { display: none; }

/* 名字、副标题、题头压在场景层（灯、蒙板）之上 */
.hero-stage .hero__name,
.hero-stage .hero__sub,
.hero-stage .hero__case { z-index: 3; }

/* ── 推进段海报（2026-11-05 本人：「推进后改成这样的排版我觉得挺好的」，照「虚无哨兵」混剪的海报边框）──
   上排：左右两个压缩粗黑题头 + 中间红底白字小牌；中间：四个词（宋体大字 + 尖括号小字）按进度一个个蹦出来，位置左右错开；
   底部正中：大标题 + 细线 + 四行衬线小字。字色由 hero-scene.js 按字底下那块画面写 data-tone：
   dark（暗处）白字 + 红色重点字，light（灰白天空）黑字，red（正红底）黑字、重点字反白。切镜时硬换，不渐变（跟着剪辑走） */
.hs-poster {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  --ink: #0d0d0d;
  --paper: #f2f2f2;
  --red: #de1e1a;
}
.hs-poster [data-tone] { color: var(--paper); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); }
.hs-poster [data-tone="light"],
.hs-poster [data-tone="red"] { color: var(--ink); text-shadow: none; }
/* 推进段关掉首屏手电筒的压暗（hero-scene.js 在首屏的字收走时加 .is-push） */
.spotlight.is-push { opacity: 0; }
/* 上排题头：和首屏名字上方那排同款，两端各让出页头的位置 */
.hs-poster__top {
  position: absolute;
  top: max(15vh, 118px);
  left: clamp(56px, 6vw, 110px);
  right: clamp(56px, 6vw, 110px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-title);
  line-height: 1;
  text-transform: uppercase;
}
.hs-poster__tag { font-size: clamp(22px, 2.5vw, 42px); letter-spacing: 0.02em; }
.hs-poster__tag[data-tone],
.hs-poster__tag[data-tone="light"] { color: var(--red); }
.hs-poster__tag[data-tone="red"] { color: var(--ink); }
.hs-poster__tag[data-tone="reddark"] { color: var(--paper); }
.hs-poster__plate {
  padding: 0.16em 0.5em 0.1em;
  font-size: clamp(14px, 1.45vw, 24px);
  letter-spacing: 0.02em;
  color: var(--paper);
  background: var(--red);
}
body[data-lang="zh"] .hs-poster__top { font-family: 'Alibaba PuHuiTi', 'PingFang SC', sans-serif; font-weight: 900; letter-spacing: 0.08em; }
/* 四个词 */
.hs-word {
  position: absolute;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.hs-word--1 { left: 13vw; top: 31vh; }
.hs-word--2 { right: 12vw; top: 29vh; align-items: flex-end; }
.hs-word--3 { left: 9vw; top: 50vh; }
.hs-word--4 { right: 10vw; top: 48vh; align-items: flex-end; }
.hs-word__big {
  font-family: 'Songti SC', 'STSongti-SC', 'DW Serif SC', 'Noto Serif SC', 'SimSun', serif;
  font-weight: 700;
  font-size: clamp(46px, 6.4vw, 112px);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
body[data-lang="en"] .hs-word__big {
  font-family: 'Baskerville', 'Times New Roman', 'Songti SC', serif;
  font-weight: 600;
  font-size: clamp(40px, 5.4vw, 96px);
  letter-spacing: -0.01em;
}
.hs-word__small {
  margin-top: 0.3em;
  font-family: 'Baskerville', 'Times New Roman', 'Songti SC', 'STSongti-SC', serif;
  font-size: clamp(14px, 1.35vw, 23px);
  white-space: nowrap;
}
/* 重点字：暗处 / 亮处标红，红底上、红黑夹杂（红字会掉进红里）时反白；整词都是重点（调查 / investigation）时小字也跟着走 */
.hs-word .acc,
.hs-word.is-acc .hs-word__small { color: var(--red); }
.hs-word[data-tone="red"] .acc,
.hs-word.is-acc[data-tone="red"] .hs-word__small,
.hs-word[data-tone="reddark"] .acc,
.hs-word.is-acc[data-tone="reddark"] .hs-word__small { color: var(--paper); }
/* 蹦出来：没到这一段时字全藏着；到了按 --i 一个个出现（不渐变，像参考里卡着节拍跳字），收回去时一起消失 */
.hs-word .u,
.hs-word__small { display: inline-block; opacity: 0; transform: translateY(0.12em); }
.hs-word.is-in .u,
.hs-word.is-in .hs-word__small {
  opacity: 1;
  transform: none;
  transition: opacity 0s linear calc(var(--i) * 90ms), transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i) * 90ms);
}
/* 底部大标题 */
.hs-poster__foot {
  position: absolute;
  left: 50%;
  bottom: max(9vh, 64px);
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hs-poster__foot[data-tone="red"] { color: var(--paper); }
.hs-poster__name {
  padding-bottom: 0.1em;
  border-bottom: 2px solid currentColor;
  font-family: var(--font-title);
  font-size: clamp(36px, 4.6vw, 76px);
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.hs-poster__note {
  margin: 0.7em 0 0;
  font-family: 'Baskerville', 'Times New Roman', 'Songti SC', 'STSongti-SC', 'DW Serif SC', serif;
  font-size: clamp(12px, 1vw, 16px);
  line-height: 1.3;
}

/* ── 首屏底部滚动提示 ── */
.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-poster, .hs-hint, .hs-blink { display: none; }
}

@media (max-width: 720px) {
  .hero-track { height: 260vh; }
  .hs-poster__top { top: max(12vh, 92px); left: 20px; right: 20px; }
  .hs-poster__tag { font-size: 20px; }
  .hs-poster__plate { font-size: 13px; }
  .hs-word--1 { left: 7vw; top: 27vh; }
  .hs-word--2 { right: 7vw; top: 37vh; }
  .hs-word--3 { left: 7vw; top: 47vh; }
  .hs-word--4 { right: 7vw; top: 57vh; }
  .hs-word__big { font-size: 46px; }
  body[data-lang="en"] .hs-word__big { font-size: 38px; }
  .hs-word__small { font-size: 14px; }
  .hs-poster__foot { bottom: max(13vh, 96px); }
  .hs-poster__name { font-size: 34px; }
  .hs-poster__note { font-size: 11.5px; }
}