/* ═══════════════════════════════════════════════════════════
   RD · 赵凡木 — 深空航行日志
   Design system: Interstellar × Blade Runner 2049
   双幕结构：Act I 深空金 / Act II 霓虹橙粉
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Michroma';
  src: url('../fonts/michroma-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Share Tech Mono';
  src: url('../fonts/share-tech-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* — 宇宙底色 — */
  --space-0: #04060c;
  --space-1: #070b16;
  --ink: #e9edf5;
  --ink-dim: #97a0b4;
  --ink-faint: #5c6579;
  /* — ACT I · 星际穿越 — */
  --gold: #e3b76a;
  --gold-hi: #f5d9a0;
  --ice: #8fc7ff;
  /* — ACT II · 银翼杀手 — */
  --orange: #e08a4c;
  --holo-pink: #ff9bd2;
  --holo-cyan: #6fe0d6;
  /* — 由 data-act 驱动的当前幕强调色 — */
  --accent: var(--gold);
  --accent-hi: var(--gold-hi);
  --accent-rgb: 227, 183, 106;
  --line: rgba(233, 237, 245, .13);
  --panel-bg: rgba(10, 14, 24, .52);
  --panel-bg-2: rgba(16, 21, 34, .66);
  /* — 字体 — */
  --f-disp: 'Michroma', 'Arial Narrow', sans-serif;
  --f-mono: 'Share Tech Mono', 'Courier New', monospace;
  --f-han: 'Microsoft YaHei UI Light', 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', sans-serif;
  --f-song: 'SimSun', 'NSimSun', 'Songti SC', 'Noto Serif SC', serif;
  /* — 节奏 — */
  --pad-x: clamp(20px, 6vw, 96px);
  --max-w: 1180px;
  --ease-out: cubic-bezier(.19, 1, .22, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

body[data-act="2"] {
  --accent: var(--orange);
  --accent-hi: #f2b07a;
  --accent-rgb: 224, 138, 76;
  --line: rgba(255, 200, 150, .14);
  --panel-bg: rgba(12, 8, 6, .66);
  --panel-bg-2: rgba(22, 13, 8, .8);
}

/* ── 键盘可达性 ──
   自定义光标只在指针设备上出现，键盘用户必须能看到焦点位置。 */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.card:focus-visible { box-shadow: 0 0 0 1px var(--accent), 0 18px 46px -22px rgba(0, 0, 0, .8); }
.poem:focus-visible { outline-offset: 8px; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  padding: 12px 18px; background: var(--space-0);
  border: 1px solid var(--accent); color: var(--ink);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .16em;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ── 基础 ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; overflow-x: clip; }
html, body { background: var(--space-0); }
body {
  color: var(--ink);
  font-family: var(--f-han);
  font-size: 16px;
  line-height: 1.8;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(var(--accent-rgb), .35); color: #fff; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
b { font-weight: 600; }

/* 滚动条 */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), .35); border-radius: 2px; }

.f-disp { font-family: var(--f-disp); }
.f-mono { font-family: var(--f-mono); }

/* ── 画布与覆盖层 ─────────────────────── */
#gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }

/* 背景视频仅作为 three.js 的纹理源（VideoTexture），
   绝不能参与文档流 —— 否则 4K 视频的固有尺寸会撑高页面、
   在元数据加载后造成滚动位置漂移。固定为 1px 并完全透明。 */
#bgVideo {
  position: fixed; left: 0; top: 0;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
  z-index: -1;
}

.vignette {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse 120% 90% at 50% 46%, transparent 58%, rgba(2, 3, 8, .42) 100%),
    linear-gradient(to bottom, rgba(2, 3, 8, .25), transparent 12% 88%, rgba(2, 3, 8, .3));
}
.grain {
  position: fixed; inset: -60px; z-index: 3; pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation: grain 9s steps(9) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); } 12% { transform: translate(-18px,6px); }
  25% { transform: translate(10px,-22px); } 38% { transform: translate(-26px,-8px); }
  50% { transform: translate(22px,14px); } 62% { transform: translate(-8px,26px); }
  75% { transform: translate(-14px,-18px); } 88% { transform: translate(16px,8px); }
}
.flash {
  position: fixed; inset: 0; z-index: 150; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, #fff7ea 0%, #ffd9a8 60%, transparent 100%);
  opacity: 0;
}
html.comfort .grain { opacity: .028; animation: none; }

