/* ==========================================================================
   LIGHTART 光艺影像 — 暗色电影感
   ========================================================================== */

/* ---- 自托管字体 -----------------------------------------------------------
   本地 woff2，零外链。产物由 tools/build-fonts.js 生成，可反复跑。

   为什么非换不可：原先的 "Helvetica Neue" → Helvetica → Arial 栈在 Windows 上
   只有 Regular 和 Bold —— 实测 font-weight 200/300/400/500 渲染宽度完全一致，
   全站 44 处 font-weight:300 在一半用户那里根本没生效。中文则回退到微软雅黑。

   两支都是可变字体：一个文件覆盖 300 / 400 / 700 全部字重，
   实测比切成两个静态实例还小（198 KB vs 207 KB）。
   Inter 另带 opsz（光学尺寸）轴，浏览器按 font-size 自动挑字形，
   所以 165px 的 LIGHTART 和 10px 的小标签用的不是同一套轮廓。

   ⚠️ 系统字栈保留在 --sans 末尾兜底：某些浏览器用 file:// 直接打开时
   会按跨域拦掉字体文件，那种情况下退回原来的表现，不会变成方框。      */
@font-face {
  font-family: 'Inter var';
  src: url('../assets/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans SC var';
  src: url('../assets/fonts/noto-sans-sc-subset.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens -------------------------------------------------------------- */
:root {
  --bg:        #08090A;
  --bg-2:      #0C0D0F;
  --surface:   #121316;
  --line:      rgba(242,240,236,.10);
  --line-2:    rgba(242,240,236,.20);
  --fg:        #F2F0EC;
  --fg-2:      #8A8781;
  /* 原为 #56534E —— 对 --bg 只有 2.60:1，低于 WCAG AA 的 4.5。
     它承载 sectionlabel、装备表左栏、播放器时间码这些是要读的小字（10-11px
     等宽大写），不是纯装饰，提到 4.5 以上。仍比 --fg-2 暗，层级没塌。 */
  --fg-3:      #7E7972;
  /* 黄铜 / 香槟，而不是饱和金黄。纯黑上前者是金属，后者容易发荧光。 */
  --accent:    #B8A179;

  /* Inter 在前吃拉丁与数字，Noto Sans SC 接汉字；后面整段是 file:// 被拦时的兜底 */
  --sans: "Inter var", "Noto Sans SC var",
          "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei",
          "Hiragino Sans GB", "Source Han Sans SC", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Roboto Mono", monospace;

  --ease: cubic-bezier(.16,1,.3,1);
  /* house ease 是 expo-out：起步猛、尾巴长，适合"东西被丢进来再稳住"。
     拉焦不是被丢进来的，是缓缓解开——要更柔和的减速，全程没有急起急停。 */
  --ease-soft: cubic-bezier(.22,.61,.36,1);

  /* 动效时长。原本 73 处硬编码、22 种不同值，其中 .28/.3、.6/.62 这类
     差别根本感觉不到，只是让整体节奏失去统一。收成 4 档：

       --t-1  微交互 —— 悬停变色、小状态切换
       --t-2  常规   —— 大部分 UI 过渡
       --t-3  入场   —— 滚动揭示、大块位移
       --t-4  慢     —— 首屏、封面缓推

     层次靠"差几档"来拉开，而不是靠两个相近的随手值。
     ⚠️ 这四个只管 transition 的 duration。delay 是刻意排的节奏
        （统计数字的 .10/.24/.38 错峰），不在收敛范围内。 */
  --t-1: .3s;
  --t-2: .45s;
  --t-3: .7s;
  --t-4: 1.1s;

  /* 固定字号。大标题用 clamp() 做流体，那是刻意的、不收；这里收的是 28 处
     固定值——原本 .56/.58/.6/.62/.64/.66/.68rem 七个值挤在 2px 内，
     .78 到 .92rem 又是七个，全都分辨不出，只是同一角色的随手取值。

       --fs-label     主标签 —— 导航、筛选器、按钮文字
       --fs-label-sm  次级标签 —— 压在封面上的编号/时长/客户名，要让位给画面
       --fs-caption   短说明 —— 卡片下方文案、跳过链接
       --fs-body-sm   小正文 —— 装备注、灯箱信息值

     两级标签的区分是真的（主导航 vs 图上叠字），保留；同级内部的
     0.02rem 差异不是，合并。body 的 16px 和 .nav__brand-en 的 .92rem
     是独立角色，不并入音阶。 */
  --fs-label:    .66rem;
  --fs-label-sm: .6rem;
  --fs-caption:  .8rem;
  --fs-body-sm:  .88rem;

  --pad:  clamp(20px, 5vw, 72px);
  --gap:  clamp(12px, 1.6vw, 26px);
  --maxw: 1680px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* 告诉浏览器这是一张暗色页面。不声明的话，原生滚动条和表单控件会按亮色画——
   纯黑页面右侧挂一条系统亮灰滚动条，是最显眼的"没做完"细节。 */
:root { color-scheme: dark; }
html { scrollbar-width: thin; scrollbar-color: rgba(242,240,236,.16) transparent; }

/* 选中态默认是浏览器的亮蓝底，在这套配色上很跳 */
::selection { background: var(--accent); color: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

.mono {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

.skip {
  position: fixed; top: -100px; left: 16px; z-index: 999;
  background: var(--fg); color: var(--bg); padding: 10px 16px; font-size: var(--fs-caption);
}
.skip:focus { top: 16px; }

/* ---- 质感叠层：胶片颗粒 + 暗角 ------------------------------------------- */
.grain-src { display: none; }

.grain {
  position: fixed; inset: -60%; z-index: 900; pointer-events: none;
  opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainshift .7s steps(4) infinite;
}
@keyframes grainshift {
  0%   { transform: translate(0,0) }
  25%  { transform: translate(-3%, 2%) }
  50%  { transform: translate(2%, -3%) }
  75%  { transform: translate(-2%, -2%) }
  100% { transform: translate(3%, 1%) }
}

.vignette {
  position: fixed; inset: 0; z-index: 890; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(0,0,0,.55) 100%);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain { animation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- 滚动进场 ------------------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(28px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--t-3) var(--ease), transform var(--t-3) var(--ease);
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  display: flex; align-items: center; gap: var(--pad);
  padding: 20px var(--pad);
  transition: background var(--t-2) var(--ease), backdrop-filter var(--t-2) var(--ease),
              border-color var(--t-2) var(--ease), padding var(--t-2) var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(8,9,10,.72);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom-color: var(--line);
  padding-top: 14px; padding-bottom: 14px;
}

.nav__brand { display: flex; align-items: baseline; gap: 10px; margin-right: auto; }
.nav__brand-en {
  font-size: .92rem; font-weight: 700; letter-spacing: .34em;
}
.nav__brand-zh {
  font-size: var(--fs-label); letter-spacing: .3em; color: var(--fg-2);
}
/* 中英之间的分隔线。基线对齐时，空的 inline-block 底边就落在基线上，
   所以给个高度它就正好从基线向上立起来，不用额外定位。 */
.nav__rule {
  flex: none; width: 1px; height: .7rem;
  background: var(--line-2);
}

.nav__links { display: flex; gap: 28px; }
.nav__link {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .18em;
  text-transform: uppercase; color: var(--fg-2);
  position: relative; padding: 4px 0;
  transition: color var(--t-1) var(--ease);
}
.nav__link::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-2) var(--ease);
}
.nav__link:hover { color: var(--fg); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }

.langtoggle {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .1em;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
  transition: border-color var(--t-1) var(--ease);
}
.langtoggle:hover { border-color: var(--line-2); }
.langtoggle__opt { color: var(--fg-3); transition: color var(--t-1) var(--ease); }
.langtoggle__sep { color: var(--fg-3); }
html[data-lang="zh"] .langtoggle__opt[data-lang-opt="zh"],
html[data-lang="en"] .langtoggle__opt[data-lang-opt="en"] { color: var(--fg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative; height: 100svh; min-height: 560px;
  display: flex; align-items: flex-end;
  padding: var(--pad); overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; }
.hero__video {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.86) contrast(1.06) brightness(.72);
  transform: scale(1.04);
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--bg) 2%, rgba(8,9,10,.35) 42%, rgba(8,9,10,.55) 100%),
    linear-gradient(to right, rgba(8,9,10,.7), transparent 55%);
}

.hero__inner { position: relative; max-width: 1100px; }

.hero__eyebrow {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .28em;
  text-transform: uppercase; color: var(--fg-2); margin-bottom: 22px;
  padding-left: 34px; position: relative;
}
.hero__eyebrow::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 22px; height: 1px; background: var(--accent);
}

.hero__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: clamp(12px, 2vw, 30px); }
.hero__title-en {
  font-size: clamp(3.4rem, 11.5vw, 12rem);
  font-weight: 700; letter-spacing: -.02em; line-height: .86;
}

