/* Hallmark · pre-emit critique: P5 H5 E5 S5 R4 V5
 * macrostructure: Scene Sequence（幕次连播·裁切窗扩张 + 粘性媒体）
 * nav: N9 edge-aligned + 仪表 HUD · footer: Ft5 statement
 * theme: studied-DNA (source: url https://zentry.com)
 * 实测其机制：Lenis 平滑滚动 · frame__mask 的 clip-path 动画 · 41 个 ScrollTrigger · 标题与卡片 matrix3d
 * 移植：鎏金 oklch(78% 0.115 78) 换其酸性黄绿 · 宣纸 oklch(94% 0.014 85) 换其浅雾紫 · 思源宋体 900 换其自造英文 display
 * tone: 技术 austere · audience: 机构与专业交易者 · use: 注册试用
 */

/* ═══ 基座 ═══ */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, dt, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.6;
}
.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: normal;
  line-height: 1.12;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
  min-width: 0;
}
.display .line { display: block; }
.accent, .line--accent { color: var(--color-accent); }

/* 逐字入场的字符壳（JS 生成） */
.ch { display: inline-block; will-change: transform, opacity; }

/* ═══ 仪表 HUD ═══ */
.hud { position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky); pointer-events: none; }
.hud__bar { height: 2px; background: oklch(100% 0 0 / 0.07); }
/* 用 scaleX 而非 width——动 width 会触发整页重排（2026-08-19 实测：1 FPS） */
.hud__fill {
  display: block; height: 100%; width: 100%;
  background: var(--color-accent);
  transform: scaleX(0); transform-origin: left center;
}
.hud__scene {
  position: absolute;
  right: clamp(1.25rem, 5vw, 3rem);
  bottom: var(--space-md);
  color: var(--color-on-ink-dim);
  mix-blend-mode: difference;
}

/* ═══ 边角铭牌导航 ═══ */
.edge {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-md) clamp(1.25rem, 5vw, 3rem);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out);
}
.edge.is-stuck { background: oklch(13% 0.005 265 / 0.78); backdrop-filter: blur(16px); border-bottom-color: oklch(100% 0 0 / 0.10); }
.edge.is-onpaper { color: var(--color-on-paper); }
.edge.is-onpaper.is-stuck { background: oklch(94% 0.014 85 / 0.84); border-bottom-color: oklch(22% 0.012 60 / 0.16); }

.edge__brand { display: flex; align-items: center; gap: var(--space-xs); }
.edge__name { font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg); letter-spacing: 0.14em; white-space: nowrap; }
.mark { width: 1.85rem; height: 1.85rem; flex: none; }
.mark__ring, .mark__flames path, .mark__core { fill: none; stroke: var(--color-accent); stroke-width: 6; }
.mark__core { stroke-width: 5; }
.mark__flames path { stroke-linecap: round; }

.edge__nav { display: flex; align-items: center; gap: clamp(0.75rem, 2.4vw, 2rem); }
.edge__nav a {
  font-family: var(--font-mono); font-size: var(--text-mono);
  letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  padding: var(--space-2xs) 0; border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.edge__nav a:hover { border-bottom-color: var(--color-accent); }
.edge__cta {
  color: var(--color-accent); border: var(--rule-accent) !important;
  padding: var(--space-2xs) var(--space-sm) !important; border-radius: var(--radius-xs);
}
.edge__cta:hover { background: oklch(78% 0.115 78 / 0.14); }
.edge.is-onpaper .edge__cta { color: var(--color-accent-deep); border-color: var(--color-accent-deep) !important; }

/* ═══ 幕 00 · 序：满幅（v6 起不再做裁切窗——用户 2026-08-24："画幅不是铺满的，不对劲"）═══ */
.hero { height: 170svh; background: var(--color-void); position: relative; }
.hero__pin {
  position: sticky; top: 0; height: 100svh;
  overflow: hidden;
  background: var(--color-void);
}
.hero__frame {
  position: absolute; inset: 0; z-index: var(--z-canvas);
  background:
    radial-gradient(38% 46% at 68% 44%, oklch(72% 0.115 78 / 0.20), transparent 72%),
    radial-gradient(70% 58% at 68% 44%, oklch(32% 0.040 262 / 0.45), transparent 74%),
    linear-gradient(178deg, oklch(19% 0.008 260) 0%, oklch(14% 0.006 262) 60%, oklch(11% 0.005 264) 100%);
}
.surface { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 95% at 60% 50%, transparent 34%, oklch(10% 0.004 265 / 0.80) 100%);
}