/* ── 预加载 · 点火序列 ────────────────── */
#loader {
  position: fixed; inset: 0; z-index: 100;
  background: #03050a;
  display: grid; place-items: center;
  clip-path: inset(0 0 0% 0);
}
html.locked, html.locked body { overflow: hidden; }
.loader-frame { position: relative; width: min(560px, 86vw); padding: clamp(28px, 5vw, 48px); }
.loader-corner { position: absolute; width: 26px; height: 26px; border: 1px solid rgba(var(--accent-rgb), .55); transition: border-color .6s; }
.loader-corner.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.loader-corner.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.loader-corner.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.loader-corner.br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
/* 早先 HTML 里写的是 "E N D U R A N C E"（手工塞了 8 个空格），再叠一层
   letter-spacing: .5em —— 17 个字符 × 1.5em 必然超宽，
   桌面断成 ENDURAN/CE、手机断成 ENDURA/NCE。
   现在文字回到 ENDURANCE，字距只由 letter-spacing 给，且禁止断行。 */
.loader-ship {
  font-size: clamp(18px, 3.4vw, 26px);
  letter-spacing: .5em;
  text-indent: .5em;
  white-space: nowrap;
  color: var(--gold-hi);
}
.loader-sub { margin-top: 8px; font-size: 11px; letter-spacing: .3em; color: var(--ink-faint); }
.loader-lines { margin: 26px 0 18px; min-height: 108px; font-size: 12px; line-height: 1.9; letter-spacing: .08em; color: var(--ink-dim); }
.loader-lines .ok { color: var(--gold); }
.loader-lines .cur::after { content: '▌'; color: var(--gold); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.loader-bar { height: 2px; background: rgba(233, 237, 245, .1); overflow: hidden; }
.loader-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-hi)); transform: scaleX(0); transform-origin: left; }
.loader-row { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11px; letter-spacing: .2em; color: var(--ink-faint); }
.launch-btn {
  margin-top: 34px; width: 100%; padding: 15px 0;
  font-size: 13px; letter-spacing: .42em; text-indent: .42em;
  color: var(--gold-hi);
  border: 1px solid rgba(var(--accent-rgb), .4);
  position: relative; overflow: hidden;
  opacity: .25; pointer-events: none;
  transition: opacity .5s, color .3s, background .3s, border-color .3s;
}
.launch-btn.ready { opacity: 1; pointer-events: auto; }
.launch-btn.ready:hover { background: rgba(var(--accent-rgb), .12); border-color: var(--gold-hi); }
.launch-btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(245, 217, 160, .18) 50%, transparent 70%);
  transform: translateX(-100%);
}
.launch-btn.ready::before { animation: sheen 2.6s var(--ease-io) infinite; }
@keyframes sheen { to { transform: translateX(100%); } }

/* ── HUD 顶部 ─────────────────────────── */
.hud-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: clamp(16px, 2.4vw, 26px) var(--pad-x);
  pointer-events: none;
  mix-blend-mode: normal;
  text-shadow: 0 1px 3px rgba(3, 5, 10, .9), 0 2px 14px rgba(3, 5, 10, .7);
}
.hud-top > * { pointer-events: auto; }
.wordmark { display: grid; gap: 3px; }
.wm-ring {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--accent); position: relative; margin-bottom: 4px;
}
.wm-ring::after { content: ''; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--accent); }
.wm-text { font-size: 14px; letter-spacing: .22em; color: var(--ink); }
.wm-text i { font-style: normal; color: var(--accent); }
.wm-sub { font-size: 10px; letter-spacing: .3em; color: var(--ink-faint); }
.hud-right { display: flex; gap: 22px; align-items: center; font-size: 11px; letter-spacing: .18em; color: var(--ink-dim); }
.hud-coord { color: var(--ink-faint); }
.comfort-btn, .hud-btn {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em;
  color: var(--ink-dim); padding: 7px 12px;
  border: 1px solid var(--line); border-radius: 2px;
  transition: color .3s, border-color .3s;
  white-space: nowrap;
}
.hud-btn .hud-ico { color: var(--accent); font-style: normal; }
.hud-btn.is-off .hud-ico { color: var(--ink-faint); }
.hud-btn.is-off { opacity: .6; }
.comfort-btn:hover, .hud-btn:hover { color: var(--ink); border-color: rgba(var(--accent-rgb), .5); }

/* ── 收藏站入口 ───────────────────────────
   这是整站唯一一个「跳出去」的链接（去 Rdslove 收藏站），
   所以给它一点区别：描边和图标用强调色，hover 有微光，让人一眼认出是入口而不是开关。 */