/* ---- 片头字卡 -------------------------------------------------------------
   影片工作室的首屏应该像一张片头字卡：字标从虚焦解到实焦，画面再慢慢定住。
   讲的是镜头语言，不是网页特效——这也是选它而不是位移/擦除类方案的理由。

   驱动方式：JS 只给 .hero 加一个 .is-intro，其余全靠 CSS。
   没有 JS 时不加这个类，首屏就是原来的静态样子，不会白屏。

   ⚠️ 作用在整块字标上，不拆字母——所以标题始终是一个完整文本节点，
      读屏自然念作 "LIGHTART 光艺影像"，不需要 aria-hidden + aria-label 绕行。
      （早先的逐字母版就是栽在这里：拆开后每个字母是独立 flex 项，
      无障碍树把标题念成了 "LIGHTARTLIGHTART 光艺影像"。）
   ⚠️ blur 是逐帧重算的，代价比 transform/opacity 高。这里只在首屏放一次、
      1.5s 就结束，不参与滚动，所以可以接受；别把它挪到常驻交互上去。
   ⚠️ scale 用默认的中心原点：字标左缘在 --pad(最大 72px) 之内，
      1.05 倍向左也只多出 ~22px，不会顶到 .hero 的 overflow:hidden。
   ⚠️ prefers-reduced-motion 由文件顶部那条全局规则统一压成 .01ms，
      会直接落到终态，这里不再重复处理。 */
@keyframes markFocus {
  from { opacity: 0; filter: blur(20px); transform: scale(1.05); }
  to   { opacity: 1; filter: blur(0);    transform: scale(1); }
}
.hero.is-intro .hero__title-en {
  animation: markFocus 1.5s var(--ease-soft) both;
}

/* 竖线从顶端画下来，接在最后一个字母立稳之后 */
@keyframes ruleDraw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.hero.is-intro .hero__rule {
  transform-origin: top;
  animation: ruleDraw var(--t-3) var(--ease) .74s both;
}

/* 中文从散开收到定位。字距的终值必须和 .hero__title-zh 的 letter-spacing 一致，
   改那边记得改这里。只有四个字，逐帧回流的代价可以忽略。 */
@keyframes zhSettle {
  from { opacity: 0; letter-spacing: 1.15em; }
  to   { opacity: 1; letter-spacing: .5em; }
}
.hero.is-intro .hero__title-zh {
  animation: zhSettle 1.15s var(--ease) .86s both;
}

