/* ==========================================================================
   YEENOMADS — Portfolio Stylesheet
   Tokens / Reset / Layout / Components / Animations / Responsive
   ========================================================================== */

/* 本地字体（替代 Google Fonts CDN，国内访问稳定） */
@import url('./fonts.css');

/* ----- Tokens ------------------------------------------------------------- */
:root {
  --bg: #0a0a0a;
  --bg-2: #111111;
  --bg-3: #1a1a1a;
  --fg: #f4f1ea;
  --fg-dim: #a8a39a;
  --fg-mute: #5a564f;
  --line: rgba(244, 241, 234, 0.12);
  --line-strong: rgba(244, 241, 234, 0.32);
  --accent: #f1ff4d;          /* lime highlight */
  --accent-2: #ff6a3d;        /* orange */
  --accent-3: #c8b8ff;        /* lilac */
  --radius: 14px;
  --pad: clamp(20px, 4vw, 64px);
  --max: 1680px;

  --font-display: 'Anton', 'Arial Narrow', 'Impact', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', ui-monospace, Menlo, monospace;

  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
}

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

html, body { margin: 0; padding: 0; }
html {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: var(--bg);
  /* iOS Safari 上 `overflow-x: hidden` 会让内部 position:sticky 失效 / 闪烁
     （特别是 tunnel 段的 .reel__sticky）。
     用 `overflow-x: clip` 替代既能裁掉横向溢出，又不会创建新的滚动容器，
     从而保证 sticky 行为在移动端稳定。旧浏览器降级回 hidden。 */
  overflow-x: clip;
  cursor: none;
}
@supports not (overflow-x: clip) {
  body { overflow-x: hidden; }
}
@media (max-width: 1024px), (pointer: coarse) {
  body { cursor: auto; }
  .cursor { display: none !important; }
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, video { display: block; max-width: 100%; height: auto; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
::selection { background: var(--accent); color: var(--bg); }

/* ----- Background grain --------------------------------------------------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ----- Custom Cursor ------------------------------------------------------ */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
}
.cursor__ring {
  position: absolute;
  width: 38px;
  height: 38px;
  border: 1px solid var(--fg);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width .25s var(--ease), height .25s var(--ease), background .25s var(--ease);
}
.cursor__dot {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--fg);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cursor__label {
  position: absolute;
  transform: translate(14px, 14px);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--fg);
  background: var(--bg);
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.cursor.is-hover .cursor__ring { width: 64px; height: 64px; background: rgba(244,241,234,0.06); }
.cursor.is-text .cursor__label { opacity: 1; }
.cursor.is-video .cursor__ring { width: 110px; height: 110px; background: var(--accent); border-color: var(--accent); mix-blend-mode: normal; }
.cursor.is-video .cursor__dot { display: none; }

/* ----- Loader ------------------------------------------------------------- */
.loader {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--pad);
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.loader.is-hidden {
  opacity: 0;
  visibility: hidden;
}
.loader__inner {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 32px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}
.loader__counter {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 110px);
  line-height: 1;
  letter-spacing: -.02em;
}
.loader__bar {
  position: relative;
  height: 1px;
  background: var(--line);
  overflow: hidden;
}
.loader__bar span {
  position: absolute;
  inset: 0 100% 0 0;
  background: var(--fg);
  transition: inset .12s linear;
}
.loader__brand {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .2em;
}
.loader__brand-dot { color: var(--accent); }

/* ----- Nav ---------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px var(--pad);
  background: linear-gradient(to bottom, rgba(10,10,10,0.85), rgba(10,10,10,0));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .35s var(--ease), color .35s var(--ease);
}

/* 在白底 hero（hero--sandbox）可视时，IO 给 body 挂 .is-light-nav，
   nav 整体翻成黑字浅底；离开后又自动恢复 */
body.is-light-nav .nav {
  background: linear-gradient(to bottom, rgba(244, 237, 224, .85), rgba(244, 237, 224, 0));
  color: #0a0a0a;
}
body.is-light-nav .nav a,
body.is-light-nav .nav__brand,
body.is-light-nav .nav__brand-text { color: #0a0a0a; }
body.is-light-nav .nav__brand-reg { color: rgba(10, 10, 10, .55); }
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  font-family: var(--font-mono);
  font-weight: 700;
  text-decoration: none;
  color: var(--fg);
}

/* === Logo 海报卡片 — 黑色 *正方形* 主体 + 底部尖角 tail + 椰 / ! 等高并排 + Y33 钢印 === */
/* viewBox 200×224 — 主体 184×184 正方形（8,8 → 192,192）+ 底部 24 给三角 tail
   椰 / ! font-size 118 等高，撑满主体内部 */
.nav__logo {
  position: relative;
  display: inline-block;
  width: 150px;        /* 主体视觉感约 138×138 正方形 */
  height: 168px;       /* = 150 * 224/200 = 168 */
  flex: 0 0 auto;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.22));
  transition: transform .5s var(--ease-out);
}
.nav__logo-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
/* 黑色气泡 tail 默认 ↘ ，hover 时整块卡片 -8° 倾斜 + 弹一下 */
.nav__brand:hover .nav__logo { transform: rotate(-6deg) scale(1.04); }

/* Y33 钢印徽章 — 立体厚边，斜贴在 logo 右上 */
.nav__logo-tag {
  position: absolute;
  top: -10px;
  right: -20px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  color: #0a0a0a;
  background: var(--accent);
  border: 2.5px solid #0a0a0a;
  padding: 5px 11px;
  border-radius: 7px;
  line-height: 1;
  pointer-events: none;
  transform: rotate(8deg);
  transition: transform .35s var(--ease-out);
  box-shadow: 0 4px 0 #0a0a0a;
  z-index: 2;
}
.nav__brand:hover .nav__logo-tag { transform: rotate(-2deg) translateY(-2px) scale(1.06); }

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: .6; }
}

/* === 主名 YEE·NOMADS® === */
.nav__brand-text {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.nav__brand-name {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--fg);
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.nav__brand-dot {
  display: inline-block;
  margin: 0 6px;
  color: var(--fg);
  font-weight: 900;
}
.nav__brand-reg {
  font-family: var(--font-mono);
  color: var(--fg-dim);
  margin-left: 8px;
  font-size: 16px;
  align-self: flex-start;
  font-weight: 400;
}

/* light-nav (白底 hero 范围) 适配 — logo 黑底自身在白底已经很显眼，
   只需翻转 brand 文字 + Y33 钢印 反色（黑底黄字）*/
body.is-light-nav .nav__brand-name,
body.is-light-nav .nav__brand-dot { color: #0a0a0a; }
body.is-light-nav .nav__logo-tag {
  background: #0a0a0a;
  color: var(--accent);
  border-color: #0a0a0a;
  box-shadow: 0 3px 0 var(--accent);
}

@media (max-width: 1024px) {
  .nav__brand { gap: 18px; }
  .nav__logo { width: 120px; height: 134px; }
  .nav__brand-name { font-size: 22px; letter-spacing: .14em; }
  .nav__brand-reg { font-size: 13px; }
}
@media (max-width: 640px) {
  .nav__brand { gap: 12px; }
  .nav__logo { width: 84px; height: 94px; }
  .nav__logo-tag { font-size: 10px; padding: 3px 7px; right: -12px; top: -7px; }
  .nav__brand-name { font-size: 14px; letter-spacing: .12em; }
  .nav__brand-reg { font-size: 10px; }
  /* 在窄屏隐藏文字，只留 logo 卡（避免和 hamburger 挤撞） */
  .nav__brand-text { display: none; }
}

/* === Hamburger 方块按钮 === */
.nav__burger {
  position: relative;
  width: 60px;
  height: 60px;
  background: var(--accent);
  border: 2px solid #0a0a0a;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0;
  box-shadow: 0 4px 0 #0a0a0a;        /* 厚底立体感（呼应 Y33 钢印） */
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.nav__burger-line {
  display: block;
  width: 26px;
  height: 3px;
  background: #0a0a0a;
  border-radius: 2px;
  transition: transform .35s var(--ease), opacity .25s var(--ease), width .35s var(--ease);
  transform-origin: 50% 50%;
}
.nav__burger:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #0a0a0a;
}
.nav__burger:hover .nav__burger-line:first-child { width: 20px; transform: translateX(-3px); }
.nav__burger:hover .nav__burger-line:last-child  { width: 30px; transform: translateX( 3px); }
.nav__burger:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #0a0a0a;
}

/* light-nav 下保持黄底黑边 hamburger（已经在白底很醒目，无需翻转） */

/* === 菜单打开时锁住 body 滚动，且把 hamburger 的两条线变成 X === */
body.is-menu-open { overflow: hidden; }
body.is-menu-open .nav__burger { background: #0a0a0a; }
body.is-menu-open .nav__burger-line { background: var(--accent); width: 28px; }
body.is-menu-open .nav__burger-line:first-child { transform: translateY(5px) rotate(45deg); }
body.is-menu-open .nav__burger-line:last-child  { transform: translateY(-5px) rotate(-45deg); }

/* ----- Menu Overlay（全屏黄底，clip-path 圆形从右上扩散打开） ------------- */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background:
    radial-gradient(circle at 80% 0%, rgba(0,0,0,.06), transparent 60%),
    var(--accent);
  color: #0a0a0a;
  /* 起点：右上角 burger 中心，半径 0 */
  --menu-cx: calc(100% - 60px);
  --menu-cy: 60px;
  clip-path: circle(0% at var(--menu-cx) var(--menu-cy));
  transition: clip-path .85s cubic-bezier(.7,0,.2,1);
  pointer-events: none;
  /* 纵向兜底：内容偶尔超高时可滚动，而不是被 clip 掉底部 */
  overflow: hidden auto;
  display: flex;
  flex-direction: column;
}
body.is-menu-open .menu-overlay {
  clip-path: circle(160% at var(--menu-cx) var(--menu-cy));
  pointer-events: auto;
}
/* 颗粒纹路 + 黄底网格，质感更厚 */
.menu-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.06) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: .8;
  pointer-events: none;
}

/* X 关闭按钮 — 右上角 hamburger 同位（避免按钮跳位） */
.menu-overlay__close {
  position: absolute;
  top: 24px;
  right: var(--pad);
  width: 60px;
  height: 60px;
  border: 2px solid #0a0a0a;
  border-radius: 12px;
  background: #0a0a0a;
  cursor: pointer;
  z-index: 5;
  display: inline-grid;
  place-items: center;
  box-shadow: 0 4px 0 var(--accent);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.menu-overlay__close span {
  position: absolute;
  width: 28px; height: 3px;
  background: var(--accent);
  border-radius: 2px;
}
.menu-overlay__close span:first-child { transform: rotate(45deg); }
.menu-overlay__close span:last-child  { transform: rotate(-45deg); }
.menu-overlay__close:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--accent); }
.menu-overlay__close:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--accent); }