.hero__type {
  position: absolute; inset: 0; z-index: var(--z-content);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "tl tl" ". ." "bl br";
  padding: 14% clamp(2.5rem, 11vw, 12rem) 14%;
  pointer-events: none;
}
.hero__type a { pointer-events: auto; }
.hero__tl { grid-area: tl; max-width: min(100%, 52rem); }
.hero__bl {
  grid-area: bl; align-self: end;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm);
}
.hero__br {
  grid-area: br; align-self: end; justify-self: end; text-align: right; white-space: nowrap;
  text-shadow: 0 0 26px oklch(11% 0.005 264 / 0.92), 0 0 64px oklch(11% 0.005 264 / 0.75);
}

.hero__eyebrow { color: var(--color-accent); margin-bottom: var(--space-md); }
.hero__title, .hero__br { font-size: clamp(2.4rem, 0.4rem + 6.2vw, 6.4rem); }
.hero__title { margin-bottom: var(--space-md); }
.hero__sub { font-size: var(--text-base); color: var(--color-on-ink-mute); max-width: 36ch; }
.hero__cue { color: var(--color-on-ink-dim); }
.hero__meter {
  position: absolute; z-index: var(--z-content);
  top: 14%; right: clamp(2.5rem, 11vw, 12rem);
  color: var(--color-accent); opacity: 0.65;
}

/* ═══ 按钮 ═══ */
.btn {
  font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0.1em;
  padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-xs);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.btn--gold { background: var(--color-accent); color: var(--color-void); font-weight: 600; display: inline-block; }
.btn--gold:hover { background: oklch(84% 0.12 80); }
.btn--gold:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--color-accent); border-color: oklch(78% 0.115 78 / 0.45); flex: none; }
.btn--ghost:hover { background: oklch(78% 0.115 78 / 0.12); }
.btn--wide { width: 100%; padding-block: var(--space-md); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ═══ 走马灯 ═══ */
.marquee {
  overflow: hidden; background: var(--color-ink);
  border-block: 1px solid oklch(100% 0 0 / 0.08);
  padding-block: var(--space-md);
  will-change: transform;
}
.marquee__track {
  display: flex; align-items: center; gap: var(--space-lg);
  white-space: nowrap; width: max-content;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.6rem, 1rem + 2vw, 2.8rem);
  color: var(--color-on-ink);
  will-change: transform;
}
.marquee__track i { color: var(--color-accent); font-style: normal; font-size: 0.6em; }

/* ═══ 幕 01 · 宣纸 + 六宫格 ═══ */
.paper {
  background: var(--color-paper); color: var(--color-on-paper);
  padding: var(--space-3xl) clamp(1.25rem, 5vw, 6rem);
}
.paper__head { position: relative; max-width: 68rem; margin: 0 auto var(--space-2xl); }
.paper__eyebrow { color: var(--color-accent-deep); margin-bottom: var(--space-md); }
.paper__title { font-size: var(--text-4xl); margin-bottom: var(--space-lg); }
.paper__body { font-size: var(--text-lg); color: var(--color-on-paper-mute); max-width: 48ch; }
.seal { position: absolute; top: 0; right: 0; width: clamp(3.5rem, 8vw, 5.5rem); }
.seal__box { fill: var(--color-seal); }
.seal__t { fill: var(--color-paper); font-family: var(--font-display); font-weight: 900; font-size: 34px; text-anchor: middle; letter-spacing: 2px; }

.bento {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-md); max-width: 68rem; margin-inline: auto;
  perspective: 1200px;
}
.tile { transform-style: preserve-3d; }
.tile--wide { grid-column: span 2; }
.tile a {
  display: flex; flex-direction: column; gap: var(--space-2xs);
  height: 100%; min-height: 11rem;
  padding: var(--space-md) var(--space-md) var(--space-lg);
  background: var(--color-paper-2);
  border: 1px solid oklch(22% 0.012 60 / 0.14);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-mid) var(--ease-out), background var(--dur-mid) var(--ease-out);
}
.tile a:hover { border-color: var(--color-accent-deep); background: oklch(92% 0.02 84); }
.tile__no { color: var(--color-accent-deep); }
.tile__n { font-family: var(--font-display); font-weight: 900; font-size: var(--text-2xl); margin-top: auto; }
.tile__d { font-size: var(--text-sm); color: var(--color-on-paper-mute); line-height: 1.7; }
.tile--cta a { background: var(--color-on-paper); border-color: var(--color-on-paper); color: var(--color-paper); }
.tile--cta a:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); }
.tile--cta .tile__no { color: var(--color-accent); }
.tile--cta .tile__d { color: oklch(94% 0.014 85 / 0.72); }