/* 其余首屏元素依次跟进，节奏靠延迟拉开而不是靠不同时长 */
@keyframes heroUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.hero.is-intro .hero__eyebrow { animation: heroUp var(--t-3) var(--ease) 1.12s both; }
.hero.is-intro .hero__slogan  { animation: heroUp var(--t-3) var(--ease) 1.30s both; }
.hero.is-intro .reelbtn       { animation: heroUp var(--t-3) var(--ease) 1.48s both; }
.hero.is-intro .hero__scroll  { animation: heroUp var(--t-3) var(--ease) 1.64s both; }

/* 画面从更暗、更大缓缓定住——像镜头稳下来。
   终值必须和 .hero__video 的 filter/transform 一致。

   ⚠️ 曝光和位移是两条独立的动画，不能合并：
      真实镜头是自动曝光先锁定、推镜还在继续，两者同步反而假。
      曝光 2s 收（跟字标序列 1.64s 的收尾对齐），推镜走满 4s，
      比整个片头活得更久——画面才像还在呼吸，而不是定格。
   ⚠️ 这里不用 --ease：那是 expo-out，七成位移在头 400ms 就走完，
      剩下两秒看不出还在动，"推"这个动作等于没发生。
      --ease-soft 把行程摊到全程。
   ⚠️ 位移 1.14 → 1.04 是 10% 的行程。再小就看不出是推镜，
      再大边缘会露出 object-fit 裁掉的部分。 */
@keyframes heroPush {
  from { transform: scale(1.14); }
  to   { transform: scale(1.04); }
}
@keyframes heroExpose {
  from { filter: saturate(.62) contrast(1.06) brightness(.30); }
  to   { filter: saturate(.86) contrast(1.06) brightness(.72); }
}
.hero.is-intro .hero__video {
  animation: heroPush   4s var(--ease-soft) both,
             heroExpose 2s var(--ease-soft) both;
}

/* 往下滑时首屏文字先行退场，把注意力交给下面的内容。
   --heroOut 由 js 在滚动里写（0=还没动，1=首屏已滚完一屏）。 */
.hero__inner, .reelbtn {
  will-change: opacity, transform;
}
.hero:not(.is-intro) .hero__inner,
.hero.intro-done .hero__inner {
  opacity: calc(1 - var(--heroOut, 0));
  transform: translateY(calc(var(--heroOut, 0) * -40px));
}
/* 分隔线高度贴着 LIGHTART 的 cap height（约字号的 .72），
   基线对齐让它正好从基线立到字母顶端。顶端渐隐，避免像一根硬插进去的杆。 */
.hero__rule {
  flex: none; width: 1px;
  height: clamp(2.4rem, 8vw, 8.4rem);
  background: linear-gradient(to top, rgba(242,240,236,.32), rgba(242,240,236,.05));
}

.hero__title-zh {
  font-size: clamp(.9rem, 2vw, 1.5rem);
  letter-spacing: .5em; color: var(--fg-2); font-weight: 400;
}

.hero__slogan {
  margin-top: 26px; font-size: clamp(1rem, 1.7vw, 1.5rem);
  color: var(--fg-2); font-weight: 300; letter-spacing: .02em;
}

/* Showreel 按钮 */
.reelbtn {
  position: absolute; right: var(--pad); bottom: calc(var(--pad) + 4px); z-index: 2;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 24px; border: 1px solid var(--line-2); border-radius: 999px;
  background: rgba(8,9,10,.4); backdrop-filter: blur(10px);
  transition: border-color var(--t-2) var(--ease), background var(--t-2) var(--ease);
}
.reelbtn:hover { border-color: var(--accent); background: rgba(8,9,10,.65); }
.reelbtn__icon {
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid currentColor; border-radius: 50%; color: var(--accent);
  transition: transform var(--t-2) var(--ease);
}
.reelbtn:hover .reelbtn__icon { transform: scale(1.12); }
.reelbtn__label { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .2em; text-transform: uppercase; }
.reelbtn__time { color: var(--fg-3); }

.hero__scroll {
  position: absolute; left: var(--pad); bottom: var(--pad); z-index: 2;
  display: none; align-items: center; gap: 12px; color: var(--fg-3);
}
.hero__scroll-line {
  display: block; width: 46px; height: 1px; background: var(--fg-3);
  transform-origin: left; animation: scrollpulse 2.6s var(--ease) infinite;
}
@keyframes scrollpulse { 0%,100%{transform:scaleX(.25);opacity:.4} 50%{transform:scaleX(1);opacity:1} }

/* ==========================================================================
   圆筒滚筒预览
   六面棱柱（3 支片各占两面），绕 Y 轴转动。
   .drum__cyl 先 translateZ(-r) 把整个筒往后推，让正面那一片正好落在 z=0，
   这样它以原始大小呈现，两侧的面自然后退变小 —— 否则正面会被透视放大到溢出。
   ========================================================================== */
/* ⚠️ 上留白比 .statement / .equip 小得多，是刻意的：
   滚筒是唯一紧跟满屏首屏的区块，而首屏自己底部已经有 var(--pad) 的内边距，
   再叠上 .hero__scrim 渐隐到纯黑的那一段，观感上早就"空"了。
   原值 clamp(64px, 9vw, 130px) 在 1440 下是 130px，加首屏的 72px
   等于 202px 纯空白，中间什么都没有。 */
.drum {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(32px, 4vw, 60px) var(--pad) clamp(30px, 4vw, 60px);
  overflow: hidden;
}