/* 内容区 — 整体右对齐，模仿 FolioHub 的菜单板式 */
.menu-overlay__inner {
  position: relative;
  z-index: 4;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  /* safe center：内容超高时回退为顶对齐，保证顶部不被裁切 */
  justify-content: safe center;
  /* 底部留出 ≥56px 净空，容纳固定在视口底角的角注（bottom:24px + 字高），避免 foot 压到角注上 */
  padding: clamp(64px, 9vh, 110px) var(--pad) clamp(56px, 6vh, 76px);
  gap: clamp(20px, 3.2vh, 48px);
  /* 菜单内每个元素从下方 stagger 浮入 */
  --stagger: 0;
}

.menu-overlay__eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(18px, 1.8vw, 26px);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(10,10,10,.55);
  align-self: flex-start;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease .12s, transform .5s ease .12s;
}
body.is-menu-open .menu-overlay__eyebrow { opacity: 1; transform: translateY(0); }

/* 菜单链接列表 — 右对齐、巨字 */
.menu-overlay__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(8px, 1.4vw, 18px);
}
.menu-overlay__link {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: clamp(16px, 2.4vw, 36px);
  font-family: var(--font-display);
  /* 同时受视口宽/高约束：矮屏时用 vh 收敛（10vh 保证四行巨字+页脚在常见笔记本高度也能整体放下） */
  font-size: clamp(44px, min(10vw, 10vh), 150px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.02em;
  color: #0a0a0a;
  text-decoration: none;
  text-transform: uppercase;
  padding: 6px 0;
  cursor: pointer;
  opacity: 0;
  transform: translateY(60px);
  transition: opacity .55s var(--ease), transform .65s var(--ease), color .35s var(--ease);
}
body.is-menu-open .menu-overlay__link { opacity: 1; transform: translateY(0); }
.menu-overlay__list li:nth-child(1) .menu-overlay__link { transition-delay: .18s, .18s, 0s; }
.menu-overlay__list li:nth-child(2) .menu-overlay__link { transition-delay: .26s, .26s, 0s; }
.menu-overlay__list li:nth-child(3) .menu-overlay__link { transition-delay: .34s, .34s, 0s; }
.menu-overlay__list li:nth-child(4) .menu-overlay__link { transition-delay: .42s, .42s, 0s; }

.menu-overlay__num {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: clamp(18px, 1.8vw, 26px);
  font-weight: 600;
  letter-spacing: .3em;
  color: rgba(10,10,10,.45);
  align-self: flex-start;
  margin-top: .4em;
}
/* 巨字导航的中文小标：跟在编号下方（避免与 Anton 英文巨字直接混排显得违和） */
.menu-overlay__num::after {
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
               'Source Han Sans SC', sans-serif;
  font-size: clamp(13px, 1.3vw, 18px);
  font-weight: 600;
  letter-spacing: .15em;
  color: rgba(10,10,10,.55);
  white-space: nowrap;
}
.menu-overlay__list li:nth-child(1) .menu-overlay__num::after { content: "首页"; }
.menu-overlay__list li:nth-child(2) .menu-overlay__num::after { content: "关于"; }
.menu-overlay__list li:nth-child(3) .menu-overlay__num::after { content: "信号"; }
.menu-overlay__list li:nth-child(4) .menu-overlay__num::after { content: "联系"; }
.menu-overlay__label {
  display: inline-block;
  transition: transform .45s var(--ease-out);
}
.menu-overlay__arrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 800;
  color: rgba(10,10,10,.5);
  transform: translate(-12px, .1em) rotate(0deg);
  opacity: 0;
  transition: transform .5s var(--ease-out), opacity .35s var(--ease), color .35s var(--ease);
}

.menu-overlay__link:hover { color: #0a0a0a; }
.menu-overlay__link:hover .menu-overlay__label {
  transform: translateX(-24px);
}
.menu-overlay__link:hover .menu-overlay__arrow {
  transform: translate(0, .1em) rotate(45deg);
  opacity: 1;
  color: #0a0a0a;
}
/* hover 下划线扫过整个 link */
.menu-overlay__link::after {
  content: '';
  position: absolute;
  left: 100%; right: 0;
  bottom: 8px;
  height: 4px;
  background: #0a0a0a;
  transition: left .45s var(--ease);
}
.menu-overlay__link:hover::after { left: 0; }

/* foot meta — 三栏小字（studio / contact / social） */
.menu-overlay__foot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
  border-top: 1px solid rgba(10,10,10,.18);
  padding-top: 28px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s ease .55s, transform .55s ease .55s;
}
body.is-menu-open .menu-overlay__foot { opacity: 1; transform: translateY(0); }
.menu-overlay__col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: .04em;
  color: rgba(10,10,10,.78);
}
.menu-overlay__col a {
  color: rgba(10,10,10,.78);
  text-decoration: none;
  transition: color .25s var(--ease), transform .25s var(--ease);
  width: max-content;
}
.menu-overlay__col a:hover { color: #0a0a0a; transform: translateX(4px); }
.menu-overlay__col-label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .25em;
  color: rgba(10,10,10,.5);
  margin-bottom: 4px;
}

/* 底部两侧角注 */
.menu-overlay__corner {
  position: absolute;
  bottom: 24px;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: .25em;
  color: rgba(10,10,10,.55);
  z-index: 4;
  pointer-events: none;
}
.menu-overlay__corner--bl { left: var(--pad); }
.menu-overlay__corner--br { right: var(--pad); }

/* 移动端：单列 foot、缩小 close 按钮 */
@media (max-width: 768px) {
  .menu-overlay { overflow-y: auto; }
  .menu-overlay__close { width: 50px; height: 50px; top: 22px; }
  .menu-overlay__close span { width: 22px; }
  .menu-overlay__inner {
    justify-content: flex-start;
    min-height: 100%;
    padding: 96px var(--pad) 48px;
    gap: 28px;
  }
  .menu-overlay__list { align-items: stretch; }
  .menu-overlay__link { font-size: clamp(40px, 12vw, 80px); justify-content: flex-end; }
  .menu-overlay__foot { grid-template-columns: 1fr; gap: 18px; padding-top: 18px; }
  .menu-overlay__corner { display: none; }
}

/* 矮屏：foot 内容会一直顶到底部，与固定在视口底角的角注重叠 —— 与移动端一致，直接隐藏角注 */
@media (max-height: 820px) {
  .menu-overlay__corner { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-overlay,
  .menu-overlay__link,
  .menu-overlay__foot,
  .menu-overlay__eyebrow { transition: none !important; }
}

/* ----- Sticker (rotating SCROLL) ------------------------------------------ */
.sticker {
  position: fixed;
  z-index: 90;
  width: 110px;
  height: 110px;
  pointer-events: none;
}
.sticker--scroll {
  right: 32px;
  bottom: 32px;
}
.sticker__rotor {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: rotate 14s linear infinite;
}
.sticker__rotor span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--fg);
  text-transform: uppercase;
  display: block;
  white-space: nowrap;
  /* rotate text along circle via SVG would be nicer, this is a fallback flat ring */
}
.sticker__rotor::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px dashed var(--line-strong);
  border-radius: 50%;
}
.sticker__rotor span {
  position: absolute;
  inset: auto 0 0 0;
  text-align: center;
}
.sticker__core {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 22px;
  color: var(--fg);
  animation: bounce 2s var(--ease) infinite;
}
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes bounce {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(4px); }
}

/* Curved text via SVG-ish workaround using conic effect — render fallback ring */
.sticker__rotor span {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 9px;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* ----- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 140px var(--pad) 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}
.hero--sandbox {
  /* 沙箱版：大字层占满，物理层在上面；整块改 *纯白底*，所有 token 翻转 */
  padding: 220px 0 0 0;
  height: 100vh;
  min-height: 720px;
  /* 局部色板：作用域内继承的所有 var(--fg) / var(--bg) / var(--line) 自动黑白互换 */
  --bg:          #ffffff;
  --bg-2:        #ffffff;
  --bg-3:        #fafafa;
  --fg:          #0a0a0a;
  --fg-dim:      #4a463f;
  --fg-mute:     #8a857a;
  --line:        rgba(10, 10, 10, .12);
  --line-strong: rgba(10, 10, 10, .32);
  background: #ffffff;
  color: var(--fg);
}
.hero--sandbox .hero__grid {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  opacity: .35;
}
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  z-index: 0;
  opacity: .5;
}
.hero__rows {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4vw, 18px);
  position: relative;
  z-index: 1;
}
.hero--sandbox .hero__rows {
  position: absolute;
  inset: 0;
  justify-content: center;
  align-items: stretch;
  padding: 0 clamp(6px, 0.6vw, 12px);
  z-index: 1;
}
/* 单行不滚动版（参考 FolioHub 但更狠） — 巨字 YEENOMADS! 居中、字母级混合处理 */
.hero--sandbox .hero__rows--single {
  align-items: center;
  justify-content: center;
}
.hero__big {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(0px, .15vw, 3px);
  font-family: var(--font-display);
  font-size: clamp(96px, 22vw, 560px);
  letter-spacing: -.015em;
  font-weight: 400;
  line-height: .82;
  letter-spacing: -.04em;
  color: #0a0a0a;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}
.hero__big > span {
  display: inline-block;
  position: relative;
  transition: transform .45s var(--ease-out), color .35s var(--ease);
  will-change: transform;
}
/* 字母级处理（HTML 上挂 class，按需要改造）  */
.hero__big-letter--outline {
  color: transparent;
  -webkit-text-stroke: clamp(2px, .35vw, 5px) #0a0a0a;
}
.hero__big-letter--accent {
  color: var(--accent);
  -webkit-text-stroke: clamp(2px, .35vw, 5px) #0a0a0a;     /* 与 outline 等粗 */
}
.hero__big-letter--bang {
  color: var(--accent);
  -webkit-text-stroke: clamp(2px, .35vw, 5px) #0a0a0a;
  margin-left: .04em;
  transform-origin: 50% 80%;
}
/* hover 时单字符抖一下（每个字母独立可玩） */
.hero__big > span:hover {
  transform: translateY(-8px) rotate(-3deg);
  color: var(--accent);
  -webkit-text-stroke-color: #0a0a0a;
}
.hero__big > .hero__big-letter--bang:hover {
  transform: scale(1.18) rotate(8deg);
}
.hero__row {
  display: flex;
  gap: clamp(20px, 3vw, 60px);
  font-family: var(--font-display);
  font-size: clamp(70px, 14vw, 220px);
  line-height: .85;
  letter-spacing: -.02em;
  white-space: nowrap;
  will-change: transform;
}
.hero__row--ltr { animation: scroll-l 28s linear infinite; }
.hero__row--rtl { animation: scroll-r 32s linear infinite; }
@keyframes scroll-l {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes scroll-r {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.hero__word {
  position: relative;
  transition: color .4s var(--ease), transform .5s var(--ease);
}
.hero__word--outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--fg);
}
.hero__word:hover {
  color: var(--accent);
  -webkit-text-stroke-color: var(--accent);
}

.hero__caption {
  margin-top: 80px;
  max-width: 620px;
  display: grid;
  gap: 16px;
  align-self: flex-end;
  padding-right: 100px;
  position: relative;
  z-index: 5;
}
.hero--sandbox .hero__caption {
  position: absolute;
  bottom: 80px;
  right: var(--pad);
  margin: 0;
  padding-right: 0;
  max-width: 380px;
  z-index: 5;
}
.hero--sandbox .hero__caption p {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 16px 20px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  color: var(--fg-dim);
  box-shadow: 0 8px 28px rgba(10, 10, 10, .08);
}
.hero--sandbox .hero__caption em,
.hero--sandbox .hero__caption strong { color: var(--fg); }
.hero__caption-line {
  height: 1px;
  background: linear-gradient(to right, var(--line-strong), transparent);
  width: 80px;
}
.hero__caption p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-dim);
}
.hero__caption em { font-style: italic; color: var(--fg); }
.hero__caption strong { color: var(--fg); font-weight: 600; }