/* ═══ 幕 02–07 · 六个 Agent：两种场景交替（钉住式） ═══
 * 配色：金色是品牌主色（导航/按钮/首页），产品段每幕另给一个取自该领域的辅助色 --scene；
 * 并按 zentry 的做法插入明暗翻转（02、05 走浅色宣纸），打断一路到底的深色。 */
.ag { position: relative; height: 195svh; --scene: var(--color-accent); }
.ag--split { background: var(--color-ink); }
.ag--bleed { background: var(--color-void); }

#a1 { --scene: oklch(76% 0.120 205); }   /* 实时消息解读 · 青 */
#a2 { --scene: oklch(52% 0.190 290); }   /* 舆情扫描 · 紫罗兰（浅底） */
#a3 { --scene: oklch(74% 0.130 160); }   /* 产业链图谱 · 翠 */
#a4 { --scene: oklch(66% 0.165 32);  }   /* 交易复盘 · 朱砂 */
#a5 { --scene: oklch(48% 0.160 258); }   /* 资金流看盘 · 靛蓝（浅底） */
#a6 { --scene: oklch(73% 0.130 310); }   /* 论文雷达 · 紫水晶 */
#a7 { --scene: oklch(62% 0.115 70);  }   /* 因子审计工厂 · 鎏金压深（浅底） */

/* 浅色翻转幕 */
.ag--paper { background: var(--color-paper); color: var(--color-on-paper); }
.ag--paper .ag__stage { border-top-color: oklch(22% 0.012 60 / 0.16); }
.ag--paper .ag__lead { color: var(--color-on-paper-mute); }
.ag--paper .ag__lit { color: oklch(45% 0.014 60); border-top-color: oklch(22% 0.012 60 / 0.18); }
.ag--paper .ag__cap { color: oklch(52% 0.014 60); }
.ag--paper .cap { color: oklch(52% 0.014 60); }
.ag--paper .ag__ghost { -webkit-text-stroke-color: oklch(22% 0.012 60 / 0.20); }
.ag--paper.ag--bleed .ag__col {
  background: oklch(94% 0.014 85 / 0.94);
  border-color: oklch(22% 0.012 60 / 0.16);
}
.ag__stage {
  position: sticky; top: 0; height: 100svh;
  display: grid; align-items: center;
  padding: var(--space-3xl) clamp(1.25rem, 5vw, 6rem) var(--space-2xl);
  overflow: hidden;
  border-top: 1px solid oklch(100% 0 0 / 0.07);
}
.ag__col { position: relative; z-index: 2; min-width: 0; }
.ag__no { color: var(--scene); margin-bottom: var(--space-md); }
.ag .accent { color: var(--scene); }
.ag__title { font-size: clamp(1.9rem, 0.9rem + 2.6vw, 3.6rem); margin-bottom: var(--space-lg); }
.ag__cap { color: var(--color-on-ink-dim); margin-top: var(--space-lg); }

/* 背景大号序号：只描边不填色 */
.ag__ghost {
  position: absolute; z-index: 0; pointer-events: none;
  bottom: -9vh; left: -1.5vw;
  font-family: var(--font-display); font-weight: 900; font-size: 34vh; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in oklch, var(--scene) 42%, transparent);
}
.ag__ghost--r { left: auto; right: -1.5vw; }

/* v6 极简三件套：一句定位 + 三个要点 + 一条文献注（替代原三段式 spec） */
.ag__lead { font-size: var(--text-lg); color: var(--color-on-ink-mute); max-width: 30ch; margin-bottom: var(--space-lg); }
.ag__points { color: var(--scene); letter-spacing: 0.2em; margin-bottom: var(--space-lg); }
.ag__lit {
  font-size: var(--text-sm); color: var(--color-on-ink-dim); line-height: 1.8;
  max-width: 40ch; padding-top: var(--space-sm);
  border-top: 1px solid oklch(100% 0 0 / 0.10);
}