.hud-btn--go { border-color: rgba(var(--accent-rgb), .42); color: var(--ink); }
.hud-btn--go .hud-ico { text-shadow: 0 0 10px rgba(var(--accent-rgb), .7); }
.hud-btn--go:hover {
  border-color: rgba(var(--accent-rgb), .9);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .18), 0 0 22px -6px rgba(var(--accent-rgb), .55);
}
.comfort-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); transition: background .3s, box-shadow .3s; }
html.comfort .comfort-dot { background: var(--holo-cyan); box-shadow: 0 0 8px rgba(111, 224, 214, .8); }
html.comfort .comfort-btn { color: var(--ink); border-color: rgba(111, 224, 214, .4); }

/* ── HUD 章节轨道 ─────────────────────── */
.hud-rail {
  position: fixed; left: clamp(14px, 2.4vw, 34px); top: 50%; transform: translateY(-50%);
  z-index: 50; display: flex; flex-direction: column; gap: 20px;
}
.rail-line { position: absolute; left: 3.5px; top: 8px; bottom: 8px; width: 1px; background: rgba(233, 237, 245, .1); }
.rail-line i { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--accent); transform: scaleY(0); transform-origin: top; }
.rail-dot {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding-left: 0; height: 8px;
}
.rail-dot::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid rgba(233, 237, 245, .35); background: var(--space-0);
  transition: background .3s, border-color .3s, transform .3s;
  flex: none;
}
.rail-dot em { font-style: normal; font-family: var(--f-mono); font-size: 9px; color: var(--ink-faint); }
.rail-dot span {
  font-size: 10px; letter-spacing: .16em; color: var(--ink-faint);
  opacity: 0; transform: translateX(-6px);
  transition: opacity .35s, transform .35s, color .35s;
  white-space: nowrap;
}
.rail-dot:hover span, .rail-dot.is-active span { opacity: 1; transform: none; }
.rail-dot.is-active::before { background: var(--accent); border-color: var(--accent); transform: scale(1.25); box-shadow: 0 0 10px rgba(var(--accent-rgb), .7); }
.rail-dot.is-active span { color: var(--ink); }

/* ── 滚动提示 ─────────────────────────── */
.hud-scrollcue {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 50; font-size: 10px; letter-spacing: .32em; color: var(--ink-dim);
  display: flex; align-items: center; gap: 12px;
  transition: opacity .5s;
}
.hud-scrollcue i { display: block; width: 44px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); position: relative; overflow: visible; }
.hud-scrollcue i::after { content: ''; position: absolute; right: 0; top: -2.5px; width: 6px; height: 6px; border-top: 1px solid var(--accent); border-right: 1px solid var(--accent); transform: rotate(45deg); animation: nudge 2.2s var(--ease-io) infinite; }
@keyframes nudge { 0%,100% { transform: translate(0,0) rotate(45deg); opacity: .4; } 50% { transform: translate(6px,0) rotate(45deg); opacity: 1; } }
.hud-scrollcue.hidden { opacity: 0; pointer-events: none; }

.phase-status {
  position: fixed; bottom: 24px; left: clamp(14px, 2.4vw, 34px); z-index: 50;
  font-size: 10px; letter-spacing: .28em; color: var(--ink-dim);
  text-shadow: 0 1px 3px rgba(3,5,10,.9);
  opacity: 0; transition: opacity .6s;
}
body[data-act="2"] .phase-status, body[data-act="1"] .phase-status { opacity: 1; }
html.locked .phase-status { opacity: 0; }
@media (max-width: 900px) { .phase-status { display: none; } }