.hero__scroll {
  position: absolute;
  left: var(--pad);
  bottom: 40px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .25em;
  color: var(--fg);
  z-index: 5;
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.hero__scroll i {
  display: inline-block;
  width: 60px; height: 1px;
  background: var(--line-strong);
  position: relative;
  overflow: hidden;
}
.hero__scroll i::after {
  content: '';
  position: absolute;
  inset: 0 60% 0 0;
  background: var(--fg);
  animation: scrollHint 2s var(--ease) infinite;
}
.hero--sandbox .hero__scroll {
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--line-strong);
  color: var(--fg);
  box-shadow: 0 6px 22px rgba(10, 10, 10, .08);
}
@keyframes scrollHint {
  0% { inset: 0 100% 0 0; }
  50% { inset: 0 0 0 0; }
  100% { inset: 0 0 0 100%; }
}

/* ----- Ticker / Brand Belt ----------------------------------------------- */
/*
 * 双行差速滚动：
 *   上行 (--main)：services 大字，LTR 48px/s，编号 + 实心/描边/高亮三种节奏
 *   下行 (--sub)： 副标语，RTL 22px/s，中英文混排小字（视觉上和上行错位形成"反流"）
 *
 * 两行通过细分隔线划开，左右两侧各加一个渐变蒙版，让边界淡入黑底而非硬切。
 */
.ticker {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(241,255,77,.04), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  overflow: hidden;
}
/* 左右渐变遮罩，让滚动文字"溶进"边界 */
.ticker::before,
.ticker::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 3;
  pointer-events: none;
}
.ticker::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(10,10,10,0) 100%);
}
.ticker::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg) 0%, rgba(10,10,10,0) 100%);
}

.ticker__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.ticker__track--main { padding: 22px 0; }

/* === 单行：品牌口号大字（实心 / 描边 / accent / 中文 4 种文字处理混排） === */
.ticker__group {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-right: 28px;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 56px);
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: 1;
}
.ticker__group span { color: var(--fg); }
.ticker__group .outline {
  color: transparent;
  -webkit-text-stroke: 1.4px var(--fg);
}
.ticker__group .accent { color: var(--accent); }
/* 中文字符切到 PingFang，关掉 uppercase（无效但语义干净） */
.ticker__group .cn {
  font-family: 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Source Han Sans SC',sans-serif;
  text-transform: none;
  letter-spacing: .04em;
  font-weight: 700;
}
.ticker__group .cn.outline-cn,
.ticker__group .outline-cn {
  color: transparent;
  -webkit-text-stroke: 1.4px var(--fg);
}
.ticker__group .cn.accent-cn,
.ticker__group .accent-cn {
  color: var(--accent);
}
.ticker__group i {
  color: var(--accent);
  font-style: normal;
  font-size: .7em;
  transform: translateY(-.04em);
}
/* 编号小字徽章 */
.ticker__num {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--fg-dim) !important;
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  align-self: center;
  line-height: 1;
}

@media (max-width: 640px) {
  .ticker::before, .ticker::after { width: 60px; }
  .ticker__num { font-size: 9px !important; padding: 3px 6px; }
}

/* ----- Section base ------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .25em;
  color: var(--fg-dim);
  text-transform: uppercase;
}
.eyebrow i {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
}

/* ----- Intro -------------------------------------------------------------- */
.intro {
  position: relative;
  padding: clamp(140px, 11vw, 200px) clamp(48px, 6vw, 96px) clamp(120px, 9vw, 180px);
  background: var(--bg);
}
/* intro 末段 fade-to-black 渐变带：从 var(--bg) #0a 渐变到下一段（reel-tunnel）的纯 #000
 * 区间拉长到 clamp(220px, 24vw, 360px)，全程在 #0a → #00 灰阶内单调暗化，
 * 末端正好是 #000，与 .reel--tunnel #000 / .reel__sticky #000 无缝衔接，
 * 不会再出现"亮-暗-亮"色带 */
.intro::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(220px, 24vw, 360px);
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0) 0%,
    rgba(8, 8, 8, .55) 45%,
    rgba(3, 3, 3, .92) 80%,
    #000 100%
  );
  z-index: 1;
}
.intro__head,
.intro__body { position: relative; z-index: 2; }
/* 宽屏收口：内容最多 1480px 居中，多余的横向空间自动变成"留白" */
.intro__head,
.intro__body {
  max-width: 1480px;
  margin-left: auto;
  margin-right: auto;
}
.intro__head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 80px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-dim);
}
.intro__year { letter-spacing: .15em; }
.intro__body {
  display: grid;
  grid-template-columns: 1.4fr .8fr;
  gap: clamp(48px, 4vw, 72px);
  align-items: end;
}
.intro__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5.5vw, 86px);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--fg-dim);
}
.intro__title em {
  font-style: normal;
  color: var(--fg);
  position: relative;
}
.intro__title-mark {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  padding: 0 14px;
  border-radius: 6px;
  transform: rotate(-1deg);
}
.intro__aside {
  display: grid;
  gap: 32px;
}
.intro__aside p {
  color: var(--fg);
  font-size: clamp(15px, 1.2vw, 20px);
  line-height: 1.75;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

/* intro 区放大版 eyebrow（中文 + 英文混排，比全站默认 11px 大很多） */
.intro__head .eyebrow,
.work__head .eyebrow,
.stats__head .eyebrow {
  font-size: clamp(18px, 1.8vw, 26px);
  gap: 14px;
}
.intro__head .eyebrow i,
.work__head .eyebrow i,
.stats__head .eyebrow i {
  width: .45em;
  height: .45em;
}

/* intro 「接入节点」按钮：字号 + svg 同时放大，但内边距缩小，整体更紧凑有力 */
.intro__aside .btn--giant {
  font-size: clamp(17px, 1.5vw, 22px);
  padding: 16px 28px;
  gap: 14px;
}
.intro__aside .btn--giant svg { width: 26px; height: 26px; }

/* CTA 按钮对齐 intro「接入节点」按钮的字号 / 内边距 */
.cta .btn--giant {
  font-size: clamp(17px, 1.5vw, 22px);
  padding: 16px 28px;
  gap: 14px;
}
.cta .btn--giant svg { width: 26px; height: 26px; }

/* ----- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .25em;
  font-weight: 700;
  padding: 18px 28px;
  border: 1px solid var(--fg);
  border-radius: 999px;
  width: max-content;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .35s var(--ease);
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform .45s var(--ease-out);
  z-index: -1;
}
.btn:hover { color: var(--bg); border-color: var(--accent); }
.btn:hover::before { transform: translateY(0); }
.btn svg { width: 16px; height: 16px; }
.btn--giant {
  font-size: 14px;
  padding: 26px 40px;
  border-width: 1.5px;
}
.btn--giant svg { width: 22px; height: 22px; }

/* ----- Reel / Featured Video Reveal -------------------------------------- */
/*
 * scroll-driven cinematic reveal:
 *   section: 220vh 高，sticky pin 100vh
 *   --reel-progress 由 JS 写入 .reel__sticky，0 → 1 驱动整段动画：
 *
 *   阶段（progress 区间）:
 *     0.00 - 0.18  frame 从 18% scale 居中放大；顶部 head 可见；caption/cta 隐藏
 *     0.18 - 0.55  frame 继续放大到 100%；border-radius 由 28px → 0；
 *                  overlay 暗角加深；REC/timestamp badge 可见
 *     0.55 - 0.80  全屏视频；caption（编号/标题/角色）+ rail 进度条淡入
 *     0.80 - 1.00  CTA "VIEW CASE STUDY" 推入；保持全屏一段时间再离开
 *
 * 所有元素都用 var(--reel-progress) 算的 opacity / transform 实现，
 * 没有 IntersectionObserver 之外的额外副作用，性能 OK。
 */
.reel {
  position: relative;
  height: 220vh;          /* sticky 100vh + 120vh 滚动余量驱动动画 */
  background: #000;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  --reel-progress: 0;
}

.reel__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reel__head {
  position: absolute;
  top: 32px;
  left: var(--pad);
  right: var(--pad);
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-dim);
  /* 0 → 0.18 渐隐 */
  opacity: clamp(0, calc(1 - var(--reel-progress, 0) / 0.18), 1);
  transform: translateY(calc(var(--reel-progress, 0) * -16px));
  transition: opacity .05s linear, transform .05s linear;
}
.reel__meta { letter-spacing: .25em; color: var(--accent); }

/* Frame = 视频容器，scroll 驱动 scale + border-radius */
.reel__frame {
  position: relative;
  width: clamp(360px, 86vw, 1280px);
  aspect-ratio: 16 / 9;
  /* 起点 0.18，终点 1.0 — 用 CSS clamp 把 [0,1] 映射到 [0.18, 1] */
  --frame-scale: clamp(0.18, calc(0.18 + var(--reel-progress, 0) * 0.82 / 0.55), 1);
  --frame-radius: clamp(0px, calc(28px - var(--reel-progress, 0) * 28px / 0.55), 28px);
  transform: scale(var(--frame-scale));
  transform-origin: 50% 50%;
  border-radius: var(--frame-radius);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 80px 200px -40px rgba(0,0,0,.85),
    0 30px 60px -20px rgba(241,255,77,.06);
  will-change: transform, border-radius;
  transition: transform .05s linear, border-radius .05s linear;
}

.reel__media {
  position: absolute;
  inset: 0;
}
.reel__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #050505;
  filter: saturate(0.95) contrast(1.05);
}
.reel__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%),
    radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 100%);
  opacity: clamp(.35, calc(.35 + var(--reel-progress, 0) * 0.45), .8);
}
.reel__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 4px 4px, 7px 7px;
  background-position: 0 0, 2px 3px;
  mix-blend-mode: overlay;
  opacity: 0.6;
}