/* ── 场景 A：分栏 + 双图擦除 ── */
.ag--split .ag__stage { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.ag__media { position: relative; z-index: 2; min-width: 0; }
.wipe {
  position: relative; aspect-ratio: 16 / 10;
  border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--scene) 34%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--scene) 14%, transparent),
              0 30px 80px -20px oklch(0% 0 0 / 0.75);
  background:
    radial-gradient(60% 70% at 55% 45%, color-mix(in oklch, var(--scene) 10%, transparent), transparent 75%),
    linear-gradient(178deg, var(--color-ink-2), var(--color-void));
}
.ag--paper .wipe { background: var(--color-paper-2); }
.wipe canvas, .bleed canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wipe__cap { position: relative; height: 2.4em; margin-top: var(--space-sm); }
.cap { position: absolute; right: 0; top: 0; color: var(--color-on-ink-dim); }

/* ── 场景 B：大图框随滚动展开 + 压在其上的不透明文字卡 ── */
.ag--bleed .ag__stage { grid-template-columns: minmax(0, 1fr); }
.bleed {
  position: absolute; inset: 9% 5%; margin: 0; z-index: 1;
  border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--scene) 34%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--scene) 14%, transparent),
              0 30px 80px -20px oklch(0% 0 0 / 0.75);
  will-change: clip-path;
  background:
    radial-gradient(60% 70% at 50% 45%, color-mix(in oklch, var(--scene) 10%, transparent), transparent 75%),
    linear-gradient(178deg, var(--color-ink-2), var(--color-void));
}
.ag--paper .bleed { background: var(--color-paper-2); }
.ag--bleed .ag__col {
  z-index: 3; width: min(100%, 34rem);
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
  background: oklch(11% 0.005 264 / 0.94);
  border: 1px solid oklch(100% 0 0 / 0.10);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(8px);
}
.ag--left .ag__col { justify-self: end; }
.ag--right .ag__col { justify-self: start; }

@media (min-width: 62rem) {
  .ag--split .ag__stage { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: var(--space-2xl); }
}
@media (max-width: 62rem) {
  .ag { height: auto; }
  .ag__stage { position: static; height: auto; padding-block: var(--space-2xl); gap: var(--space-lg); }
  .ag__ghost { font-size: 26vh; opacity: 0.3; }
  .bleed { position: relative; width: 100%; height: 46vh; margin-bottom: var(--space-lg); }
  .bleed::after { background: none !important; }
  .ag--bleed .ag__col { width: 100%; justify-self: stretch; }
  .ag--bleed .ag__stage { display: flex; flex-direction: column; }
}

/* ═══ 幕 08 · 注册引导（表单在 account.html）═══ */
.cta {
  background: var(--color-void); text-align: center;
  padding: var(--space-3xl) clamp(1.25rem, 5vw, 6rem);
  border-top: 1px solid oklch(100% 0 0 / 0.07);
}
.cta__inner { max-width: 44rem; margin-inline: auto; }
.cta__eyebrow { color: var(--color-accent); margin-bottom: var(--space-md); }
.cta__title { font-size: var(--text-4xl); margin-bottom: var(--space-md); }
.cta__lead { color: var(--color-on-ink-mute); margin-bottom: var(--space-xl); }
.cta__note { color: var(--color-on-ink-dim); margin-top: var(--space-md); }

/* ═══ 表单基件（account.html 在用）═══ */
.field { display: grid; gap: var(--space-2xs); }
.field label { color: var(--color-on-paper-mute); }
.field__row { display: flex; gap: var(--space-xs); }
.field input {
  width: 100%; min-width: 0;
  font-family: var(--font-mono); font-size: var(--text-base); letter-spacing: 0.06em;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-on-paper); background: var(--color-paper-2);
  border: var(--rule-hair-paper); border-radius: var(--radius-xs);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field input::placeholder { color: oklch(45% 0.014 60 / 0.55); }
.field input:hover { border-color: oklch(22% 0.012 60 / 0.34); }
.field input:focus-visible { border-color: var(--color-accent-deep); }
.field input[aria-invalid="true"] { border-color: var(--color-seal); }
.field__err { color: var(--color-seal); }
.reg__hint { color: var(--color-on-paper-mute); text-align: center; margin-top: var(--space-xs); }
.reg__hint.is-ok { color: var(--color-accent-deep); }