/* ── 自定义光标 ───────────────────────── */
.cursor { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.cursor-dot, .cursor-ring { position: absolute; top: 0; left: 0; will-change: transform; }
.cursor-dot::after {
  content: ''; display: block; width: 5px; height: 5px; margin: -2.5px;
  border-radius: 50%; background: var(--accent-hi);
}
.cursor-ring::before {
  content: ''; display: block; width: 34px; height: 34px; margin: -17px;
  border-radius: 50%; border: 1px solid rgba(var(--accent-rgb), .55);
  transition: width .3s var(--ease-out), height .3s var(--ease-out), margin .3s var(--ease-out), border-color .3s, background .3s;
}
.cursor-ring .cursor-label {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 9px; letter-spacing: .22em; color: var(--accent-hi);
  opacity: 0; transition: opacity .25s; white-space: nowrap; text-indent: .22em;
}
.cursor.is-link .cursor-ring::before { width: 52px; height: 52px; margin: -26px; border-color: rgba(var(--accent-rgb), .9); background: rgba(var(--accent-rgb), .06); }
.cursor.is-view .cursor-ring::before { width: 68px; height: 68px; margin: -34px; border-color: var(--holo-pink); background: rgba(255, 155, 210, .07); }
.cursor.is-link .cursor-label, .cursor.is-view .cursor-label { opacity: 1; }
.cursor.is-down .cursor-ring::before { transform: scale(.82); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ═══════════ 章节面板 ══════════════════ */
main { position: relative; z-index: 10; }
.panel {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(90px, 14vh, 150px) var(--pad-x);
  /* 全局文字投影：保证亮背景上的可读性 */
  text-shadow: 0 1px 3px rgba(3, 5, 10, .8), 0 2px 22px rgba(3, 5, 10, .55);
}

/* 章节头 */
.sec-head { margin-bottom: clamp(48px, 8vh, 84px); position: relative; }
.sec-act { font-size: 11px; letter-spacing: .5em; color: var(--accent); margin-bottom: 22px; }
.sec-title {
  font-size: clamp(40px, 7.4vw, 92px); font-weight: 300;
  letter-spacing: .12em; line-height: 1.15; color: var(--ink);
}
.sec-en { font-size: clamp(11px, 1.4vw, 15px); letter-spacing: .44em; color: var(--ink-faint); margin-top: 14px; }
.sec-lead { margin-top: 26px; font-size: clamp(15px, 1.7vw, 19px); color: var(--ink-dim); letter-spacing: .06em; max-width: 34em; }

/* ── HERO ─────────────────────────────── */
.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 16vh; }
.kicker { font-size: 11px; letter-spacing: .4em; color: var(--ink-dim); margin-bottom: 4vh; }
.kicker span::before { content: '◆ '; color: var(--accent); }
.hero-name { position: relative; margin-bottom: 5vh; }
.hero-watermark {
  position: absolute; right: 0; top: 50%; transform: translateY(-54%);
  font-size: clamp(120px, 26vw, 340px); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--accent-rgb), .22);
  letter-spacing: .04em; user-select: none; pointer-events: none;
}
.hero-han {
  font-size: clamp(72px, 13.5vw, 190px); font-weight: 300;
  letter-spacing: .08em; line-height: 1.1; color: var(--ink);
  text-shadow: 0 0 60px rgba(var(--accent-rgb), .18);
}
.hero-han .kchar { display: inline-block; will-change: transform; }
.hero-en { font-size: clamp(12px, 1.8vw, 18px); letter-spacing: .5em; color: var(--gold-hi); }
.hero-zh { margin-top: 18px; font-size: clamp(15px, 1.9vw, 20px); color: var(--ink-dim); letter-spacing: .1em; }
.hero-roles { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 5vh; }
.hero-roles li {
  font-size: 11px; letter-spacing: .18em; color: var(--ink-dim);
  border: 1px solid var(--line); padding: 8px 16px; border-radius: 2px;
  backdrop-filter: blur(4px);
}
.hero-roles li.hl { color: var(--gold-hi); border-color: rgba(var(--accent-rgb), .45); }
.hero-meta { margin-top: 3vh; font-size: 11px; letter-spacing: .24em; color: var(--ink-faint); }

/* ── 低语 ─────────────────────────────── */
.whisper { min-height: 82vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.whisper-en { font-family: var(--f-song); font-style: italic; font-size: clamp(20px, 3.2vw, 34px); color: var(--ink); letter-spacing: .04em; }
.whisper-zh { margin-top: 22px; font-size: clamp(14px, 1.8vw, 18px); color: var(--ink-dim); letter-spacing: .3em; }
.whisper-src { margin-top: 34px; font-size: 10px; letter-spacing: .3em; color: var(--ink-faint); }

/* ── ACT I · 信条 ─────────────────────── */
.chapters { list-style: none; display: grid; gap: clamp(60px, 10vh, 110px); }
.chapter { position: relative; display: flex; gap: clamp(20px, 4vw, 56px); align-items: flex-start; padding-left: 4px; }
.chapter + .chapter { border-top: 1px solid var(--line); padding-top: clamp(60px, 10vh, 110px); }
.ch-num {
  font-size: clamp(56px, 9vw, 120px); line-height: .9;
  color: transparent; -webkit-text-stroke: 1px rgba(var(--accent-rgb), .5);
  flex: none; user-select: none;
  transition: -webkit-text-stroke .5s, text-shadow .5s;
}
.chapter:hover .ch-num { -webkit-text-stroke: 1px rgba(var(--accent-rgb), .95); text-shadow: 0 0 34px rgba(var(--accent-rgb), .35); }
.ch-body { max-width: 620px; }
.ch-title { font-size: clamp(30px, 4.6vw, 54px); font-weight: 300; letter-spacing: .2em; display: flex; align-items: baseline; gap: 20px; }
.ch-title i { font-style: normal; font-family: var(--f-disp); font-size: clamp(10px, 1.2vw, 13px); letter-spacing: .5em; color: var(--accent); }
.ch-text { margin-top: 16px; color: var(--ink-dim); font-size: clamp(14px, 1.6vw, 17px); letter-spacing: .05em; }

/* ── 航程日志 ─────────────────────────── */
.log-list { list-style: none; display: grid; gap: clamp(48px, 8vh, 90px); }
.log-entry { display: grid; grid-template-columns: 200px 1fr; gap: clamp(20px, 4vw, 60px); position: relative; }
.log-entry::before {
  content: ''; position: absolute; left: -24px; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(to bottom, rgba(var(--accent-rgb), .55), transparent);
}
.log-stamp { display: flex; flex-direction: column; gap: 8px; font-size: 11px; letter-spacing: .22em; color: var(--ink-dim); }
.log-stamp .tag { color: var(--accent); }
.log-stamp .tag.hl { color: var(--holo-pink); }
.log-main h3 { font-size: clamp(19px, 2.6vw, 27px); font-weight: 400; letter-spacing: .06em; }
.log-main p { margin-top: 14px; color: var(--ink-dim); font-size: clamp(14px, 1.5vw, 16px); max-width: 36em; }
.log-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 26px; margin-top: 22px; }
.log-stats li { font-size: 12px; letter-spacing: .14em; color: var(--ink-faint); }
.log-stats b { font-size: 24px; color: var(--accent-hi); font-weight: 400; margin-right: 6px; letter-spacing: .04em; }