/* Caption 阶段（0.55 → 0.80 淡入） */
.reel__caption {
  position: absolute;
  left: clamp(16px, 3vw, 48px);
  bottom: clamp(16px, 3vw, 40px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
  --cap-t: clamp(0, calc((var(--reel-progress, 0) - 0.55) / 0.25), 1);
  opacity: var(--cap-t);
  transform: translateY(calc((1 - var(--cap-t)) * 28px));
  transition: opacity .05s linear, transform .05s linear;
}
.reel__no {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .35em;
  color: var(--accent);
  text-transform: uppercase;
}
.reel__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.4vw, 88px);
  font-weight: 400;
  color: #fff;
  line-height: .92;
  letter-spacing: -.02em;
  margin: 0;
}
.reel__title em {
  font-style: italic;
  color: rgba(255,255,255,.55);
  font-weight: 300;
}
.reel__role {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .2em;
  color: rgba(255,255,255,.7);
  margin: 0;
  text-transform: uppercase;
}

/* CTA 按钮（0.80 → 1.0 推入） */
.reel__cta {
  position: absolute;
  right: clamp(16px, 3vw, 48px);
  bottom: clamp(16px, 3vw, 40px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px 14px 28px;
  background: var(--accent);
  color: #000;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .25em;
  text-decoration: none;
  border-radius: 999px;
  cursor: pointer;
  text-transform: uppercase;
  --cta-t: clamp(0, calc((var(--reel-progress, 0) - 0.78) / 0.22), 1);
  opacity: var(--cta-t);
  transform: translateX(calc((1 - var(--cta-t)) * 36px));
  transition: opacity .05s linear, transform .25s var(--ease), background .25s var(--ease);
}
.reel__cta:hover { background: #fff; }
.reel__cta .reel__arrow {
  display: inline-block;
  transition: transform .3s var(--ease);
}
.reel__cta:hover .reel__arrow { transform: translateX(4px); }

/* REC / 时间戳 角标（0.18 → 0.45 淡入） */
.reel__badge {
  position: absolute;
  z-index: 4;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .25em;
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(6px);
  color: #fff;
  --badge-t: clamp(0, calc((var(--reel-progress, 0) - 0.18) / 0.27), 1);
  opacity: var(--badge-t);
}
.reel__badge--tl {
  top: clamp(12px, 2vw, 24px);
  left: clamp(12px, 2vw, 24px);
  color: #ff5252;
  border-color: rgba(255,82,82,.4);
}
.reel__badge--tl::first-letter { color: #ff5252; }
.reel__badge--tr {
  top: clamp(12px, 2vw, 24px);
  right: clamp(12px, 2vw, 24px);
}

/* 右侧细长进度条（与 frame 同期淡入；填充 = 整体 progress） */
.reel__rail {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 8;
  width: 2px;
  height: clamp(120px, 22vh, 220px);
  background: rgba(255,255,255,.1);
  border-radius: 2px;
  overflow: hidden;
  opacity: clamp(0, calc(var(--reel-progress, 0) / 0.18), 1);
}
.reel__rail-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--reel-progress, 0) * 100%);
  background: linear-gradient(to bottom, var(--accent), rgba(241,255,77,.4));
  border-radius: 2px;
}

/* 底部信息角标（与 head 同步渐隐：进度高时角标不再喧宾夺主） */
.reel__corner {
  position: absolute;
  bottom: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .25em;
  color: #fff;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(10,10,10,.55);
  backdrop-filter: blur(6px);
  z-index: 6;
  opacity: clamp(0, calc(1 - var(--reel-progress, 0) / 0.55), 1);
  transition: opacity .05s linear;
}
.reel__corner--bl { left: var(--pad); color: var(--fg-dim); }
.reel__corner--br { right: var(--pad); color: var(--accent); border-color: var(--accent); }

@media (max-width: 768px) {
  .reel { height: 180vh; }
  .reel__frame { width: 92vw; }
  .reel__cta { display: none; }
  .reel__rail { height: 120px; right: 12px; }
  .reel__title { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .reel__frame,
  .reel__caption,
  .reel__cta,
  .reel__head,
  .reel__corner { transition: none; }
}

/* ----- Reel · Services Marquee Wall ----------------------------------------
 * 取代上面视频帧版本的"02 Featured Reel"内容，灵感来自
 * foliohub.framer.website/ 的 Services 区块：
 *   多行大写关键词水平自动滚动，实心 / 描边 / accent 三种节奏交替，
 *   行间用小圆点点缀；奇偶行水平方向相反，画面更有动势。
 *
 * 视觉要点：
 *   - 字体：Playfair Display Black italic（editorial 杂志感斜体 serif）
 *     与全站 Anton / Inter / Space Mono 形成节奏对比，强化 hero 段
 *   - 颜色：var(--accent)（lime） + 描边白 + 实心白
 *   - marquee：CSS 关键帧 + 复制副本（translateX 0 → -50% 无缝循环）
 *
 * 与外层 .reel__sticky 的滚动驱动联动：
 *   .reel section 由 JS 写入 --reel-progress (0→1)，
 *   stack 在进入视口的前 0.35 段做 fade + scale 揭示，避免硬切上屏。
 * ------------------------------------------------------------------------- */
.reel__services-stack {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: clamp(4px, 0.6vw, 12px);
  overflow: hidden;
  padding: clamp(80px, 12vh, 160px) 0;
  --reveal-t: clamp(0, calc(var(--reel-progress, 0) / 0.35), 1);
  opacity: var(--reveal-t);
  transform: scale(calc(0.94 + 0.06 * var(--reveal-t)));
  transform-origin: 50% 50%;
  transition: opacity .05s linear, transform .05s linear;
}

.reel__services-row {
  position: relative;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
}

/* inline-flex + 镜像副本：translateX 0 → -50% 时前半段刚好滚出，
   后半段无缝衔接，得到 perpetual marquee */
.reel__services-track {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  padding-right: clamp(40px, 6vw, 96px);
  white-space: nowrap;
  will-change: transform;
  animation: reel-marquee-left var(--marquee-duration, 32s) linear infinite;
}

.reel__services-row.reverse .reel__services-track {
  animation-name: reel-marquee-right;
}

@keyframes reel-marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes reel-marquee-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.reel__services-text {
  font-family: 'Playfair Display', 'Tiempos Headline',
               'Source Serif Pro', 'Times New Roman', Georgia, serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(56px, 11vw, 168px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #fff;
  display: inline-block;
  user-select: none;
}

.reel__services-text.outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.85);
}

.reel__services-text.accent {
  color: var(--accent);
}

.reel__services-dot {
  display: inline-block;
  width: clamp(10px, 1.2vw, 18px);
  height: clamp(10px, 1.2vw, 18px);
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
  flex-shrink: 0;
}
.reel__services-row.reverse .reel__services-dot {
  background: rgba(255, 255, 255, 0.65);
}

/* 文字墙专属角标（不依赖 --reel-progress，常显），
   样式与 .reel__corner 视觉接近但不会随视频版的进度渐隐 */
.reel__services-corner {
  position: absolute;
  bottom: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .25em;
  color: #fff;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(10, 10, 10, .55);
  backdrop-filter: blur(6px);
  z-index: 6;
  --reveal-t: clamp(0, calc((var(--reel-progress, 0) - 0.1) / 0.25), 1);
  opacity: var(--reveal-t);
}
.reel__services-corner--bl {
  left: var(--pad);
  color: var(--fg-dim);
}
.reel__services-corner--br {
  right: var(--pad);
  color: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 768px) {
  .reel__services-stack {
    padding: 60px 0;
    gap: 4px;
  }
  .reel__services-text {
    font-size: clamp(40px, 14vw, 96px);
  }
  .reel__services-track {
    gap: 32px;
    padding-right: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reel__services-track { animation-duration: 80s; }
  .reel__services-stack { transition: none; }
}

/* ----- Reel · Tunnel (Y33 Network) ------------------------------------------
 * 把 yeenomads/yee-tunnel-production.html 的整套体验搬进 02 reel section：
 *
 *   阶段 1：3D 旋转隧道（24 条品牌文案绕 X 轴排成圆筒）
 *           - 视角从主视图 rotateY(0°) 缓慢旋转到左视图 rotateY(90°)
 *           - 相机沿 Z 推进 0 → 1200px 穿过隧道末端
 *           - 桶身绕局部 X 轴自转 -360°
 *
 *   阶段 2：PLAY REEL 容器从 sticky 容器底部向上滑入（200vh slideRange + smoothstep）
 *
 *   阶段 3：services 6 行文字墙在 PLAY REEL 完全粘住后揭示（fade + scale）
 *
 * 与原版的差异：
 *   - 原版用 position: fixed + window.scrollY 全屏占用
 *   - 这里把 .stage 和 .playreel 改为 position: absolute, inset: 0，
 *     相对 .reel__sticky（pin 100vh）定位 → 视觉等价但与页面其他 section 共存
 *   - JS 的 progress 改为 section-relative（基于 [data-reel-tunnel] 的 bounding rect）
 *   - 不复制原版的 logo-tag / corner-btns / scroll-hint（那些在 index.html 自有 nav）
 * ------------------------------------------------------------------------- */
.reel--tunnel {
  position: relative;
  height: 1200vh; /* 750vh 隧道 + 450vh playreel，与原版完全一致 */
  background: #000;
  /* 与 intro 段无可见分割线，去掉 .reel 默认的上下 border */
  border-top: none;
  border-bottom: none;
}

.reel--tunnel .reel__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  /* 移动浏览器（iOS Safari / Chrome Mobile）地址栏会动态影响 100vh 计算，
     用 100dvh（dynamic viewport height）替代后 sticky 容器始终等于可视高度，
     不会出现"动画区域被工具栏遮住一截"或 sticky 提前解除的怪象。
     旧浏览器（不支持 dvh）继续走上面的 100vh 兜底。 */
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  background: #000;
  /* === 合成层提示（兜底）===
   * 注意：不能加在 .reel-tunnel__stage 上 —— 它是 perspective 宿主，
   * 一旦在 perspective 元素上挂任何 transform（含 translateZ(0)），
   * iOS WebKit 会把后代 3D 子树拍平，桶就会塌成 2D 斜面（截图里就是这个症状）。
   * 挂在 .reel__sticky 上是安全的：sticky 在 perspective 上下文之外，
   * 既能让浏览器把整段 02 reel 提升为独立合成层、缓解某些机型 sticky 内 3D
   * 偶发不渲染，又不会干扰 stage 下的 3D 渲染管线。 */
  will-change: transform;
  transform: translateZ(0);
}

/* === intro → reel-tunnel 接缝：双方都是 #000，不再加 sticky 顶部羽化层 ===
 * 上一版用 rgba(10,10,10,.6) 渐变叠在 sticky 的 #000 上，会形成 #060606 的"亮带"，
 * 反而比 intro::after 渐变到的纯 #000 更亮一点，肉眼可见一条横条。
 * 现在两边都是纯 #000，靠 intro::after 自己拉长做 fade-to-black 即可。 */