.drum__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; padding-bottom: 22px; margin-bottom: clamp(20px, 3vw, 44px);
  border-bottom: 1px solid var(--line);
}
.drum__head .sectionlabel { margin-bottom: 0; }

.drum__ctrl { display: flex; align-items: center; gap: 14px; }
.drum__btn {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: 50%; color: var(--fg-2);
  transition: color var(--t-1) var(--ease), border-color var(--t-1) var(--ease), transform var(--t-2) var(--ease);
}
.drum__btn:hover { color: var(--fg); border-color: var(--line-2); }
#drumPrev:hover { transform: translateX(-2px); }
#drumNext:hover { transform: translateX(2px); }
.drum__count { color: var(--fg-3); }
.drum__count b { color: var(--fg); font-weight: 400; }
.drum__count i { font-style: normal; margin: 0 5px; }

/* --- 筒身 --- */
/* --fw = 正面那一片占舞台宽度的比例。
   屏幕越窄要给得越大，否则正面板会缩成一张邮票（实测 375px 下 44% 只有 148px）。
   半径由 JS 按实际面宽换算，改这个值不用动别处。 */
.drum__stage {
  --fw: 44%;
  position: relative;
  height: clamp(230px, 30vw, 430px);
  perspective: 1700px;
  perspective-origin: 50% 46%;
  touch-action: pan-y;
  cursor: grab;
}
.drum__stage.is-dragging { cursor: grabbing; }

.drum__cyl {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--r, 0px) * -1)) rotateY(var(--rot, 0deg));
  transition: transform var(--t-4) var(--ease);
}
.drum__cyl.is-dragging { transition: none; }

/* translateY(-50%) 沿的是旋转轴本身，放在 rotateY 之前不影响后面的 3D 变换，
   用它做垂直居中最省事（面的高度由 aspect-ratio 得出，CSS 里算不出来）。 */
.drum__face {
  position: absolute; top: 50%; left: 50%;
  width: var(--fw, 44%); aspect-ratio: 16/9;
  margin-left: calc(var(--fw, 44%) / -2);
  transform: translateY(-50%) rotateY(var(--a)) translateZ(var(--r, 0px));
  backface-visibility: hidden;
  overflow: hidden; background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
}
.drum__face-img, .drum__face-vid {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity var(--t-3) var(--ease);
}
.drum__face-vid { opacity: 0; }
.drum__face.is-front .drum__face-vid { opacity: 1; }
.drum__face.is-front .drum__face-img { opacity: 0; }

/* 非正面的片压暗，视觉焦点始终在正前方 */
.drum__face::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(8,9,10,.68);
  transition: opacity var(--t-3) var(--ease);
}
.drum__face.is-front::after { opacity: 0; }

.drum__face-no {
  position: absolute; top: 12px; left: 14px; z-index: 2;
  color: var(--accent); font-family: var(--mono); font-size: var(--fs-label-sm);
  letter-spacing: .16em; opacity: 0; transition: opacity var(--t-3) var(--ease);
}
.drum__face.is-front .drum__face-no { opacity: 1; }

/* 筒底投影，让筒看起来是立在那儿的 */
.drum__shadow {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
  width: 46%; height: 26px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 70%);
  filter: blur(9px); pointer-events: none;
}

/* --- 筒下方的信息 --- */
.drum__meta {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 26px;
  margin-top: clamp(26px, 3.5vw, 52px);
}
.drum__txt { min-width: 0; max-width: 56ch; }
.drum__client { color: var(--fg-3); }
.drum__title {
  font-size: clamp(1.35rem, 3vw, 2.5rem); font-weight: 400;
  letter-spacing: -.018em; line-height: 1.18; margin-top: 10px;
}
.drum__note {
  margin-top: 12px; color: var(--fg-2);
  font-size: clamp(.88rem, 1.15vw, 1.02rem); line-height: 1.6; font-weight: 300;
}
/* 换片时文字淡出淡入，避免硬切 */
.drum__txt { transition: opacity var(--t-1) var(--ease); }
.drum__txt.is-swapping { opacity: 0; }

.drum__side { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.drum__play {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 22px; border: 1px solid var(--line-2); border-radius: 999px;
  transition: border-color var(--t-2) var(--ease), background var(--t-2) var(--ease);
  white-space: nowrap;
}
.drum__play:hover { border-color: var(--accent); background: rgba(201,162,39,.06); }
.drum__play > span:nth-child(2) {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .2em; text-transform: uppercase;
}
.drum__play-ico {
  display: grid; place-items: center; width: 26px; height: 26px;
  border: 1px solid currentColor; border-radius: 50%; color: var(--accent);
}
.drum__play-dur { color: var(--fg-3); }
.drum__hint { color: var(--fg-3); font-size: var(--fs-label-sm); }

@media (prefers-reduced-motion: reduce) {
  .drum__cyl { transition: none; }
}

/* ==========================================================================
   STATEMENT
   ========================================================================== */
/* 这几个标签现在是 <h2>（页面原本除了 EQUIPMENT 没有任何二级标题），
   所以要把 h2 的默认粗体压回去 —— 视觉上和原来的 <p> 完全一致。 */
.sectionlabel { color: var(--fg-3); margin-bottom: 34px; font-weight: 400; }

.statement {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(90px, 13vw, 190px) var(--pad) clamp(70px, 9vw, 130px);
}
/* lead 是那句主张，用大字；body 是下面的说明段，退到次级灰。
   中文每个字都是全宽，同样的 ch 值会比西文长很多，所以分别给上限。 */
.statement__lead {
  font-size: clamp(1.3rem, 2.85vw, 2.7rem);
  line-height: 1.34; font-weight: 300; letter-spacing: -.012em;
  max-width: 27ch; text-wrap: balance;
}
html[data-lang="zh"] .statement__lead { max-width: 21ch; line-height: 1.52; }

.statement__body {
  margin-top: clamp(24px, 3.2vw, 44px);
  max-width: 56ch;
  color: var(--fg-2);
  font-size: clamp(.92rem, 1.12vw, 1.05rem);
  line-height: 1.78; font-weight: 300;
}
html[data-lang="zh"] .statement__body { max-width: 40ch; line-height: 1.9; }

/* 一句主张，不是说明文字 —— 用琥珀色竖线把它和上面的正文分开，
   字号回到正文之上、lead 之下，读者的眼睛会在这里停一下。 */
.statement__promise {
  margin-top: clamp(26px, 3.4vw, 46px);
  padding-left: 18px;
  border-left: 2px solid var(--accent);
  max-width: 42ch;
  color: var(--fg);
  font-size: clamp(1rem, 1.45vw, 1.3rem);
  line-height: 1.65; font-weight: 400; letter-spacing: -.005em;
}
html[data-lang="zh"] .statement__promise { max-width: 30ch; }

.stats {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--gap); margin-top: clamp(56px, 7vw, 100px);
  border-top: 1px solid var(--line); padding-top: 34px;
}