/* ── 虫洞 ─────────────────────────────── */
.wormhole { position: relative; height: 420vh; }
.wormhole-stage {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; gap: 8px; padding: 0 var(--pad-x);
}
.wh-line { font-size: clamp(26px, 4.6vw, 52px); font-weight: 300; letter-spacing: .22em; color: var(--ink); text-shadow: 0 1px 4px rgba(20, 10, 2, .9), 0 2px 34px rgba(20, 10, 2, .75), 0 0 44px rgba(255, 220, 170, .3); }
.wh-note { font-size: 10px; letter-spacing: .3em; color: var(--ink-faint); margin-top: 20px; text-shadow: 0 1px 3px rgba(20,10,2,.9), 0 2px 16px rgba(20,10,2,.7); }
.wh-arrive {
  position: absolute; font-size: clamp(13px, 1.8vw, 18px);
  letter-spacing: .56em; text-indent: .56em; color: var(--orange);
  opacity: 0; text-shadow: 0 1px 4px rgba(20,10,2,.9), 0 2px 26px rgba(20,10,2,.7), 0 0 30px rgba(224, 138, 76, .5);
}

/* ── ACT II · 作品星系 ────────────────── */
.baseline {
  position: absolute; top: clamp(28px, 5vh, 48px); left: 0; right: 0;
  overflow: hidden; white-space: nowrap;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 9px 0; mask-image: linear-gradient(90deg, transparent, #000 15% 85%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15% 85%, transparent);
}
.baseline-track { display: inline-block; font-size: 10px; letter-spacing: .34em; color: rgba(var(--accent-rgb), .8); animation: marquee 46s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
html.comfort .baseline-track { animation-duration: 120s; }

.works-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.6vw, 30px); perspective: 1200px; }
.card {
  position: relative; padding: clamp(22px, 2.6vw, 34px);
  background: linear-gradient(158deg, var(--panel-bg-2), var(--panel-bg));
  border: 1px solid var(--line); border-radius: 3px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transform-style: preserve-3d; will-change: transform;
  transition: border-color .45s, box-shadow .45s;
  overflow: hidden;
}
.card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 155, 210, .016) 3px 4px); }
.card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(560px 240px at var(--mx, 50%) var(--my, 0%), rgba(var(--accent-rgb), .1), transparent 65%);
  opacity: 0; transition: opacity .45s;
}
.card:hover { border-color: rgba(var(--accent-rgb), .55); box-shadow: 0 24px 70px -30px rgba(0, 0, 0, .8), 0 0 44px -18px rgba(var(--accent-rgb), .35); }
.card:hover::after { opacity: 1; }
.card-top { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .2em; color: var(--ink-faint); margin-bottom: 22px; }
.card-top .live { color: var(--holo-pink); text-shadow: 0 0 12px rgba(255, 155, 210, .6); animation: livepulse 2.6s ease-in-out infinite; }
@keyframes livepulse { 50% { opacity: .45; } }
html.comfort .card-top .live { animation: none; }
.card-title { font-size: clamp(30px, 3.6vw, 44px); font-weight: 300; letter-spacing: .12em; }
.card-en { margin-top: 8px; font-size: 10px; letter-spacing: .5em; color: var(--accent); }
.card-desc { margin-top: 18px; color: var(--ink-dim); font-size: 14px; line-height: 1.9; min-height: 3.8em; }
.card-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.card-stats li { font-size: 12px; letter-spacing: .12em; color: var(--ink-faint); }
.card-stats b { font-size: 19px; color: var(--ink); font-weight: 400; margin-right: 5px; }
.card-meta { display: flex; flex-direction: column; gap: 4px; margin-top: 20px; font-size: 10px; letter-spacing: .16em; color: var(--ink-faint); }
/* 全息角标 */
.card .card-top::after {
  content: 'INTERLINKED'; position: absolute; right: 0; top: 22px;
  font-size: 9px; letter-spacing: .4em; color: rgba(255, 155, 210, .0);
  transition: color .5s, text-shadow .5s;
}
.card:hover .card-top::after { color: rgba(255, 155, 210, .8); text-shadow: 0 0 14px rgba(255, 155, 210, .8); animation: holo-glitch 3.2s steps(2) infinite; }
@keyframes holo-glitch { 0%,92%,100% { transform: none; opacity: 1; } 93% { transform: translateX(2px); opacity: .6; } 96% { transform: translateX(-2px); opacity: 1; } }