/* === 隧道舞台：占满 sticky 容器 ===
 * opacity 由 JS 写入：
 *   progress 0 → 0.06   stage 从 0 渐入 1（与 intro 衔接处不再硬切）
 *   progress 0.06 → 0.5 stage 保持 1
 *   progress 0.5 → ...  stage 渐出（让位给 PLAY REEL 容器）
 * 不再使用 .is-faded 类切换（统一交给 JS 算 opacity） */
.reel-tunnel__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* perspective 可由媒体查询覆写（移动端缩小到 420px，让字幕不至于太远过小） */
  perspective: var(--tunnel-perspective, 600px);
  perspective-origin: 50% 50%;
  background: #000;
  z-index: 2;
  opacity: 0;
  will-change: opacity;
}

/* 相机层：translateZ 推进 */
.reel-tunnel__camera {
  transform-style: preserve-3d;
  transform: translateZ(var(--cam-z, 0px));
  will-change: transform;
}

/* 视角层：rotateY 主视图 → 左视图 */
.reel-tunnel__view-rig {
  transform-style: preserve-3d;
  transform: rotateY(var(--view-roty, 0deg));
  will-change: transform;
}

/* 桶自转层：在 view-rig 局部坐标系里，桶轴始终是 X 轴
   主视图（rotY=0）下：自转 = 圆筒上的字像传送带从上滑到下
   左视图（rotY=90°）下：自转 = 圆环像旋转的车轮 */
.reel-tunnel__self-spin {
  transform-style: preserve-3d;
  transform: rotateX(var(--self-spin, 0deg));
  will-change: transform;
}

.reel-tunnel__ring {
  position: relative;
  transform-style: preserve-3d;
  width: 0;
  height: 0;
}

/* 24 条 wrapper 用 --i 在 0..23 上分布，--angle-step=15° */
.reel-tunnel__wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(var(--i) * var(--angle-step, 15deg)))
    translateY(calc(var(--radius, 200) * -1px))
    rotateX(-90deg);
}

.reel-tunnel__text {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  text-transform: uppercase;
  font-weight: 900;
  font-size: clamp(36px, 4.2vw, 64px);
  letter-spacing: -0.02em;
  line-height: 0.85;
  color: #fff;
  font-family: var(--font-display);
  font-family: 'Inter', var(--font-display);
}

.reel-tunnel__text--front {
  color: #fff;
  backface-visibility: hidden;
}

.reel-tunnel__text--back {
  color: rgba(255, 255, 255, 0.12);
  transform: translate(-50%, -50%) rotateY(180deg);
  backface-visibility: hidden;
}

/* === 02 reel 视觉层叠（z-index 由低到高）===
 *   1. .reel-tunnel__playreel-stage    z:1   视频舞台（最底背景层，隧道阶段被盖在 stage 之下不可见）
 *   2. .reel-tunnel__stage             z:2   3D 隧道场景（24 条字旋转 / 相机推进 / 视角切换）
 *   3. .reel-tunnel__curtain-stage     z:10  全屏 curtain 容器（含 eyebrow + 两半标题 + 两片黑幕）
 *      └── .reel-tunnel__playreel-curtain  z:11（curtain stage 内）
 *      └── .reel-tunnel__playreel-eyebrow  z:12（永远在最上方，curtain 拉开后才淡出）
 *
 * 核心剧情：
 *   阶段 1（progress 0~0.5）：隧道场景（stage z:2 盖住底层 video z:1）
 *   阶段 2（progress 0.42~0.55）：stage 隧道淡出 + curtain stage 浮入（NODE FOOTAGE 闭合幕）
 *   阶段 3（progress 0.55~0.65）：playreel-stage（video）opacity 浮入（被 curtain z:10 盖住不可见）
 *   阶段 4（progress 0.55~0.72）：curtain 闭合 hold，蓄势
 *   阶段 5（progress 0.72~0.92）：curtain 一分为二拉开（NODE/FOOTAGE 跟着幕走），露出 video + PLAY 按钮
 *   阶段 6（progress 0.92~1.0）：视频全开 hold */

/* === 视频舞台：最底层背景层 ===
 * z:1 在 stage z:2 之下 → 隧道阶段完全被 stage 盖住，看不到 video poster；
 * 默认 opacity:0，由 JS 在 curtain 完全闭合后（progress 0.55~0.65）才浮入，
 * 避免 curtain 半透浮入阶段透出 video poster 颜色。 */
.reel-tunnel__playreel-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #050505;
  isolation: isolate;
  z-index: 1;
  opacity: 0;
  will-change: opacity;
}

.reel-tunnel__playreel-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95) contrast(1.05);
}

.reel-tunnel__playreel-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%),
    radial-gradient(ellipse at 50% 0%,   rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 100%);
  z-index: 3;
}

.reel-tunnel__playreel-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 4px 4px, 7px 7px;
  background-position: 0 0, 2px 3px;
  mix-blend-mode: overlay;
  opacity: 0.55;
  z-index: 4;
}

/* === Curtain Stage：全屏 curtain 容器（占满 sticky 100vw × 100vh） ===
 * 包含：eyebrow（屏幕中央上方）+ 左/右两片黑幕（含两半标题文字）
 * 由 JS 控制 opacity（progress 0.42~0.55 浮入），整体作为开幕舞台 */
.reel-tunnel__curtain-stage {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}

/* === 独立文字 overlay（绝对定位 + 50vh 锚点架构）===
 * z:12 高于 curtain z:11。
 *
 * 几何前提：curtain 内的 NODE LIVE 通过 .reel-tunnel__playreel-curtain { align-items: center; }
 * 使 line-box 在 100vh 内 vertical-center，所以 NODE LIVE 视觉中心 = 50vh，
 * line-box 半高 ≈ headline 字号 × line-height(0.85) / 2 ≈ 6vw（clamp 31-85px）。
 *
 * eyebrow / meta 直接相对 50vh 锚定位置，公式：
 *   eyebrow.bottom = calc(50% + 半headline + gap-eyebrow)   ← 从屏幕中心向上偏
 *   meta.top       = calc(50% + 半headline + gap-cn)        ← 从屏幕中心向下偏
 *
 * 这样 eyebrow ↔ NODE LIVE 与 cn ↔ NODE LIVE 距离严格由两个 gap 变量决定，
 * 不会因 column 上下内容不对称导致几何中心漂移。 */
.reel-tunnel__curtain-overlay {
  /* === 可调间距变量 ===
   * "上松下紧" 不对称：eyebrow 跟 NODE LIVE 拉开呼吸感，cn / sub 副标群组紧贴大字下方 */
  --half-headline: clamp(31px, 6vw, 85px);   /* NODE LIVE line-box 半高（= 14vw × 0.85 / 2） */
  --gap-eyebrow:   clamp(48px, 7vh, 100px);  /* eyebrow ↔ NODE LIVE 距离（松，再加大 ~25%） */
  --gap-cn:        clamp(20px, 3vh, 36px);   /* cn ↔ NODE LIVE 距离（紧） */

  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  text-align: center;
  will-change: opacity;
}

.reel-tunnel__playreel-eyebrow {
  position: absolute;
  bottom: calc(50% + var(--half-headline) + var(--gap-eyebrow));
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: clamp(18px, 1.8vw, 26px);
  letter-spacing: .25em;
  color: var(--accent);
  text-transform: uppercase;
  white-space: nowrap;
  will-change: opacity;
}

/* meta wrapper：cn + sub 两行紧凑组合，整体定位在 NODE LIVE 下方 */
.reel-tunnel__curtain-meta {
  position: absolute;
  top: calc(50% + var(--half-headline) + var(--gap-cn));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
  padding: 0 clamp(20px, 4vw, 64px);
}

/* === Curtain 左右两片黑幕（占满左右两半视口 50vw × 100vh） ===
 * 内部嵌入对应一半的标题文字（NODE / FOOTAGE 等）：文字与黑幕作为整体一起拉开
 * 初始 translateX(0) = 完全闭合
 * 开幕时左片 → translateX(-100%)、右片 → translateX(100%) → 文字与幕一起退出屏幕 */
.reel-tunnel__playreel-curtain {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: #050505;
  z-index: 11;
  display: flex;
  align-items: center;
  overflow: hidden;
  will-change: transform;
}
.reel-tunnel__playreel-curtain::after {
  content: '';
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom,
    rgba(241, 255, 77, 0.0) 0%,
    rgba(241, 255, 77, 0.6) 50%,
    rgba(241, 255, 77, 0.0) 100%);
  opacity: var(--seam-glow, 0);
  transition: opacity .2s ease;
  z-index: 1;
}
.reel-tunnel__playreel-curtain--left {
  left: 0;
  justify-content: flex-end;     /* 文字贴右边（屏幕中线一侧） */
}
.reel-tunnel__playreel-curtain--left::after {
  right: 0;                       /* 接缝亮线在右边缘（中线） */
}
.reel-tunnel__playreel-curtain--right {
  right: 0;
  justify-content: flex-start;   /* 文字贴左边（屏幕中线一侧） */
}
.reel-tunnel__playreel-curtain--right::after {
  left: 0;                        /* 接缝亮线在左边缘（中线） */
}

/* === Curtain 内文字容器：贴近屏幕中线，文字垂直居中 ===
 * 注意 NODE 4 字符 / FOOTAGE 7 字符不等长，所以 padding 与 align 都靠中线对齐
 * 让两半合在屏幕中央时视觉上是连续的 "NODE FOOTAGE" 字符串 */
.reel-tunnel__curtain-text {
  display: flex;
  flex-direction: column;
  padding: 0 clamp(20px, 3vw, 56px);
  max-width: 100%;
}
.reel-tunnel__curtain-text--left {
  align-items: flex-end;
  text-align: right;
}
.reel-tunnel__curtain-text--right {
  align-items: flex-start;
  text-align: left;
}
.reel-tunnel__curtain-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(72px, 14vw, 200px);    /* 比原 16vw 小一点：让 FOOTAGE 7 字符塞入 50vw 内 */
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--accent);
  text-transform: uppercase;
  margin: 0;
  white-space: nowrap;
}
/* 中文副标：meta wrapper 内首行，cn 整体位置由 meta.top 锚定（50vh + 半headline + --gap-cn） */
.reel-tunnel__curtain-cn {
  display: block;
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
               'Source Han Sans CN', sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 4.2vw, 64px);
  letter-spacing: 0.18em;
  color: #fff;
  white-space: nowrap;
  will-change: opacity;
}
/* 英文副标：meta wrapper 内紧贴 cn 下方（小间距，cn / sub 是关联副标群组） */
.reel-tunnel__curtain-sub {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: .25em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 100%;
  margin-top: clamp(14px, 2vh, 22px);     /* sub 紧贴 cn */
  will-change: opacity;
}