/* 滚到这里时逐个渐入：主张句先出，三个数字再一个接一个跟上。
   整块一起淡入太平，错开之后眼睛会顺着往下走。
   .reveal 已经在动整个 section 的 opacity，这里是叠在它之上的第二层节奏。

   ⚠️ 触发用的是 .is-stats（js 里单独盯 #stats），不是整块的 .is-in。
   主张句和数字在这个 1030px 区块的最后 1/4，跟着整块触发会在视口下方演完。 */
.statement__promise,
.stat { opacity: 0; transform: translateY(18px); }

.statement.is-stats .statement__promise,
.statement.is-stats .stat {
  opacity: 1; transform: none;
  transition: opacity var(--t-3) var(--ease), transform var(--t-3) var(--ease);
}
.statement.is-stats .statement__promise { transition-delay: 0s; }
.statement.is-stats .stat:nth-child(1)  { transition-delay: .10s; }
.statement.is-stats .stat:nth-child(2)  { transition-delay: .24s; }
.statement.is-stats .stat:nth-child(3)  { transition-delay: .38s; }

/* 顶部那条分隔线也跟着展开，而不是凭空出现 */
.stats {
  background-image: linear-gradient(to right, var(--line), var(--line));
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: left top;
  border-top-color: transparent;
  transition: background-size var(--t-4) var(--ease) .15s;
}
.statement.is-stats .stats { background-size: 100% 1px; }
.stat__n {
  position: relative;
  font-size: clamp(2.4rem, 5.2vw, 4.6rem); font-weight: 300;
  letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums;
}
.stat__n sup { font-size: .38em; vertical-align: super; color: var(--accent); margin-left: 2px; }

/* ---- 胶片计数器 ----------------------------------------------------------
   每一位是一条 0-9 的纵向数字带，装在 1em 高的窗口里，滚到目标那格咬停。
   数字带由 js/main.js 的 countUp() 生成，静止时停在 0。

   窗口高度必须正好 1em：.stat__n 的 line-height 也是 1，两者对齐后
   滚字的基线跟普通文字一模一样，右上角那个 + 才不会错位。
   数字没有下伸部，cap height < 1em，这个高度不会切到字。         */
.odo { display: inline-flex; vertical-align: bottom; }
.odo__d { display: block; height: 1em; overflow: hidden; }
.odo__strip { display: block; transform: translateY(0); transition: transform var(--t-4) var(--ease); }
.odo__strip.is-roll { transform: translateY(calc(var(--stop) * -1em)); }
.odo__n { display: block; height: 1em; line-height: 1em; }

/* 视觉上藏起来但读屏仍要念。滚字带、拆成单字母的 LIGHTART 都靠它。 */
.stat__sr, .sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.stat__k { margin-top: 12px; color: var(--fg-2); }

/* ==========================================================================
   WORKS
   ========================================================================== */
.works { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) clamp(90px, 12vw, 170px); }

.works__head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 26px;
  padding-bottom: 26px; margin-bottom: var(--gap);
  border-bottom: 1px solid var(--line);
}
.works__head .sectionlabel { margin-bottom: 0; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-2);
  padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px;
  transition: color var(--t-1) var(--ease), border-color var(--t-1) var(--ease), background var(--t-1) var(--ease);
  white-space: nowrap;
}
.filter:hover { color: var(--fg); border-color: var(--line-2); }
.filter.is-on { color: var(--bg); background: var(--fg); border-color: var(--fg); }
.filter__n { color: var(--fg-3); margin-left: 7px; }
.filter.is-on .filter__n { color: rgba(8,9,10,.45); }

/* --- 网格：JS 瀑布流（绝对定位 + 最短列优先）---------------------------------
   16:9 与 9:16 的高度比是 3.16，用 CSS Grid 行跨度永远无法整数对齐，
   dense 打包必然留洞。所以由 JS 按真实比例算位置，做到零空隙。          */
/* column-gap 在这里不参与布局，只是让 JS 能读到一个已解析成 px 的间距值
   （自定义属性 --gap 的 clamp() 读出来还是字符串，parseFloat 拿不到） */
.grid { position: relative; column-gap: var(--gap); }
.grid__empty { color: var(--fg-2); padding: 60px 0; text-align: center; }