/* ═══ 账户页（account.html）═══ */
.acct-page { background: var(--color-paper); color: var(--color-on-paper); }
.acct-page .edge.is-stuck { background: oklch(94% 0.014 85 / 0.88); border-bottom-color: oklch(22% 0.012 60 / 0.16); color: var(--color-on-paper); }
.acct-page .edge__cta { color: var(--color-accent-deep); border-color: var(--color-accent-deep) !important; }
.acct {
  min-height: 78svh;
  display: grid; align-items: center;
  padding: calc(var(--space-3xl) + 3rem) clamp(1.25rem, 5vw, 6rem) var(--space-3xl);
}
.acct__panel { width: min(100%, 34rem); margin-inline: auto; }
.acct__eyebrow { color: var(--color-accent-deep); margin-bottom: var(--space-md); }
.acct__title { font-size: var(--text-4xl); margin-bottom: var(--space-md); overflow-wrap: anywhere; }
.acct__lead { color: var(--color-on-paper-mute); margin-bottom: var(--space-xl); }
.acct__tabs { display: flex; gap: var(--space-lg); border-bottom: var(--rule-hair-paper); margin-bottom: var(--space-xl); }
.acct__tab {
  font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0.14em; text-transform: uppercase;
  background: none; border: none; cursor: pointer; color: var(--color-on-paper-mute);
  padding: var(--space-xs) 0 var(--space-sm);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.acct__tab:hover { color: var(--color-on-paper); }
.acct__tab.is-on { color: var(--color-accent-deep); border-bottom-color: var(--color-accent-deep); }
.acct__form { display: grid; gap: var(--space-md); }
.acct__link { color: var(--color-accent-deep); border-bottom: 1px solid currentColor; }
.acct__sub {
  color: var(--color-on-paper-mute); font-weight: 500;
  border-top: var(--rule-hair-paper); padding-top: var(--space-md); margin-bottom: var(--space-md);
}
.acct__list { display: grid; gap: var(--space-xs); margin-bottom: var(--space-xl); }
.acct__item {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-paper-2);
  border: var(--rule-hair-paper); border-radius: var(--radius-xs);
}
.acct__item-n { font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg); }
.acct__item-s { color: var(--color-accent-deep); }
.acct__note { color: var(--color-on-paper-mute); line-height: 1.9; margin-bottom: var(--space-lg); }
.acct__form .btn--ghost, .acct .btn--ghost { color: var(--color-accent-deep); border-color: oklch(62% 0.115 70 / 0.5); }
.acct-page .foot { border-top: none; }

/* ═══ 页脚 ═══ */
.foot { background: var(--color-void); padding: var(--space-2xl) clamp(1.25rem, 5vw, 6rem) var(--space-2xl); border-top: 1px solid oklch(100% 0 0 / 0.07); }
.foot__main { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-xl); }
.foot__line { font-size: clamp(3rem, 1rem + 9vw, 11rem); line-height: 1; }
.foot__cat { color: var(--color-on-ink-dim); margin-top: var(--space-sm); }
.foot__qr { margin: 0; text-align: center; }
.foot__qr img {
  width: clamp(8rem, 12vw, 10.5rem); height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid oklch(78% 0.115 78 / 0.28);
}
.foot__qr figcaption { color: var(--color-on-ink-dim); margin-top: var(--space-xs); }
.foot__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg);
  color: var(--color-on-ink-dim);
  border-top: 1px solid oklch(100% 0 0 / 0.08);
  padding-top: var(--space-md); margin-top: var(--space-xl);
}

/* ═══ 入场初始态（有 JS 才隐藏） ═══ */
.js .ch { opacity: 0; }
.js [data-rise] { opacity: 0; transform: translateY(26px); }
.js [data-shot] { opacity: 0; }
.js .tile { opacity: 0; transform: translateY(30px); }

/* ═══ 移动端 ═══ */
@media (max-width: 62rem) {
  .tile--wide { grid-column: span 1; }
}
@media (max-width: 40rem) {
  .hero { height: 145svh; }
  .hero__type {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tl" "br" "bl";
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: max(16%, 7rem) clamp(1.5rem, 8vw, 3rem) 12%;   /* 留出固定导航的高度 */
  }
  .hero__br { justify-self: start; text-align: left; align-self: center; }
  .hero__meter { display: none; }
  .paper, .cta { padding-block: var(--space-2xl); }
  .edge__nav a:not(.edge__cta):not(.edge__login) { display: none; }
  .hero__cue, .hud__scene { display: none; }
  .field__row { flex-direction: column; }
  .field__row .btn { width: 100%; }
  .shot img { transform: none !important; }
}

/* ═══ 减动效 ═══ */
@media (prefers-reduced-motion: reduce) {
  .js .ch, .js [data-rise], .js [data-shot], .js .tile { opacity: 1 !important; transform: none !important; }
  .hero { height: auto; }
  .hero__pin { position: static; height: auto; padding-block: var(--space-3xl); }
  .shot img { transform: none !important; }
  .btn, .edge, .field input, .tile a { transition-duration: 0.01ms; }
}