/* === 中央大圆 PLAY 按钮（视频占位锚点）===
 * 视觉：accent 圆 + 黑色 ▶，外加一圈"脉冲环"暗示可点击
 * 行为：curtain 完全开幕后由 JS 写入 opacity 1 浮入；点击 → 播放视频，按钮 fade out
 *      视频暂停 / 播放结束 / 加载失败 时，按钮自动 opacity 1 浮回（始终保留"占位"语义） */
.reel-tunnel__playreel-playbtn {
  position: absolute;
  top: 50%; left: 50%;
  z-index: 7;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.4vh, 20px);
  padding: 0;
  border: 0;
  background: transparent;
  color: #0a0a0a;
  cursor: pointer;
  pointer-events: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .35em;
  text-transform: uppercase;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.92);
  transition:
    opacity .35s var(--ease-out),
    transform .35s var(--ease-out);
}
.reel-tunnel__playreel-playbtn-core {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(72px, 7vw, 104px);
  height: clamp(72px, 7vw, 104px);
  border-radius: 50%;
  background: var(--accent);
  box-shadow:
    0 18px 60px -12px rgba(241, 255, 77, .55),
    0 6px 20px rgba(0, 0, 0, .65),
    inset 0 0 0 2px rgba(0, 0, 0, .08);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.reel-tunnel__playreel-playbtn-core svg {
  width: 38%;
  height: 38%;
  transform: translateX(2px); /* 三角形视觉补偿，让 ▶ 看起来在圆心 */
}
.reel-tunnel__playreel-playbtn-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(72px, 7vw, 104px);
  height: clamp(72px, 7vw, 104px);
  border-radius: 50%;
  border: 1px solid var(--accent);
  transform: translate(-50%, -50%);
  opacity: .4;
  pointer-events: none;
  animation: reel-tunnel-pulse 2.4s ease-in-out infinite;
}
.reel-tunnel__playreel-playbtn-label {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(6px);
  color: #fff;
  white-space: nowrap;
}
.reel-tunnel__playreel-playbtn:hover .reel-tunnel__playreel-playbtn-core {
  transform: scale(1.06);
  box-shadow:
    0 24px 80px -10px rgba(241, 255, 77, .7),
    0 10px 28px rgba(0, 0, 0, .75),
    inset 0 0 0 2px rgba(0, 0, 0, .12);
}
.reel-tunnel__playreel-playbtn.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.reel-tunnel__playreel-playbtn.is-hidden {
  opacity: 0 !important;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.86);
}
@keyframes reel-tunnel-pulse {
  0%   { transform: translate(-50%, -50%) scale(1);    opacity: .4; }
  60%  { transform: translate(-50%, -50%) scale(1.45); opacity: 0;  }
  100% { transform: translate(-50%, -50%) scale(1.45); opacity: 0;  }
}
@media (max-width: 768px) {
  .reel-tunnel__playreel-playbtn-label { font-size: 10px; letter-spacing: .25em; padding: 5px 11px; }
}

/* === 下一场直播预告：poster 背景层 + 中央预告卡片（替代缺失的 reel 视频）===
 * poster 是氛围底图（暗化处理，避免与 lime 卡片争亮度）；
 * .reel-tunnel__nextlive 卡片由 JS 在 curtain 拉开 55% 后写入 .is-visible 浮入。 */
.reel-tunnel__playreel-poster {
  position: absolute;
  inset: 0;
  background:
    /* 顶部一束 lime 微光，呼应品牌色 */
    radial-gradient(120% 80% at 50% -10%, rgba(241, 255, 77, .12) 0%, rgba(241, 255, 77, 0) 55%),
    /* 四角压暗的暗角，聚焦中心卡片 */
    radial-gradient(140% 120% at 50% 50%, rgba(5, 5, 5, 0) 32%, rgba(5, 5, 5, .55) 100%),
    /* 整体半透明黑幕，把椰林海滩压暗（调淡，整体更亮） */
    linear-gradient(180deg, rgba(5, 6, 4, .3) 0%, rgba(4, 5, 3, .44) 100%),
    /* 椰林海滩实拍底图 */
    url('../assets/reel-curtain-bg.jpg') center / cover no-repeat;
  filter: saturate(1.04) brightness(1.06);
}

.reel-tunnel__nextlive {
  position: absolute;
  top: 50%; left: 50%;
  z-index: 7;
  width: min(86vw, 560px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(10px, 1.6vh, 18px);
  padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 44px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  background: rgba(10, 10, 10, .42);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 90px -30px rgba(0, 0, 0, .8);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.94);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
  pointer-events: none;
}
.reel-tunnel__nextlive.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
.reel-tunnel__nextlive-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--accent);
}
.reel-tunnel__nextlive-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ff5252;
  animation: reel-nextlive-blink 1.6s ease-in-out infinite;
}
@keyframes reel-nextlive-blink {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(255, 82, 82, .5); }
  50%      { opacity: .35; box-shadow: 0 0 0 6px rgba(255, 82, 82, 0); }
}
.reel-tunnel__nextlive-title {
  margin: 0;
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
               'Source Han Sans CN', sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 4.6vw, 56px);
  letter-spacing: .06em;
  line-height: 1.05;
  color: #fff;
}
.reel-tunnel__nextlive-meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.05vw, 13px);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.reel-tunnel__nextlive-when {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: clamp(4px, 1vh, 10px);
}
.reel-tunnel__nextlive-date {
  font-family: var(--font-mono);
  font-size: clamp(15px, 1.7vw, 22px);
  letter-spacing: .08em;
  color: #fff;
}
.reel-tunnel__nextlive-date em {
  font-style: normal;
  font-size: .62em;
  letter-spacing: .2em;
  color: rgba(255, 255, 255, .5);
  margin-left: 4px;
}
.reel-tunnel__nextlive-count {
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.2vw, 15px);
  letter-spacing: .14em;
  color: var(--accent);
}
.reel-tunnel__nextlive-cta {
  margin-top: clamp(8px, 1.4vh, 16px);
  display: inline-block;
  padding: 11px 26px;
  border-radius: 999px;
  background: var(--accent);
  color: #0a0a0a;
  font-family: var(--font-mono);
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: .26em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 14px 40px -12px rgba(241, 255, 77, .55);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.reel-tunnel__nextlive-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 56px -12px rgba(241, 255, 77, .7);
}
@media (max-width: 768px) {
  .reel-tunnel__nextlive { width: 88vw; padding: 24px 20px; border-radius: 14px; }
  .reel-tunnel__nextlive-title { font-size: clamp(24px, 7vw, 36px); }
}

/* === REC / 时间戳角标（开幕后浮在视频上） === */
.reel-tunnel__playreel-badge {
  position: absolute;
  z-index: 6;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .25em;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(6px);
  color: #fff;
  text-transform: uppercase;
  /* opacity 由 JS 根据 curtain 开幕进度写入 */
  opacity: 0;
  transition: opacity .25s ease;
}
.reel-tunnel__playreel-badge--tl {
  top: clamp(10px, 1.5vw, 18px);
  left: clamp(10px, 1.5vw, 18px);
  color: #ff5252;
  border-color: rgba(255, 82, 82, .4);
}
.reel-tunnel__playreel-badge--tr {
  top: clamp(10px, 1.5vw, 18px);
  right: clamp(10px, 1.5vw, 18px);
}

/* reel--tunnel 模式下 .reel__head 已从 HTML 中移除：
 * 隧道段不再保留顶部铭牌，避免与 24 条隧道大字 / NODE FOOTAGE 标题争焦点。
 * （base 的 .reel__head 规则只对其他 .reel 类生效；这里 DOM 不存在，无需任何样式覆盖） */

@media (max-width: 768px) {
  /* === 移动端 tunnel 适配 ===
   * 关键修复：
   *   1. height 用 1000vh（保留滚动空间），不能太短否则动画一晃而过
   *   2. perspective 缩小到 420px，配合 JS 把 RADIUS 也缩到 ≈160px：
   *      直径 320px ≈ 移动端竖屏宽度的 85%，左视图下整个圆环完整落在屏幕里
   *   3. ⚠️ 不要在 .reel-tunnel__stage 上加 transform（包括 translateZ(0)）：
   *      它是 perspective 宿主，加 transform 会让 iOS WebKit 把后代 3D 拍平，
   *      桶会塌成 2D 斜面 — 合成层提示已挪到 .reel__sticky 上（见上面规则）
   *   4. 文字字号同步缩小，太大会在桶上看不清弧度 */
  .reel--tunnel { height: 1000vh; }
  .reel-tunnel__stage {
    --tunnel-perspective: 420px;
  }
  .reel-tunnel__text {
    font-size: clamp(22px, 5.4vw, 36px);
    letter-spacing: -0.01em;
  }
  /* curtain 内嵌的两半 headline：NODE / LIVE 都是 4 字符，移动端 12vw 字号在 50vw 内安全 */
  .reel-tunnel__curtain-headline { font-size: clamp(48px, 12vw, 110px); }
  /* 移动端覆写 overlay 间距变量：headline 字号缩到 12vw，半 line-box ≈ 12vw × 0.85 / 2 ≈ 5vw
     沿用桌面端"上松下紧"思路 */
  .reel-tunnel__curtain-overlay {
    --half-headline: clamp(20px, 5.1vw, 47px);    /* 移动端 NODE LIVE 半高 */
    --gap-eyebrow:   clamp(28px, 5vh, 60px);      /* 移动端 eyebrow 留呼吸（同步加大） */
    --gap-cn:        clamp(12px, 2vh, 22px);      /* 移动端 cn 紧贴 */
  }
  /* 独立文字层移动端字号 + 允许英文副标换行避免溢出 */
  .reel-tunnel__curtain-cn       {
    font-size: clamp(20px, 5vw, 32px);
  }
  .reel-tunnel__curtain-sub      {
    font-size: 10px;
    letter-spacing: .2em;
    white-space: normal;
    max-width: 92vw;
    line-height: 1.6;
    margin-top: clamp(10px, 1.5vh, 16px);
  }
  .reel-tunnel__playreel-eyebrow {
    font-size: clamp(11px, 3.2vw, 16px);
    letter-spacing: .12em;
    white-space: nowrap;
    max-width: none;
  }
  .reel-tunnel__curtain-text     { padding: 0 clamp(12px, 2vw, 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .reel-tunnel__camera,
  .reel-tunnel__view-rig,
  .reel-tunnel__self-spin,
  .reel-tunnel__curtain-stage,
  .reel-tunnel__playreel-curtain {
    transition: none;
  }
}

/* ----- Work --------------------------------------------------------------- */
.work {
  padding: 0 var(--pad) 140px;
  border-top: 1px solid var(--line);
  padding-top: 100px;
}
.work__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}
.work__see-all {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: .25em;
  color: var(--fg);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 4px;
  transition: border-color .3s var(--ease);
}
.work__see-all:hover { border-color: var(--accent); color: var(--accent); }

.work__list {
  border-top: 1px solid var(--line);
}
.work-item {
  position: relative;
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 58px 8px;
  border-bottom: 1px solid var(--line);
  transition: padding .4s var(--ease), background .4s var(--ease);
  overflow: hidden;
}
.work-item:hover { padding-left: 32px; padding-right: 32px; background: rgba(255,255,255,.02); }
.work-item__no {
  font-family: var(--font-mono);
  font-size: clamp(18px, 1.8vw, 26px);
  letter-spacing: .2em;
  color: var(--fg-dim);
}
.work-item__title {
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
               'Source Han Sans SC', sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 40px);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--fg);
  transition: transform .5s var(--ease), color .35s var(--ease);
}
.work-item:hover .work-item__title { transform: translateX(8px); color: var(--accent); }
.work-item__tag {
  position: relative;
  z-index: 5;
  font-family: var(--font-mono);
  font-size: clamp(18px, 1.8vw, 26px);
  color: var(--fg-dim);
  letter-spacing: .1em;
  text-align: right;
}