.card {
  position: absolute; top: 0; left: 0;
  will-change: transform;
}
.card.is-laid {
  transition: transform var(--t-3) var(--ease), width var(--t-3) var(--ease), opacity var(--t-3) var(--ease);
}
/* 量高时必须关掉 width 过渡，否则量到的是动画中间值 */
.grid.is-measuring .card { transition: none !important; }
.card.is-hidden { display: none; }

.card__inner { transition: transform var(--t-3) var(--ease); }

/* button 默认是 inline-block，没有确定宽度 aspect-ratio 就不生效 —— 必须 block + 100% */
.card__media {
  display: block; width: 100%;
  position: relative; overflow: hidden; background: var(--surface);
  aspect-ratio: var(--ar, 16/9);
  border: 1px solid transparent;
  transition: border-color var(--t-2) var(--ease);
}
.card:hover .card__media { border-color: var(--line-2); }

.card__img, .card__vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity var(--t-2) var(--ease), transform var(--t-4) var(--ease), filter var(--t-2) var(--ease);
}
.card__img { filter: saturate(.9) brightness(.86); }
.card:hover .card__img { transform: scale(1.045); filter: saturate(1) brightness(1); }
.card__vid { opacity: 0; }
.card.is-previewing .card__vid { opacity: 1; }
.card.is-previewing .card__img { opacity: 0; }

.card__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,9,10,.78) 0%, rgba(8,9,10,.12) 45%, transparent 70%);
  opacity: .85; transition: opacity var(--t-2) var(--ease);
}
.card:hover .card__scrim { opacity: 1; }

.card__no {
  position: absolute; top: 14px; left: 16px; z-index: 2;
  color: var(--fg-2); font-size: var(--fs-label-sm);
  transition: color var(--t-2) var(--ease);
}
.card:hover .card__no { color: var(--accent); }

.card__dur {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  color: var(--fg); font-size: var(--fs-label-sm);
  background: rgba(8,9,10,.5); backdrop-filter: blur(6px);
  padding: 3px 8px; border-radius: 3px;
}

.card__play {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  opacity: 0; transition: opacity var(--t-2) var(--ease);
}
.card:hover .card__play { opacity: 1; }
.card__play span {
  display: grid; place-items: center; width: 62px; height: 62px;
  border: 1px solid rgba(242,240,236,.5); border-radius: 50%;
  background: rgba(8,9,10,.28); backdrop-filter: blur(6px);
  transform: scale(.86); transition: transform var(--t-2) var(--ease);
}
.card:hover .card__play span { transform: scale(1); }

.card__foot {
  position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2;
}
.card__client {
  display: block;
  color: var(--fg-2); font-family: var(--mono); font-size: var(--fs-label-sm);
  letter-spacing: .16em; text-transform: uppercase;
}
.card__title {
  display: block;
  font-size: clamp(.95rem, 1.25vw, 1.3rem); font-weight: 400;
  letter-spacing: -.005em; line-height: 1.25; margin-top: 5px;
  text-wrap: balance;
}
.card--feat .card__title { font-size: clamp(1.1rem, 1.8vw, 1.9rem); }

.card__meta {
  display: flex; gap: 14px; margin-top: 10px;
  color: var(--fg-3); font-family: var(--mono); font-size: var(--fs-label-sm);
  letter-spacing: .12em; text-transform: uppercase;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--t-2) var(--ease), transform var(--t-2) var(--ease);
}
.card:hover .card__meta { opacity: 1; transform: none; }

/* 触摸设备没有 hover，上面那条永远不会触发——分类和分辨率在手机上
   等于彻底消失了（30 张卡全部）。这不是样式问题，是内容缺失。
   没有 hover 能力时直接常驻显示。 */
@media (hover: none) {
  .card__meta { opacity: 1; transform: none; }
}

/* 影片下方的短文案。在图外，不叠在画面上 —— 画面已经够满了。
   ⚠️ 它让卡片高度不再能由比例算出，所以瀑布流改为实测高度。 */
.card__note {
  margin-top: 14px; padding-left: 13px;
  border-left: 1px solid var(--line);
  color: var(--fg-2); font-size: var(--fs-caption); line-height: 1.6; font-weight: 300;
  transition: color var(--t-2) var(--ease), border-color var(--t-2) var(--ease);
}
.card:hover .card__note { color: var(--fg); border-left-color: var(--accent); }

/* ==========================================================================
   EQUIPMENT
   ========================================================================== */
.equip {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(70px, 9vw, 130px) var(--pad);
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 110px); align-items: start;
}
.equip__title { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.equip__title-en {
  font-size: clamp(2.4rem, 6vw, 5.4rem); font-weight: 700;
  letter-spacing: -.025em; line-height: .9;
}
.equip__title-zh {
  font-size: clamp(.78rem, 1.3vw, 1rem); letter-spacing: .42em; color: var(--fg-2);
}
/* 这一行绑的是 equipment.label，英文值也是 "Equipment"，所以英文态会渲染成
   "EQUIPMENT / Equipment"——同一个词写两遍。它是双语并置的排版，不是像首屏
   LIGHTART│光艺影像 那样的品牌锁定，英文态留一个就够。 */
html[data-lang="en"] .equip__title-zh { display: none; }
.equip__note { color: var(--fg-3); font-size: var(--fs-body-sm); max-width: 34ch; }

.spec { border-top: 1px solid var(--line); }
.spec__row {
  display: grid; grid-template-columns: minmax(90px, .5fr) minmax(0, 1fr);
  gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--line);
  transition: border-color var(--t-2) var(--ease);
}
.spec__row:hover { border-bottom-color: var(--line-2); }
.spec__k { color: var(--fg-3); padding-top: 6px; }
.spec__v { text-align: right; }
/* 必须 block：span 是内联元素，多个器材会挤成一行且 margin-top 无效 */
.spec__item {
  display: block;
  font-family: var(--mono); font-size: clamp(.85rem, 1.3vw, 1.15rem);
  letter-spacing: .04em; line-height: 1.5;
}
.spec__item + .spec__item { margin-top: 4px; }
.spec__sub { margin-top: 10px; color: var(--fg-3); font-size: var(--fs-caption); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot {
  border-top: 1px solid var(--line);
  padding: clamp(90px, 14vw, 200px) var(--pad) 40px;
  text-align: center;
}
.foot__cta {
  font-size: clamp(1.6rem, 4.6vw, 4rem); font-weight: 300;
  letter-spacing: -.02em; line-height: 1.15; color: var(--fg-2);
}
.foot__mailrow {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 18px; margin-top: clamp(28px, 4vw, 52px);
}
.foot__mail {
  position: relative; font-size: clamp(1.1rem, 3.6vw, 3.1rem);
  font-weight: 400; letter-spacing: -.02em; word-break: break-word;
}
.foot__mail::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -.08em; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-2) var(--ease);
}
.foot__mail:hover::after { transform: scaleX(1); transform-origin: left; }