/* ── 诗词 ─────────────────────────────── */
.poems-field { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 72px); justify-content: center; align-items: flex-start; }
.poem { text-align: center; }
.poem-name { font-size: 12px; letter-spacing: .34em; color: var(--accent-hi); margin-bottom: 26px; text-shadow: 0 1px 4px rgba(20, 10, 2, .9), 0 2px 20px rgba(20, 10, 2, .7); }
.poem-vertical {
  writing-mode: vertical-rl; text-orientation: upright;
  font-family: var(--f-song);
  font-size: clamp(17px, 2.1vw, 24px); letter-spacing: .34em;
  line-height: 2.5; height: min(52vh, 430px); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-shadow: 0 1px 4px rgba(20, 10, 2, .85), 0 2px 24px rgba(20, 10, 2, .6);
}
.poem-vertical span { display: block; }
.poem-vertical .em { color: var(--orange); text-shadow: 0 0 24px rgba(224, 138, 76, .4); }
.poems-sign { margin-top: clamp(48px, 8vh, 80px); text-align: center; font-size: 10px; letter-spacing: .3em; color: var(--ink-faint); }

/* ── 归航 ─────────────────────────────── */
.signal { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding-bottom: 40px; }
.signal-quote { font-size: clamp(24px, 4vw, 44px); font-weight: 300; letter-spacing: .14em; color: var(--ink); text-shadow: 0 0 50px rgba(var(--accent-rgb), .25); }
.signal-sub { margin-top: 26px; font-size: clamp(11px, 1.4vw, 14px); letter-spacing: .6em; text-indent: .6em; color: var(--accent); }
.signal-note { margin-top: 14px; font-size: 10px; letter-spacing: .28em; color: var(--ink-faint); }
.signal-cta {
  margin-top: 7vh; position: relative;
  display: grid; place-items: center; gap: 8px;
  width: min(360px, 80vw); padding: 26px 0;
  border: 1px solid rgba(var(--accent-rgb), .5); border-radius: 2px;
  overflow: hidden; background: rgba(var(--accent-rgb), .04);
  transition: border-color .4s, background .4s, box-shadow .4s;
}
.signal-cta:hover { border-color: var(--accent-hi); background: rgba(var(--accent-rgb), .1); box-shadow: 0 0 60px -14px rgba(var(--accent-rgb), .5); }
.cta-en { font-size: 15px; letter-spacing: .5em; text-indent: .5em; color: var(--ink); }
.cta-zh { font-size: 10px; letter-spacing: .3em; color: var(--ink-dim); }
.signal-cta::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-hi), transparent);
  transform: scaleX(0); transition: transform .6s var(--ease-io);
}
.signal-cta:hover::before { transform: scaleX(1); }
.footer {
  position: absolute; bottom: 24px; left: 0; right: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px;
  font-size: 10px; letter-spacing: .2em; color: var(--ink-dim);
  padding: 0 var(--pad-x);
}
.footer .sig { color: var(--holo-cyan); }