/* hover image preview：靠右侧横幅缩略图，避开标题文字（最右留出 tag 的空间） */
.work-item__media {
  position: absolute;
  top: 50%;
  right: 170px;
  width: 240px;
  height: 150px;
  border-radius: 10px;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-50%) scale(.6) rotate(-6deg);
  opacity: 0;
  transition: opacity .35s var(--ease), transform .55s var(--ease-out);
  z-index: 4;
}
.work-item__media img { width: 100%; height: 100%; object-fit: cover; }
.work-item:hover .work-item__media {
  opacity: 1;
  transform: translateY(-50%) scale(1) rotate(-3deg);
}

/* ----- Stats -------------------------------------------------------------- */
.stats {
  padding: 140px var(--pad);
  border-top: 1px solid var(--line);
  background:
    radial-gradient(circle at 20% 20%, rgba(241,255,77,.06), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(200,184,255,.05), transparent 40%);
}
.stats__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 60px;
  margin-bottom: 80px;
}
.stats__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 44px);
  line-height: 1.1;
  letter-spacing: -.01em;
  max-width: 760px;
}
.stats__nowrap { white-space: nowrap; }
.stats__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.stat {
  padding: 48px 30px;
  border-right: 1px solid var(--line);
  display: grid;
  gap: 26px;
  align-content: start;
}
.stat:last-child { border-right: 0; }
.stat__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.stat__cat {
  font-family: var(--font-mono);
  font-size: clamp(17px, 1.4vw, 20px);
  letter-spacing: .12em;
  color: var(--fg-dim);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.stat__cat i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(56px, 8.5vw, 132px);
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--fg);
}
.stat__label {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--fg-dim);
  letter-spacing: .06em;
  line-height: 1.5;
}

/* ----- Physics Sandbox ---------------------------------------------------- */
.physics {
  padding: 140px var(--pad) 100px;
  border-top: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.physics__head {
  display: grid;
  gap: 24px;
  margin-bottom: 56px;
  max-width: 920px;
}
.physics__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 96px);
  line-height: 1.02;
  letter-spacing: -.01em;
}
.physics__title em {
  font-style: normal;
  background: var(--accent);
  color: var(--bg);
  padding: 0 14px;
  border-radius: 6px;
  display: inline-block;
  transform: rotate(-1.5deg);
}
.physics__hint {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .25em;
  color: var(--fg-dim);
  text-transform: uppercase;
}

.physics__stage {
  position: relative;
  width: 100%;
  height: clamp(620px, 80vh, 880px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, var(--line) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, var(--line) 39px 40px),
    radial-gradient(ellipse at 50% 0%, rgba(241,255,77,0.05), transparent 60%),
    var(--bg-2);
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  /* 允许垂直方向页面滚动；横向手势预留给物理拖拽 */
  touch-action: pan-y;
}
.physics__stage:active { cursor: grabbing; }

/* hero 内嵌沙箱：透明铺满 hero，让大字从下面透出来 */
.physics__stage.hero__sandbox {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  z-index: 3;
}

/* shape base */
.phys {
  position: absolute;
  top: 0; left: 0;
  display: grid;
  place-items: center;
  pointer-events: none;     /* hit-detection handled by Matter mouse plugin */
  will-change: transform;
  transform: translate3d(-9999px, -9999px, 0);
  transition: filter .25s var(--ease);
}
.phys.is-grabbed { filter: drop-shadow(0 18px 40px rgba(0,0,0,.55)); z-index: 5; }
.phys.is-warm { animation: phys-pulse 3.4s var(--ease) infinite; }
@keyframes phys-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
}

/* color tokens */
.phys[data-color="lime"]   { --c: var(--accent);   --c-fg: var(--bg); }
.phys[data-color="orange"] { --c: var(--accent-2); --c-fg: var(--bg); }
.phys[data-color="lilac"]  { --c: var(--accent-3); --c-fg: var(--bg); }
.phys[data-color="white"]  { --c: var(--fg);       --c-fg: var(--bg); }
.phys[data-color="line"]   { --c: transparent;     --c-fg: var(--fg); }

/* shape variants — rendered as inline SVG via JS for crispness */
.phys svg {
  width: 100%; height: 100%;
  display: block;
  overflow: visible;
}

/* text shape */
.phys--text {
  font-family: var(--font-display);
  letter-spacing: -.02em;
  line-height: 1;
}
.phys--text > span {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  background: var(--c);
  color: var(--c-fg);
  border-radius: 50%;
  font-size: calc(var(--phys-size, 160px) * .7);
}
.phys[data-color="line"].phys--text > span {
  background: transparent;
  border: 2px solid var(--fg);
}

/* pill shape */
.phys--pill > span {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  background: var(--c);
  color: var(--c-fg);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .25em;
  font-weight: 700;
  text-transform: uppercase;
  border: 1.5px solid var(--c);
  white-space: nowrap;
  padding: 0 22px;
}
.phys[data-color="line"].phys--pill > span {
  background: transparent;
  color: var(--fg);
  border-color: var(--fg);
}

.physics__badge {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .25em;
  color: var(--fg);
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(10,10,10,.5);
  backdrop-filter: blur(4px);
  pointer-events: none;
  z-index: 6;
}
.physics__badge--tl { top: 14px; left: 14px; }
.physics__badge--tr { top: 14px; right: 14px; color: var(--accent); border-color: var(--accent); }
.physics__badge--bl { bottom: 14px; left: 14px; color: var(--fg-dim); }
.physics__badge--br {
  bottom: 14px; right: 14px;
  pointer-events: auto;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.physics__badge--br:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* 白底 hero 沙箱里：badge 也翻成浅玻璃 */
.hero--sandbox .physics__badge {
  background: rgba(255, 255, 255, .72);
  border-color: var(--line-strong);
  color: var(--fg-dim);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hero--sandbox .physics__badge--tr {
  color: #6a7900;
  border-color: rgba(106, 121, 0, .55);
}
.hero--sandbox .physics__badge--bl { color: var(--fg-dim); }
.hero--sandbox .physics__badge--br:hover {
  background: var(--accent);
  color: #0a0a0a;
  border-color: var(--accent);
}

@media (max-width: 640px) {
  .physics__stage { height: 60vh; }
  .physics__badge { font-size: 9px; }
}

/* ----- CTA ---------------------------------------------------------------- */
.cta {
  padding: 160px var(--pad);
  text-align: center;
  display: grid;
  place-items: center;
  gap: 60px;
  border-top: 1px solid var(--line);
}
.cta__title {
  font-family: var(--font-display);
  font-size: clamp(60px, 11vw, 200px);
  line-height: .9;
  letter-spacing: -.02em;
  text-transform: lowercase;
}
.cta__title span { color: var(--accent); }
.cta__title--cn span { white-space: nowrap; }
/* 中文 CTA 标题：换中文无衬线，放宽行高 + 底部留白，避免「？」等被裁切 */
.cta__title--cn {
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
               'Source Han Sans SC', sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 8vw, 120px);
  line-height: 1.14;
  letter-spacing: .02em;
  text-transform: none;
  padding-bottom: .12em;
}

/* ----- Footer marquee ----------------------------------------------------- */
.footer-marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 26px 0;
}
.footer-marquee__track {
  display: flex;
  width: max-content;
}
.footer-marquee__group {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 130px);
  line-height: 1;
  letter-spacing: -.01em;
}
.footer-marquee__group .outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--fg);
}
.footer-marquee__star { color: var(--accent); }

/* ----- Footer ------------------------------------------------------------- */
.footer {
  padding: 100px var(--pad) 40px;
  background: var(--bg);
}
.footer__top {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding-bottom: 80px;
  border-bottom: 1px solid var(--line);
}
.footer__col {
  display: grid;
  gap: 6px;
  align-content: start;
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: .04em;
}
.footer__label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .25em;
  color: var(--fg-dim);
  margin-bottom: 4px;
}
.footer__col a {
  display: inline-block;
  padding: 4px 0;
  position: relative;
}
.footer__col a:hover { color: var(--accent); }
.footer__social a, .footer__site a { font-family: var(--font-mono); font-size: 16px; letter-spacing: .1em; }

.footer__big {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 60px 0 40px;
  font-family: var(--font-display);
  font-size: clamp(60px, 18vw, 320px);
  line-height: .85;
  letter-spacing: -.04em;
}
.footer__big span {
  display: inline-block;
  transition: color .35s var(--ease), transform .5s var(--ease);
}
.footer__big span:hover { color: var(--accent); transform: translateY(-6px); }

.footer__bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  color: var(--fg-dim);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.footer__bottom > span:last-child { text-align: right; }
.footer__legal {
  text-align: center;
  color: var(--fg-dim);
}
.footer__legal a {
  color: var(--fg-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.footer__legal a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ----- Copy toast（复制微信号后的提示）----------------------------------- */
.copy-toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translate(-50%, 20px);
  z-index: 200;
  max-width: 86vw;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: #0a0a0a;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.copy-toast.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ----- Time badge --------------------------------------------------------- */
.time-badge {
  position: fixed;
  left: 32px;
  bottom: 32px;
  z-index: 80;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .25em;
  color: var(--fg-dim);
  border: 1px solid var(--line);
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(10,10,10,.6);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

/* ----- Reveal animations -------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

/* split text words */
[data-split] .split-word {
  display: inline-block;
  overflow: hidden;
}
[data-split] .split-word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform .9s var(--ease-out);
}
[data-split].is-in .split-word > span { transform: translateY(0); }
[data-split] .split-word > span { transition-delay: calc(var(--i, 0) * 35ms); }

/* ----- Sub pages ---------------------------------------------------------- */
.page-head {
  padding: 240px var(--pad) 80px;
  border-bottom: 1px solid var(--line);
}
.page-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: clamp(18px, 1.8vw, 26px);
  letter-spacing: .25em;
  color: var(--fg-dim);
  text-transform: uppercase;
}
.page-head__eyebrow i {
  width: .45em;
  height: .45em;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
}
.page-head__title {
  font-family: var(--font-display);
  font-size: clamp(80px, 16vw, 280px);
  line-height: .85;
  letter-spacing: -.02em;
  margin-top: 28px;
}
.page-head__title em { color: var(--accent); font-style: normal; }
/* 中文版页面大标题：换中文无衬线、放宽行高，避免 Anton 回退导致的字形问题 */
.page-head__title--cn {
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
               'Source Han Sans SC', sans-serif;
  font-weight: 900;
  font-size: clamp(56px, 11vw, 168px);
  line-height: 1.04;
  letter-spacing: .01em;
}
.page-head__sub {
  margin-top: 40px;
  max-width: 680px;
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.7;
  color: var(--fg-dim);
}

/* services list */
.services {
  padding: 100px var(--pad);
  display: grid;
  gap: 0;
}
.service {
  display: grid;
  grid-template-columns: 80px 1fr 2fr;
  gap: 40px;
  padding: 60px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.service:first-child { border-top: 1px solid var(--line); }
.service__no { font-family: var(--font-mono); color: var(--fg-dim); letter-spacing: .15em; }
.service__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.5vw, 64px);
  line-height: 1;
  letter-spacing: -.01em;
}
.service__desc { color: var(--fg-dim); font-size: 16px; line-height: 1.7; max-width: 640px; }