.copybtn {
  font-family: var(--mono); font-size: var(--fs-label-sm); letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px;
  transition: color var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
  flex-shrink: 0;
}
.copybtn:hover { color: var(--fg); border-color: var(--line-2); }
.copybtn.is-done { color: var(--accent); border-color: var(--accent); }

/* 电话。邮箱仍是主转化入口，所以电话压小一档排在它下面，不抢。
   下划线的展开方向跟 .foot__mail 一致（右进左出），是同一套手势。
   号码用 tabular-nums：两个号码上下/左右对齐时数字宽度一致，不会参差。 */
.foot__phones {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(24px, 5vw, 62px); margin-top: clamp(26px, 3.4vw, 44px);
}
.foot__phone { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.foot__phone-region { color: var(--fg-3); font-size: var(--fs-label-sm); }
.foot__phone-num {
  position: relative;
  font-size: clamp(1rem, 1.7vw, 1.35rem); font-weight: 300;
  letter-spacing: .01em; color: var(--fg-2); white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: color var(--t-1) var(--ease);
}
.foot__phone-num:hover { color: var(--fg); }
.foot__phone-num::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-2) var(--ease);
}
.foot__phone-num:hover::after { transform: scaleX(1); transform-origin: left; }

.foot__links { display: flex; justify-content: center; gap: 26px; margin-top: 40px; }
.foot__links:empty { display: none; }
.foot__linka {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-2);
  border-bottom: 1px solid var(--line); padding-bottom: 3px;
  transition: color var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
.foot__linka:hover { color: var(--fg); border-color: var(--accent); }

.foot__base {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  align-items: center; text-align: left;
  margin-top: clamp(70px, 10vw, 130px); padding-top: 24px;
  border-top: 1px solid var(--line);
}
.foot__rights { color: var(--fg-3); }
.foot__top { color: var(--fg-2); transition: color var(--t-1) var(--ease); }
.foot__top:hover { color: var(--accent); }

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lb { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; }
.lb[hidden] { display: none; }

.lb__backdrop {
  position: absolute; inset: 0; background: rgba(4,5,6,.93);
  backdrop-filter: blur(22px) saturate(.8);
  opacity: 0; transition: opacity var(--t-2) var(--ease);
}
.lb.is-open .lb__backdrop { opacity: 1; }

.lb__stage {
  position: relative; z-index: 2;
  width: min(100%, 1500px); max-height: 100svh;
  padding: clamp(52px, 7vh, 84px) clamp(52px, 7vw, 96px);
  display: grid; gap: clamp(18px, 2.4vh, 34px);
  grid-template-rows: minmax(0, 1fr) auto;
  opacity: 0; transform: scale(.985) translateY(14px);
  transition: opacity var(--t-2) var(--ease), transform var(--t-3) var(--ease);
}
.lb.is-open .lb__stage { opacity: 1; transform: none; }

.lb__frame {
  position: relative; justify-self: center; align-self: center;
  max-width: 100%; max-height: 100%;
  background: #000; overflow: hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,.6);
}
/* 播放器按素材真实比例撑开：横屏走宽度，竖屏走高度，两边都不裁不填黑。
   --avail-h 是 JS 实测的可用高度（视口 - 舞台内边距 - 间距 - 元信息高度）。
   曾经写成 100svh-260px 的魔法常数，结果视频底边压在元信息上。       */
.lb__video {
  display: block; background: #000;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
}
.lb__frame.is-horz .lb__video {
  width: min(100%, calc(var(--avail-h, 60vh) * var(--ar-num))); height: auto;
}
.lb__frame.is-vert .lb__video {
  height: var(--avail-h, 60vh); width: auto;
}

.lb__spinner {
  position: absolute; inset: 0; margin: auto; width: 30px; height: 30px;
  border: 1px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%;
  /* 这里原本漏了缓动，退化成浏览器默认 ease —— 全站唯一一处不用 --ease 的过渡 */
  animation: spin .9s linear infinite; opacity: 0; transition: opacity var(--t-1) var(--ease);
}
.lb__frame.is-loading .lb__spinner { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg) } }

.lb__error {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 30px; text-align: center; color: var(--fg-2); font-size: var(--fs-body-sm);
  background: var(--surface);
}
.lb__error[hidden] { display: none; }

/* --- 控件 --- */
.ctl {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 40px 18px 14px;
  background: linear-gradient(to top, rgba(4,5,6,.9), transparent);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--t-2) var(--ease), transform var(--t-2) var(--ease);
}
.lb__frame:hover .ctl, .lb__frame.is-paused .ctl, .ctl:focus-within { opacity: 1; transform: none; }