/* ═══════════ 初始态（JS 接管前隐藏）═══════════ */
html.js [data-k="lines"] > span { display: inline-block; transform: translateY(112%); will-change: transform; }
html.js [data-k="lines"] { overflow: hidden; }
html.js [data-k="fade"], html.js [data-k="vfade"] { opacity: 0; will-change: transform, opacity; }
html.js [data-k="vfade"] { transform: translateY(26px); }
html.js .card { opacity: 0; transform: translateY(40px); }
.k-split { overflow: hidden; }
.kchar { display: inline-block; will-change: transform; }

/* ── 兜底：启动失败 / 无 WebGL ────────── */
html.boot-timeout [data-k="lines"] > span { transform: none; }
html.boot-timeout [data-k="fade"], html.boot-timeout [data-k="vfade"], html.boot-timeout .card { opacity: 1; transform: none; }
html.no-gl #gl { display: none; }
html.no-gl body {
  background:
    radial-gradient(ellipse 80% 50% at 70% 10%, rgba(20, 26, 48, .5), transparent 70%),
    radial-gradient(ellipse 70% 50% at 30% 85%, rgba(40, 20, 10, .4), transparent 70%),
    #04060c;
}

/* ═══════════ 响应式 ═══════════════════ */
@media (max-width: 900px) {
  .works-grid { grid-template-columns: 1fr; }
  .log-entry { grid-template-columns: 1fr; gap: 14px; }
  .log-entry::before { display: none; }
  .hero-watermark { font-size: 44vw; right: -6vw; }
}
@media (max-width: 640px) {
  .hud-rail { display: none; }
  .hud-right { gap: 8px; }
  .hud-right .hud-coord { display: none; }
  .comfort-btn { font-size: 9px; letter-spacing: .12em; padding: 5px 8px; }
  .comfort-btn .comfort-txt { display: none; }
  /* 小屏只留图标 + 英文，三个按钮才塞得下 */
  .hud-cn { display: none; }
  .hud-btn { font-size: 9px; letter-spacing: .12em; padding: 5px 8px; gap: 5px; }
  .wordmark .wm-sub { display: none; }
  .chapter { gap: 16px; }
  .whisper-en { font-size: 18px; }
  .poem-vertical { line-height: 2.2; letter-spacing: .26em; height: 46vh; }
  .footer { gap: 6px 18px; }
}

/* ── JOI 电影段落 ─────────────────────── */
.joi-scene { position: relative; height: 260vh; }
.joi-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: #000;
}
.joi-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
}
.joi-scan {
  position: absolute; inset: 0; z-index: 1;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0 2px, transparent 2px 5px);
  mix-blend-mode: multiply; opacity: 0.55;
}
.joi-bar {
  position: absolute; left: 0; right: 0; height: 11vh;
  background: #000; transform: scaleY(0); z-index: 2;
}
.joi-bar.top { top: 0; transform-origin: top; }
.joi-bar.bottom { bottom: 0; transform-origin: bottom; }
.joi-cap {
  position: absolute; bottom: 15vh; left: 50%; transform: translateX(-50%);
  z-index: 3; font-size: 10px; letter-spacing: .32em;
  color: rgba(255,190,225,.85); opacity: 0; white-space: nowrap;
  text-shadow: 0 0 12px rgba(255,80,170,.6);
}

/* ═══════════ 降级：系统减弱动态 ═══════════ */
@media (prefers-reduced-motion: reduce) {
  .grain, .baseline-track, .card-top .live, .hud-scrollcue i::after, .neon-sign { animation: none !important; }
}

/* ═══════════════════════════════════════════
   v2 增补：黑洞主角页 / 霓虹夜城 / 档案 / 充能
   ═══════════════════════════════════════════ */

/* — 卡冈图雅主角页 — */
.whisper-hero { min-height: 108vh; justify-content: flex-end; padding-bottom: 7vh; text-align: left; }
.whisper-kicker { font-size: 11px; letter-spacing: .42em; color: var(--accent); margin-bottom: 3.4vh; text-shadow: 0 1px 4px rgba(3,5,10,1), 0 2px 18px rgba(3,5,10,.95); }
.whisper-hero .whisper-en { font-size: clamp(24px, 3.8vw, 46px); text-shadow: 0 1px 5px rgba(3,5,10,1), 0 3px 34px rgba(3,5,10,.9); }
.whisper-hero .whisper-zh { font-size: clamp(14px, 1.7vw, 19px); text-shadow: 0 1px 4px rgba(3,5,10,1), 0 2px 26px rgba(3,5,10,.85); }
.whisper-hero .whisper-src { color: var(--ink-dim); text-shadow: 0 1px 4px rgba(3,5,10,1); }