/* works grid */
.works-grid {
  padding: 80px var(--pad) 140px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.works-grid .card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-2);
  aspect-ratio: 4/3;
}
.works-grid .card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease-out), filter .6s var(--ease);
  filter: grayscale(.3) brightness(.85);
}
.works-grid .card:hover img { transform: scale(1.06); filter: grayscale(0) brightness(1); }
.works-grid .card__meta {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding: 28px;
  background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
}
.works-grid .card__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1;
}
.works-grid .card__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--fg-dim);
}
/* signals 卡片：中文标题用中文无衬线 + 半透明底（避免被图片干扰）、字号变小；tag 单行不换行 */
.page-signals .works-grid .card__meta { gap: 16px; }
.page-signals .works-grid .card__title {
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
               'Source Han Sans SC', sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 24px);
  line-height: 1.35;
  min-width: 0;
  background: rgba(10,10,10,.55);
  padding: 8px 14px;
  border-radius: 10px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.page-signals .works-grid .card__tag {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--fg);
  background: rgba(10,10,10,.55);
  padding: 8px 12px;
  border-radius: 10px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* contact */
.contact {
  padding: 100px var(--pad) 140px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}
.contact__form { display: grid; gap: 24px; }
.contact__field {
  display: grid;
  gap: 8px;
}
.contact__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .25em;
  color: var(--fg-dim);
  text-transform: uppercase;
}
.contact__input,
.contact__textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  padding: 14px 2px;
  color: var(--fg);
  font: inherit;
  font-size: 18px;
  outline: none;
  transition: border-color .3s var(--ease);
}
.contact__textarea { resize: vertical; min-height: 120px; }
.contact__input:focus,
.contact__textarea:focus { border-color: var(--accent); }

.contact__info {
  display: grid;
  gap: 24px;
  align-content: start;
  border-left: 1px solid var(--line);
  padding-left: 60px;
}
.contact__info h3 {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.5vw, 60px);
  line-height: 1.05;
  margin-bottom: 12px;
}
.contact__info a { display: block; color: var(--fg); padding: 6px 0; border-bottom: 1px dashed var(--line); }
.contact__info a:hover { color: var(--accent); }
/* 中文标题用中文无衬线，避免 Anton 回退 */
.page-contact .contact__info h3 {
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
               'Source Han Sans SC', sans-serif;
  font-weight: 800;
  letter-spacing: .01em;
}
/* 联系页：微信客服二维码占位（替代原表单） */
.contact__qr {
  display: grid;
  gap: 24px;
  align-content: start;
  justify-items: center;
  text-align: center;
}
.contact__qr-box {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  display: grid;
  place-content: center;
  gap: 10px;
  text-align: center;
}
.contact__qr-title {
  font-family: var(--font-mono);
  font-size: 20px;
  letter-spacing: .1em;
  color: var(--fg);
}
.contact__qr-note {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--fg-dim);
  text-transform: uppercase;
}
.contact__qr-cap {
  color: var(--fg-dim);
  font-size: 15px;
  line-height: 1.7;
}

/* ----- Article (signal 详情页) ------------------------------------------- */
.article {
  max-width: 900px;
  margin: 0 auto;
  padding: 240px var(--pad) 100px;
}
.article__back {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .15em;
  color: var(--fg-dim);
  text-transform: uppercase;
  margin-bottom: 48px;
}
.article__back:hover { color: var(--accent); }
.article__head {
  border-bottom: 1px solid var(--line);
  padding-bottom: 44px;
}
.article__title {
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
               'Source Han Sans SC', sans-serif;
  font-weight: 900;
  font-size: clamp(32px, 4.6vw, 60px);
  line-height: 1.2;
  letter-spacing: .01em;
  margin-top: 26px;
}
.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 30px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--fg-dim);
  text-transform: uppercase;
}
.article__hero { margin-top: 48px; }
.article__hero img,
.article__figure img {
  width: 100%;
  display: block;
  border-radius: var(--radius);
  filter: grayscale(.12) brightness(.96);
}
.article figcaption {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--fg-dim);
}
.article__body { margin-top: 56px; }
.article__lead {
  font-size: clamp(19px, 1.7vw, 26px);
  line-height: 1.6;
  color: var(--fg);
  margin-bottom: 8px;
}
.article__body h2 {
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
               'Source Han Sans SC', sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.35;
  letter-spacing: .01em;
  margin: 60px 0 22px;
}
.article__body h2::before {
  content: '';
  display: inline-block;
  width: .5em; height: .5em;
  margin-right: .55em;
  background: var(--accent);
  border-radius: 50%;
  vertical-align: middle;
}
.article__body p {
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.95;
  color: var(--fg-dim);
  margin-bottom: 24px;
}
.article__body p strong { color: var(--fg); font-weight: 700; }
.article__body ul {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.article__body li {
  position: relative;
  padding-left: 28px;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.7;
  color: var(--fg-dim);
}
.article__body li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--accent);
}
.article__figure { margin: 44px 0; }
.article__quote {
  margin: 44px 0;
  padding: 6px 0 6px 28px;
  border-left: 3px solid var(--accent);
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
               'Source Han Sans SC', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.5;
  color: var(--fg);
}
.article__body .article__note {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--fg-mute);
  line-height: 1.7;
}
.article__foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 72px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.article__foot a { color: var(--fg); }
.article__foot a:hover { color: var(--accent); }

/* 文末「相关信号」内链 */
.article__related {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--pad) 120px;
}
.article__related-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  font-family: var(--font-mono);
  font-size: clamp(18px, 1.8vw, 26px);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.article__related-label i {
  width: .45em; height: .45em;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
}
.article__related-list {
  display: grid;
  border-top: 1px solid var(--line);
}
.article__related-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.article__related-item:hover .article__related-title { color: var(--accent); }
.article__related-title {
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
               'Source Han Sans SC', sans-serif;
  font-weight: 700;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.4;
  color: var(--fg);
  transition: color .3s var(--ease);
}
.article__related-tag {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--fg-dim);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .article { padding-top: 160px; }
  .article__related-item { flex-direction: column; gap: 8px; }
}

/* ----- Responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
  .intro__body { grid-template-columns: 1fr; gap: 40px; }
  .stats__row { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: 0; }
  .footer__top { grid-template-columns: repeat(2, 1fr); }
  .work-item { grid-template-columns: 64px 1fr auto; }
  .work-item__media { display: none; }
  .works-grid { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; gap: 40px; }
  .contact__info { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 40px; }
  .stats__head { flex-direction: column; align-items: start; }
}
@media (max-width: 640px) {
  .sticker--scroll { right: 16px; bottom: 16px; transform: scale(.75); transform-origin: bottom right; }
  .time-badge { left: 16px; bottom: 16px; }
  .hero { padding: 120px 16px 100px; }
  .hero__caption { padding-right: 0; align-self: stretch; }
  .intro, .reel, .work, .stats, .cta, .footer { padding-left: 16px; padding-right: 16px; }
  /* reel--tunnel 必须用全屏宽度 sticky（视频/curtain/3D 隧道都是占满 100vw 的全屏场景），
     上面通用 .reel padding 会让 sticky 容器变窄 32px、curtain 出现两侧白边，必须复位 */
  .reel--tunnel { padding-left: 0; padding-right: 0; }
  .work-item { grid-template-columns: 40px 1fr; padding: 24px 4px; }
  .work-item__tag { display: none; }
  .work-item__media {
    display: block;
    position: static;
    inset: auto;
    grid-column: 1 / -1;
    width: 100%;
    height: auto;
    opacity: 1;
    transform: none;
    margin-top: 14px;
    border-radius: 10px;
    overflow: hidden;
    pointer-events: none;
  }
  .work-item__media img { height: auto; }
  .stats__title { font-size: clamp(19px, 5.2vw, 30px); line-height: 1.25; }
  .cta__title--cn { font-size: clamp(26px, 7.5vw, 40px); }
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 8px; }
  .footer__bottom > span:last-child { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
/* === FIX: 关掉 3D 隧道链上的合成层提升 === */
.reel--tunnel .reel__sticky { will-change: auto; transform: none; }
.reel-tunnel__camera,
.reel-tunnel__view-rig,
.reel-tunnel__self-spin { will-change: auto; }

/* === iOS 移动端 3D 卷起效果修复（仅手机端，桌面端零影响）===
 * 用户真机症状：隧道全程"字幕平面随着中轴转动，没有卷曲（万花筒）效果"。
 * 病根：.reel-tunnel__ring 是整条 3D 链上唯一一个：
 *   - width:0 / height:0 （0 尺寸）
 *   - transform-style: preserve-3d
 *   - 但没有自身 transform 属性
 * 这个组合在 iOS WebKit 下不稳定，preserve-3d 会被悄悄降级成 flat
 * → 24 条 .reel-tunnel__wrapper 的 rotateX(i × 10°) 不再把字摆成圆筒，
 *   而是全部塌进 ring 的 2D 平面 → 平面整体跟着 view-rig 的 rotateY 转。
 * 桌面 Chrome / Safari 实现更宽容，桌面端无此问题，故只在 ≤768px 修复。
 * 修复手段：给 ring 加最小 transform: translateZ(0)，强制创建 3D 渲染上下文，
 *   让 preserve-3d 在 iOS 上可靠生效。注意 — 不能挂在 .reel-tunnel__stage
 *   （perspective 宿主）上，否则 iOS 会反向把后代 3D 子树拍平。 */
/*@media (max-width: 768px) {
  .reel-tunnel__ring {
    transform: translateZ(0);
  }
}*/

.reel-tunnel__ring {
  transform: translateZ(0);
}