.ctl__scrub {
  position: relative; height: 3px; background: rgba(242,240,236,.16);
  cursor: pointer; margin-bottom: 14px;
}
.ctl__scrub::before { content: ''; position: absolute; inset: -9px 0; }
.ctl__buffer, .ctl__played {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  pointer-events: none;
}
.ctl__buffer { background: rgba(242,240,236,.22); }
.ctl__played { background: var(--accent); }
.ctl__knob {
  position: absolute; top: 50%; left: 0; width: 11px; height: 11px;
  border-radius: 50%; background: var(--accent);
  transform: translate(-50%,-50%) scale(0);
  transition: transform var(--t-1) var(--ease); pointer-events: none;
}
.ctl__scrub:hover .ctl__knob, .ctl__scrub:focus-visible .ctl__knob { transform: translate(-50%,-50%) scale(1); }

.ctl__row { display: flex; align-items: center; gap: 16px; }
.ctl__btn {
  display: grid; place-items: center; width: 30px; height: 30px;
  color: var(--fg-2); transition: color var(--t-1) var(--ease);
}
.ctl__btn:hover { color: var(--fg); }
.ctl__spacer { flex: 1; }
.ctl__time { color: var(--fg-2); }
.ctl__time i { color: var(--fg-3); font-style: normal; margin: 0 3px; }
.ctl__fmt { color: var(--fg-3); }

.ico-pause, .ico-muted { display: none; }
.lb__frame.is-playing .ico-play  { display: none; }
.lb__frame.is-playing .ico-pause { display: block; }
.lb__frame.is-muted   .ico-vol   { display: none; }
.lb__frame.is-muted   .ico-muted { display: block; }

/* --- 元信息 --- */
.lb__meta { display: grid; gap: 10px; max-width: 1500px; }
.lb__no { color: var(--accent); }
.lb__title {
  font-size: clamp(1.2rem, 2.6vw, 2.2rem); font-weight: 400; letter-spacing: -.015em;
}
.lb__facts {
  display: flex; flex-wrap: wrap; gap: 8px 30px; margin-top: 4px;
}
.lb__fact { display: flex; gap: 9px; align-items: baseline; }
.lb__fact dt {
  font-family: var(--mono); font-size: var(--fs-label-sm); letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-3);
}
.lb__fact dd { font-size: var(--fs-body-sm); color: var(--fg-2); }
.lb__hint { color: var(--fg-3); margin-top: 8px; font-size: var(--fs-label-sm); }
/* "← → 切换 · 空格 播放 · M 静音 · F 全屏 · Esc 关闭"——手机上没有键盘，
   这行对触摸用户是纯噪音，还占掉竖屏本来就紧张的空间。 */
@media (hover: none) {
  .lb__hint { display: none; }
}

/* --- 灯箱按钮 --- */
.lb__nav, .lb__close {
  position: absolute; z-index: 4; display: grid; place-items: center;
  width: 46px; height: 46px; border: 1px solid var(--line);
  border-radius: 50%; color: var(--fg-2);
  background: rgba(8,9,10,.5); backdrop-filter: blur(10px);
  transition: color var(--t-1) var(--ease), border-color var(--t-1) var(--ease), transform var(--t-2) var(--ease);
}
.lb__nav:hover, .lb__close:hover { color: var(--fg); border-color: var(--line-2); }
.lb__nav--prev { left: clamp(8px, 1.6vw, 22px); top: 50%; transform: translateY(-50%); }
.lb__nav--next { right: clamp(8px, 1.6vw, 22px); top: 50%; transform: translateY(-50%); }
.lb__nav--prev:hover { transform: translateY(-50%) translateX(-3px); }
.lb__nav--next:hover { transform: translateY(-50%) translateX(3px); }
.lb__close { right: clamp(8px, 1.6vw, 22px); top: clamp(12px, 2vh, 24px); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 900px) {
  /* 滚动指示器在左下角，首屏文案也在左下角 —— 给文案留出净空，避免压在一起 */
  .hero__scroll { display: flex; }
  .hero__inner  { padding-bottom: 58px; }
}

@media (max-width: 1100px) {
  .equip { grid-template-columns: minmax(0,1fr); }
  .drum__stage { --fw: 54%; perspective: 1300px; }
}

@media (max-width: 760px) {
  .nav__links { display: none; }
  .drum__stage { --fw: 68%; perspective: 900px; height: clamp(165px, 46vw, 250px); }
  .drum__meta { flex-direction: column; align-items: flex-start; gap: 20px; }
  .drum__side { width: 100%; }
  .drum__head { flex-wrap: wrap; }
  .hero { align-items: flex-end; }
  .hero__inner { padding-bottom: 74px; }
  .reelbtn { left: var(--pad); right: auto; bottom: var(--pad); padding: 11px 18px; }
  .stats { grid-template-columns: minmax(0,1fr); gap: 26px; }
  .stat { display: flex; align-items: baseline; gap: 16px; }
  .stat__k { margin-top: 0; }
  .lb__stage { padding: 62px 14px 18px; }
  .lb__nav { top: auto; bottom: 16px; transform: none; }
  .lb__nav--prev { left: 14px; } .lb__nav--next { right: 14px; }
  .lb__nav--prev:hover, .lb__nav--next:hover { transform: none; }
  .lb__frame.is-horz .lb__video,
  .lb__frame.is-vert .lb__video { width: 100%; height: auto; max-height: 56svh; }
  .foot__base { justify-content: center; text-align: center; }
}