/* — 巨型描边水印 — */
.sec-head { position: relative; }
.sec-head .sec-watermark {
  position: absolute; right: -2%; top: -34%;
  font-size: clamp(64px, 11vw, 150px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(var(--accent-rgb), .15);
  letter-spacing: .06em; pointer-events: none; user-select: none; white-space: nowrap;
  text-shadow: none;
}
.wm-2049 {
  position: absolute; left: 50%; top: -4%; transform: translateX(-50%);
  font-size: clamp(150px, 26vw, 360px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 155, 210, .10);
  letter-spacing: .04em; pointer-events: none; user-select: none; z-index: 0;
  text-shadow: none;
}
.sec-head, .poems-field, .poems-sign { position: relative; z-index: 1; }

/* — 霓虹招牌 — */
.neon-sign {
  position: absolute; z-index: 1; pointer-events: none; user-select: none;
  font-family: var(--f-song); writing-mode: vertical-rl; text-orientation: upright;
  letter-spacing: .3em;
}
.neon-pink {
  right: clamp(6px, 3.6vw, 38px); top: 13%;
  font-size: clamp(18px, 2.2vw, 30px); color: #ffd7ec;
  text-shadow: 0 0 6px #ff2d95, 0 0 18px #ff2d95, 0 0 46px rgba(255, 45, 149, .6);
  animation: neonflicker 4.2s infinite;
}
.neon-cyan {
  right: clamp(46px, 6.6vw, 84px); top: 27%;
  font-size: clamp(14px, 1.7vw, 23px); color: #d9fbff;
  text-shadow: 0 0 6px #19e3ff, 0 0 16px #19e3ff, 0 0 40px rgba(25, 227, 255, .55);
  animation: neonflicker 5.4s infinite reverse;
}
.neon-gold {
  left: clamp(8px, 2.6vw, 34px); bottom: 5%; writing-mode: horizontal-tb;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .42em;
  color: #ffe9bd; text-shadow: 0 0 8px rgba(255, 200, 90, .8), 0 0 24px rgba(255, 170, 60, .5);
}
@keyframes neonflicker {
  0%, 100% { opacity: 1; } 3% { opacity: .35; } 5% { opacity: 1; }
  41% { opacity: 1; } 43% { opacity: .5; } 45% { opacity: 1; }
  77% { opacity: .82; } 80% { opacity: 1; }
}
html.comfort .neon-sign { animation: none; }

/* — 任务档案展开 — */
.card { cursor: pointer; }
.card-more { max-height: 0; overflow: hidden; transition: max-height .7s var(--ease-io); }
.card.is-open .card-more { max-height: 260px; }
.card-more ul { list-style: none; margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); display: grid; gap: 7px; }
.card-more li { font-size: 11px; letter-spacing: .1em; color: var(--ink-dim); }
.card.is-open { border-color: rgba(var(--accent-rgb), .65); box-shadow: 0 24px 70px -30px rgba(0,0,0,.85), 0 0 54px -16px rgba(var(--accent-rgb), .45); }

/* — 充能信号环 — */
.cta-ring {
  position: absolute; top: 50%; left: 50%; width: 78px; height: 78px;
  transform: translate(-50%, -50%); opacity: 0; transition: opacity .35s;
  pointer-events: none;
}
.signal-cta.is-charging .cta-ring, .signal-cta.is-charged .cta-ring { opacity: 1; }
.cta-ring circle { fill: none; stroke-width: 2.5; }
.cta-ring .track { stroke: rgba(233, 237, 245, .14); }
.cta-ring .prog {
  stroke: var(--accent-hi); stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: center;
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .9));
}
.signal-cta.is-charged { border-color: var(--accent-hi); box-shadow: 0 0 70px -12px rgba(var(--accent-rgb), .7); }

/* — 诗词 ACK — */
.poem { position: relative; }
.ack-tag {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font-size: 10px; letter-spacing: .3em; color: #8fe8ff;
  text-shadow: 0 0 12px rgba(140, 230, 255, .9); white-space: nowrap;
}

/* — 光标新状态 — */
.cursor.is-read .cursor-ring::before { width: 56px; height: 56px; margin: -28px; border-color: rgba(140, 230, 255, .9); background: rgba(140, 230, 255, .06); }
.cursor.is-hold .cursor-ring::before { width: 66px; height: 66px; margin: -33px; border-style: dashed; border-color: rgba(var(--accent-rgb), .95); background: rgba(var(--accent-rgb), .05); }

/* — 跑马灯悬停暂停 — */
.baseline:hover .baseline-track { animation-play-state: paused; }

@media (max-width: 640px) {
  .neon-cyan { display: none; }
  .neon-pink { font-size: 16px; top: 1.5%; }
  .wm-2049 { font-size: 44vw; }
}