/* ════════════════════════════════════════════════════════════
   海龟汤事务所 · 产品介绍页 「雨夜入所」
   纯静态 · 原生 CSS · token 继承自游戏本体 frontend/src/styles/tokens.css
   ════════════════════════════════════════════════════════════ */

/* ── 字体（自托管，OFL/Apache，游戏本体同源） ── */
@font-face { font-family: "Noto Serif SC"; src: url("../fonts/NotoSerifSC-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Noto Serif SC"; src: url("../fonts/NotoSerifSC-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Special Elite"; src: url("../fonts/SpecialElite.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("../fonts/Caveat-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* ── Tokens ── */
:root {
  --paper-100: #faf5e8; --paper-200: #f2ead4; --paper-300: #e7dcbc;
  --paper-400: #d4c497; --paper-edge: #8b7a4e;
  --ink-900: #201a12; --ink-700: #3a2f21; --ink-500: #5e4f38;
  --ink-400: #85755a; --ink-300: #a8957a;
  --blood: #B91C1C; --blood-d: #8B1410;
  --brass: #B89968; --brass-d: #8B7440;
  --brass-ink: #6b5730; /* 纸面上的黄铜文字色（≥4.5:1；--brass-d 上纸只有 3.75，仅作五金/描边） */
  --night: #0a0806; --night-2: #16100a;
  --f-serif: "Noto Serif SC", "Songti SC", "STSong", serif;
  --f-mono: "Special Elite", "American Typewriter", "Courier New", monospace;
  --f-hand: "Caveat", cursive;
  --ease-sig: cubic-bezier(0.2, 0.9, 0.3, 1);
  --shadow-1: 0 1px 3px rgba(60, 42, 22, .22);
  --shadow-2: 0 4px 14px rgba(60, 42, 22, .26);
  --shadow-3: 0 12px 34px rgba(40, 26, 12, .34);
  --wrap: 1200px;
}

/* ── 基础 ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; /* 锚点跳转让出固定导航 */ }
body {
  font-family: var(--f-serif);
  color: var(--paper-200);
  background: var(--night);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
em { font-style: normal; }
[hidden] { display: none !important; }
:focus-visible { outline: 2.5px solid var(--brass-d); outline-offset: 3px; }

/* 全页色温底层：JS 逐帧插值 background-color */
#bg { position: fixed; inset: 0; z-index: -2; background: var(--night); }
/* 纸纹噪点覆层 */
#grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: url("../img/grain.webp"); background-size: 480px;
  opacity: .14; mix-blend-mode: overlay;
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); }
.wrap-narrow { max-width: 820px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }

h1, h2, h3 { font-weight: 700; letter-spacing: .02em; }
h2 { font-size: clamp(30px, 4.6vw, 52px); line-height: 1.25; }
.section-sub { color: var(--ink-300); margin-top: 14px; font-size: clamp(15px, 1.6vw, 18px); }

.kicker {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .32em;
  color: var(--brass); text-transform: uppercase; margin-bottom: 18px;
}
.kicker-ink { color: var(--brass-ink); }
#hero .kicker { text-shadow: 0 1px 8px rgba(10, 8, 6, .85), 0 0 3px rgba(10, 8, 6, .9); /* 压过视频亮部 */ }

/* ── 按钮（印章红 · 全站唯一强调色） ── */
.btn {
  display: inline-block; font-family: var(--f-serif); font-weight: 700;
  font-size: 17px; letter-spacing: .14em; text-align: center;
  padding: 14px 34px; border-radius: 3px;
  transition: transform .22s var(--ease-sig), background .22s, box-shadow .22s;
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn-primary {
  background: var(--blood); color: var(--paper-100);
  box-shadow: var(--shadow-2), inset 0 0 0 1px rgba(250, 245, 232, .18);
}
.btn-primary:hover { background: var(--blood-d); box-shadow: var(--shadow-3); }
.btn-ghost {
  color: var(--paper-200);
  box-shadow: inset 0 0 0 1.5px rgba(242, 234, 212, .5);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--paper-200); background: rgba(242, 234, 212, .06); }
.btn-sm { font-size: 14px; padding: 9px 20px; }
.btn-lg { font-size: 19px; padding: 17px 48px; }

/* ── 导航 ── */
#nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: clamp(16px, 4vw, 40px);
  background: rgba(10, 8, 6, .68);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(184, 153, 104, .18);
}
.nav-brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 17px; letter-spacing: .1em; }
.agency-seal {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: inline-grid; place-items: center;
  border: 2px solid var(--blood); outline: 1px solid color-mix(in srgb, var(--blood), transparent 30%);
  outline-offset: -5px; color: var(--blood); font-family: var(--f-serif); font-weight: 900; font-size: 24px;
  transform: rotate(-4deg); filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.agency-seal-sm { width: 34px; height: 34px; font-size: 19px; }
.agency-wordmark {
  display: inline-block; padding: 7px 9px;
  border: 2px solid var(--blood); outline: 1px solid color-mix(in srgb, var(--blood), transparent 30%);
  outline-offset: -5px; color: var(--blood); font-family: var(--f-serif); font-weight: 900;
  font-size: 12px; line-height: 1; letter-spacing: .12em; white-space: nowrap;
}

/* ── 阅读进度 · 进度带 ── */
#progress {
  position: fixed; left: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 50;
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(10, 8, 6, .72); backdrop-filter: blur(10px);
  border: 1px solid rgba(184, 153, 104, .3); border-radius: 3px;
  padding: 8px 14px; min-width: 132px;
  transition: opacity .4s;
}
.progress-label { font-family: var(--f-mono); font-size: 12px; letter-spacing: .2em; color: var(--paper-300); }
.progress-label.is-final { color: #e05c4a; }
.progress-track { display: block; height: 3px; background: rgba(184, 153, 104, .25); border-radius: 2px; overflow: hidden; }
.progress-track i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--brass), var(--blood)); transition: transform .2s linear; }

/* ════ 第一幕 · 街头 ════ */
#hero { position: relative; min-height: 100dvh; display: flex; align-items: flex-end; overflow: hidden; }
.hero-bg, .hero-bg img, .hero-media, .hero-rain, .hero-vignette { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-bg img, .hero-media { object-fit: cover; object-position: 42% 30%; transform: scale(1.06); will-change: transform; }
.hero-rain { object-fit: cover; mix-blend-mode: screen; opacity: .5; }
.hero-vignette {
  background:
    radial-gradient(ellipse 120% 90% at 50% 30%, transparent 40%, rgba(10, 8, 6, .78) 100%),
    linear-gradient(to top, rgba(10, 8, 6, .92) 0%, transparent 42%);
}
.hero-sign {
  position: absolute; right: clamp(2vw, 6vw, 9vw); top: 9vh;
  width: clamp(200px, 24vw, 360px);
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55));
  transform-origin: top center;
  transform: translateY(var(--par, 0px)) rotate(-1.4deg);
  animation: sign-in .9s var(--ease-sig) .15s both;
}
/* 无限动画按可见性门控：离屏不烧 GPU。落挂（sign-in）收尾角度＝摆动（sway）起始角度，无缝交棒 */
#hero.is-live .hero-sign {
  animation: sign-in .9s var(--ease-sig) .15s both, sway 7s ease-in-out 1.05s infinite alternate;
}
@keyframes sign-in {
  from { opacity: 0; transform: translateY(calc(var(--par, 0px) - 30px)) rotate(-5deg); }
  to { opacity: 1; transform: translateY(var(--par, 0px)) rotate(-1.4deg); }
}
@keyframes sway {
  from { transform: translateY(var(--par, 0px)) rotate(-1.4deg); }
  to { transform: translateY(var(--par, 0px)) rotate(1.6deg); }
}
.hero-copy { position: relative; z-index: 2; padding: 0 clamp(20px, 7vw, 96px) clamp(72px, 12vh, 130px); max-width: 780px; }
.hero-copy h1 {
  font-size: clamp(56px, 9.5vw, 128px); line-height: 1.06; letter-spacing: .04em;
  text-shadow: 0 4px 34px rgba(0, 0, 0, .65);
}
/* 入场编排（一次性；from-only 关键帧保证禁动时呈自然终态） */
.hero-copy .kicker { animation: kick-wipe 1s steps(24, end) .5s both; }
@keyframes kick-wipe { from { clip-path: inset(0 100% 0 0); } }
.h1-line { display: inline-block; animation: rise-in .85s var(--ease-sig) both; }
h1 .h1-line:first-child { animation-delay: .2s; }
h1 .h1-line:last-child { animation-delay: .34s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(26px); filter: blur(5px); } }
.hero-sub { margin-top: 22px; font-size: clamp(16px, 1.9vw, 20px); color: var(--paper-300); max-width: 30em; text-shadow: 0 2px 12px rgba(0,0,0,.6); animation: rise-in .8s var(--ease-sig) .62s both; }
.hero-cta { display: flex; gap: 16px; margin-top: 34px; flex-wrap: wrap; animation: rise-in .8s var(--ease-sig) .78s both; }
.hero-rain { animation: rain-in 1.4s ease .4s both; }
@keyframes rain-in { from { opacity: 0; } }

/* ════ 迷你可玩局 ════ */
#case { padding: clamp(90px, 14vh, 150px) 0; }
#case h2, #case .section-sub { text-align: center; }
#case .section-sub { color: var(--ink-300); }

/* 纸张组件（沿用游戏 .paper 语法：老纸纹理 + 暖投影） */
.paper {
  position: relative; color: var(--ink-900);
  background: var(--paper-200) url("../img/paper.webp");
  background-size: 720px; background-blend-mode: multiply;
  border-radius: 3px; box-shadow: var(--shadow-3);
}
.case-card { margin-top: 46px; padding: clamp(24px, 4.5vw, 52px); }
.case-card::after { /* 折角 */
  content: ""; position: absolute; top: 0; right: 0; width: 34px; height: 34px;
  background: linear-gradient(225deg, var(--night) 0 49%, var(--paper-400) 50%, var(--paper-300) 100%);
  border-radius: 0 3px 0 4px;
}
.case-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.case-no { font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; color: var(--ink-500); }
.case-tag { font-family: var(--f-mono); font-size: 12px; letter-spacing: .22em; color: var(--blood); border: 1.5px solid currentColor; padding: 2px 10px; border-radius: 2px; opacity: .85; }
.case-surface { margin-top: 26px; font-size: clamp(19px, 2.4vw, 26px); font-weight: 700; line-height: 1.8; }

.case-qa { margin-top: 10px; }
.qa-row {
  position: relative; /* 墨尘定位锚 */
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 2px 11px; border-bottom: 1px dashed rgba(94, 79, 56, .35);
  animation: qa-in .5s var(--ease-sig);
}
@keyframes qa-in { from { opacity: 0; transform: translateY(14px); } }
.qa-q { font-family: var(--f-mono); font-size: 15px; color: var(--ink-700); }
.qa-stamp { height: 46px; width: auto; flex: none; transform-origin: center; animation: stamp-drop .42s var(--ease-sig) both; animation-delay: .34s; }
@keyframes stamp-drop {
  0% { opacity: 0; transform: scale(2.3) rotate(-12deg); }
  62% { opacity: 1; transform: scale(.93) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.case-card.thud, .beat-card.thud { animation: thud .3s var(--ease-sig); }
@keyframes thud { 40% { transform: translateY(2px) rotate(.15deg); } }

/* 落章墨尘：JS 在落章着纸瞬间撒出，动画毕自清 */
.ink-dust {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--blood-d); pointer-events: none; opacity: 0; z-index: 5;
  animation: dust-fly .75s ease-out forwards;
}
.ink-dust:nth-child(odd) { background: var(--brass-d); width: 2px; height: 2px; }
@keyframes dust-fly {
  0% { opacity: 0; transform: none; }
  12% { opacity: .85; }
  100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, -14px)); }
}

.case-questions { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.case-hint { font-size: 13px; color: var(--ink-500); letter-spacing: .1em; }
.q-chip {
  font-family: var(--f-mono); font-size: 15px; text-align: left;
  padding: 12px 18px; border-radius: 2px;
  background: rgba(250, 245, 232, .55); color: var(--ink-700);
  box-shadow: inset 0 0 0 1.5px rgba(94, 79, 56, .4), var(--shadow-1);
  transition: transform .2s var(--ease-sig), box-shadow .2s, opacity .2s;
}
.q-chip:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--ink-700), var(--shadow-2); }
.q-chip:disabled { opacity: .35; cursor: default; transform: none; }

.case-reveal-zone { margin-top: 30px; text-align: center; }
.case-reveal-btn { animation: qa-in .5s var(--ease-sig); }
.case-truth { text-align: left; border-top: 2px solid var(--blood); margin-top: 8px; padding-top: 20px; }
.truth-label { font-family: var(--f-mono); font-size: 12px; letter-spacing: .3em; color: var(--blood); margin-bottom: 12px; }
.truth-text { font-size: 16.5px; line-height: 2; color: var(--ink-700); min-height: 6em; }
.truth-text::after { content: "▌"; color: var(--blood); animation: caret 1s steps(1) infinite; }
.truth-text.typed-done::after { content: ""; }
@keyframes caret { 50% { opacity: 0; } }

.case-pivot { text-align: center; margin-top: 74px; }
.pivot-line { font-size: clamp(26px, 3.6vw, 40px); font-weight: 700; }
.pivot-sub { color: var(--ink-300); margin-top: 12px; }
.verdict-strip {
  list-style: none; display: flex; justify-content: center; gap: clamp(18px, 4vw, 44px);
  margin-top: 40px; flex-wrap: wrap;
}
.verdict-strip li { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-300); }
.verdict-strip img { height: 54px; width: auto; transition: transform .25s var(--ease-sig); opacity: 0; }
.case-pivot.in .verdict-strip img { animation: stamp-drop .45s var(--ease-sig) both; animation-delay: calc(.2s + var(--i, 0) * .13s); }
.verdict-strip li:hover img { transform: scale(1.12) rotate(-3deg); }

/* ════ 好汤难求 ════ */
#why { position: relative; padding: clamp(100px, 16vh, 180px) 0; overflow: hidden; }
.why-lamp {
  position: absolute; left: clamp(-30px, 3vw, 80px); bottom: 0;
  height: min(78vh, 640px); width: auto; opacity: .9;
  filter: drop-shadow(0 0 46px rgba(229, 200, 105, .28));
}
.why-copy { position: relative; padding-left: clamp(0px, 12vw, 170px); }
.why-list { list-style: none; margin-top: 40px; max-width: 34em; }
.why-list li {
  font-size: clamp(17px, 2vw, 21px); color: var(--paper-300);
  padding: 18px 0; border-bottom: 1px solid rgba(184, 153, 104, .2);
}
.why-turn { margin-top: 52px; font-size: clamp(24px, 3.4vw, 38px); font-weight: 700; line-height: 1.5; }
.why-turn em { color: var(--brass); }

/* ════ 推门 · 1932 ════ */
#door { position: relative; min-height: 100dvh; display: flex; align-items: flex-end; overflow: hidden; }
.door-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.door-overlay {
  position: relative; z-index: 2; width: 100%;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  padding: 0 clamp(20px, 6vw, 80px) clamp(48px, 8vh, 90px);
  background: linear-gradient(to top, rgba(10, 8, 6, .66), transparent);
}
.door-plaque { position: relative; width: clamp(240px, 30vw, 420px); }
.plaque-text {
  position: absolute; inset: 12% 10% 14% 10%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-weight: 700; font-size: clamp(19px, 2.4vw, 30px); letter-spacing: .18em;
  color: #3a2c14; text-shadow: 0 1px 0 rgba(255, 235, 190, .45), 0 -1px 1px rgba(30, 20, 6, .55);
}
.plaque-text small { font-family: var(--f-mono); font-size: clamp(8px, .8vw, 11px); letter-spacing: .24em; }
.door-quote {
  max-width: 430px; padding: 22px 26px; font-size: 15.5px; line-height: 2;
  color: var(--ink-700); transform: rotate(-.6deg);
}
/* 灯光渐次点亮编排：台灯（影片内）→ 门牌回光 → 邀请纸条浮起 */
#door .door-plaque {
  filter: brightness(.42) sepia(.12);
  transition: filter 1.6s ease .1s;
}
#door .door-quote {
  opacity: 0; transform: translateY(16px) rotate(-.6deg);
  transition: opacity .9s ease 1.4s, transform .9s var(--ease-sig) 1.4s;
}
#door.door-lit .door-plaque { filter: brightness(1) sepia(0) drop-shadow(0 0 34px rgba(229, 200, 105, .3)); }
#door.door-lit .door-quote { opacity: 1; transform: rotate(-.6deg); }
.paper-slip { background: var(--paper-300) url("../img/paper.webp"); background-size: 600px; background-blend-mode: multiply; border-radius: 2px; box-shadow: var(--shadow-2); }

/* ════ 玩法巡礼 · 钉屏分镜 ════ */
#play { position: relative; height: 560vh; }
.play-sticky {
  position: sticky; top: 0; height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 84px clamp(20px, 5vw, 56px) 40px;
}
.play-head { text-align: center; color: var(--ink-900); margin-bottom: 26px; }
.play-head .kicker { margin-bottom: 10px; }
.play-stage { position: relative; flex: 1; min-height: 0; max-width: var(--wrap); width: 100%; margin-inline: auto; }
.beat { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.beat.is-active { opacity: 1; pointer-events: auto; }
.beat-img {
  position: absolute; inset: 0; border-radius: 4px; overflow: hidden;
  box-shadow: var(--shadow-3), inset 0 0 0 1px rgba(139, 122, 78, .4);
  background: var(--night-2);
}
.beat-img img, .beat-img .beat-media { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 4.5s var(--ease-sig); }
.beat.is-active .beat-img img, .beat.is-active .beat-img .beat-media { transform: scale(1); }
.beat-card {
  position: absolute; left: clamp(14px, 3vw, 36px); bottom: clamp(14px, 3vw, 36px);
  max-width: min(420px, 82%); padding: 22px 26px 24px;
  transform: translateY(18px); opacity: 0;
  transition: transform .5s var(--ease-sig) .12s, opacity .5s ease .12s;
}
.beat.is-active .beat-card { transform: none; opacity: 1; }
.beat-no {
  display: inline-block; font-size: 15px; font-weight: 700; letter-spacing: .3em;
  color: var(--paper-100); background: var(--blood);
  padding: 3px 12px 3px 14px; border-radius: 2px; margin-bottom: 12px;
}
.beat-card p { font-size: 15.5px; color: var(--ink-700); }
.beat-quote { display: block; margin-top: 12px; font-family: var(--f-mono); font-size: 13px; color: var(--ink-500); letter-spacing: .1em; }
.beat-typed { min-height: 1.6em; }
.beat-typed.typing::after { content: "▌"; color: var(--blood); animation: caret 1s steps(1) infinite; }
.beat-stamp { height: 64px; width: auto; margin-top: 14px; }
.beat.is-active .beat-stamp { animation: stamp-drop .45s var(--ease-sig) .5s both; }
.beat-cork { background: var(--night-2) url("../img/cork.webp"); background-size: 420px; }
.beat-img img.cork-photo {
  position: absolute; width: 26%; height: auto; object-fit: contain;
  box-shadow: var(--shadow-3); border: 6px solid var(--paper-100); border-bottom-width: 26px;
}
.cork-photo.p1 { left: 9%; top: 12%; transform: rotate(-4deg); }
.cork-photo.p2 { left: 40%; top: 30%; transform: rotate(2.5deg); }
.cork-photo.p3 { right: 9%; top: 9%; transform: rotate(-1.5deg); }
.beat.is-active .cork-photo { animation: pin-in .5s var(--ease-sig) both; }
.beat.is-active .cork-photo.p2 { animation-delay: .15s; }
.beat.is-active .cork-photo.p3 { animation-delay: .3s; }
@keyframes pin-in { from { opacity: 0; transform: translateY(-16px) rotate(0deg); } }
.beat-final::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 60%, rgba(229, 200, 105, .22), transparent 65%); }
.beat-progressband { display: block; margin-top: 12px; font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .06em; color: var(--ink-500); }
.beat-progressband em { color: var(--blood); font-weight: 700; }
.play-dots { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.play-dots i { width: 26px; height: 3px; border-radius: 2px; background: rgba(94, 79, 56, .3); transition: background .3s; }
.play-dots i.on { background: var(--blood); }

/* ════ AI 后厨 ════ */
#kitchen { padding: clamp(90px, 14vh, 160px) 0; color: var(--ink-900); }
#kitchen h2, #kitchen .kicker, #kitchen .section-sub { text-align: center; }
.kitchen-wide { margin-top: 44px; border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-3); }
.line-scroller { margin-top: 26px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 18px 4px 26px; scrollbar-width: thin; scrollbar-color: var(--brass-d) transparent; }
.line-track {
  list-style: none; display: grid; grid-auto-flow: column; gap: 22px;
  grid-auto-columns: clamp(220px, 24vw, 280px);
  position: relative; counter-reset: station;
}
.line-track::before { /* 流水线虚线 */
  content: ""; position: absolute; left: 2%; right: 2%; top: 34%;
  border-top: 2px dashed rgba(139, 116, 64, .45); z-index: 0;
}
.station {
  position: relative; z-index: 1; scroll-snap-align: center;
  counter-increment: station; text-align: center;
}
.station::before {
  content: "工序 " counter(station); display: inline-block;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .26em;
  color: var(--brass-ink); margin-bottom: 10px;
}
.station img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px;
  box-shadow: var(--shadow-2), inset 0 0 0 1px rgba(139, 122, 78, .5);
  transition: transform .3s var(--ease-sig);
}
.station:hover img { transform: translateY(-6px) rotate(-.6deg); }
.station-cutout { object-fit: contain !important; background: var(--night-2); padding: 8%; }
.station h3 { margin-top: 14px; font-size: 19px; letter-spacing: .2em; }
.station p { margin-top: 6px; font-size: 14px; color: var(--ink-500); }

.kitchen-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin-top: 56px; text-align: center;
}
.stat dt { font-family: var(--f-mono); font-size: clamp(26px, 3.4vw, 40px); color: var(--blood); }
.stat dd { margin-top: 6px; font-size: 14px; color: var(--ink-500); letter-spacing: .14em; }
.frontdesk { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 60px; }
.desk-card { display: flex; gap: 20px; padding: 20px; align-items: center; }
.desk-card img { width: 132px; border-radius: 3px; flex: none; box-shadow: var(--shadow-1); }
.desk-card h3 { font-size: 18px; letter-spacing: .12em; }
.desk-card p { margin-top: 8px; font-size: 14.5px; color: var(--ink-500); }

/* ════ 汤源 ════ */
#soups { padding-bottom: clamp(90px, 13vh, 150px); }
.soups-band { position: relative; height: 62vh; min-height: 380px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.soups-band img, .soups-band .band-media {
  position: absolute; inset: -12% 0; width: 100%; height: 124%;
  object-fit: cover; will-change: transform;
}
.soups-band::after { content: ""; position: absolute; inset: 0; background: rgba(16, 11, 7, .44); }
.soups-band h2 { position: relative; z-index: 2; color: var(--paper-100); text-shadow: 0 4px 26px rgba(0, 0, 0, .7); }
.soups-grid {
  display: grid; grid-template-columns: 1.1fr 1.2fr 1fr; gap: 26px;
  margin-top: -54px; position: relative; z-index: 3;
}
.soup-cell { padding: 26px 26px 30px; }
.soup-cell h3 { font-size: 21px; letter-spacing: .16em; margin-top: 18px; }
.soup-cell p { margin-top: 10px; font-size: 15px; color: var(--ink-500); }
.soup-news { width: 78%; margin-inline: auto; filter: drop-shadow(0 10px 18px rgba(40, 26, 12, .35)); }
.poster-fan { display: flex; justify-content: center; }
.poster-fan img { width: 40%; filter: drop-shadow(0 10px 16px rgba(40, 26, 12, .4)); }
.poster-fan img:nth-child(1) { transform: rotate(-7deg) translateX(12%); }
.poster-fan img:nth-child(2) { transform: translateY(-4%); z-index: 2; }
.poster-fan img:nth-child(3) { transform: rotate(7deg) translateX(-12%); }
.soup-card-img { width: 82%; margin-inline: auto; filter: drop-shadow(0 10px 18px rgba(40, 26, 12, .35)); }
.soup-stat { display: block; margin-top: 10px; font-family: var(--f-mono); font-size: 12.5px; color: var(--brass-ink); }

/* ════ 侦探生涯 ════ */
#career { padding: clamp(80px, 12vh, 140px) 0; color: var(--ink-900); }
#career h2 { text-align: center; }
.career-collage {
  display: grid; gap: 26px; margin-top: 56px;
  grid-template-columns: repeat(12, 1fr); align-items: start;
}
.collage-license { grid-column: 1 / 4; transform: rotate(-2.4deg); position: relative; }
.collage-license img { filter: drop-shadow(0 14px 24px rgba(40, 26, 12, .4)); }
.license-name {
  position: absolute; left: 12%; right: 12%; top: 44%;
  text-align: center; font-family: var(--f-hand); font-size: clamp(26px, 2.4vw, 34px);
  color: var(--ink-700);
}
.license-name small {
  display: block; font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .3em; color: var(--ink-500); margin-bottom: 4px;
}
.collage-remark { grid-column: 4 / 9; padding: 26px 30px; transform: rotate(.5deg); }
.remark-label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .3em; color: var(--blood); }
.remark-text { font-family: var(--f-hand); font-size: clamp(24px, 2.6vw, 30px); line-height: 1.55; margin-top: 14px; color: var(--ink-700); }
.remark-sign { font-family: var(--f-hand); font-size: 21px; text-align: right; color: var(--ink-500); margin-top: 8px; }
.collage-radar { grid-column: 9 / 13; padding: 22px; text-align: center; transform: rotate(1.2deg); }
.collage-radar svg { width: 78%; margin-inline: auto; }
.radar-grid { fill: none; stroke: rgba(94, 79, 56, .35); stroke-width: 1; }
.radar-value { fill: rgba(185, 28, 28, .18); stroke: var(--blood); stroke-width: 2; }
.radar-axes { list-style: none; display: flex; justify-content: center; gap: 14px; font-size: 12.5px; letter-spacing: .2em; color: var(--ink-500); margin-top: 10px; flex-wrap: wrap; }
.collage-clips { grid-column: 1 / 6; list-style: none; display: flex; gap: 14px; flex-wrap: wrap; }
.clip {
  position: relative;
  font-family: var(--f-mono); font-size: 13.5px; letter-spacing: .12em;
  background: var(--paper-100) url("../img/paper.webp"); background-size: 500px; background-blend-mode: multiply;
  color: var(--ink-700); padding: 10px 18px 10px 38px; box-shadow: var(--shadow-1);
  transform: rotate(-1deg);
}
.clip::before { /* 主任红铅笔勾划（代替色条） */
  content: ""; position: absolute; left: 13px; top: 50%; width: 15px; height: 5px;
  margin-top: -3px; background: var(--blood); opacity: .72;
  border-radius: 46% 54% 48% 52% / 60% 46% 58% 42%;
  transform: rotate(-9deg);
}
.clip:nth-child(2) { transform: rotate(1.2deg); }
.clip:nth-child(3) { transform: rotate(-.4deg); }
.collage-shop { grid-column: 6 / 13; padding: 22px 28px; transform: rotate(-.5deg); }
.shop-label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .3em; color: var(--brass-ink); margin-bottom: 10px; }
.collage-shop p { font-size: 15.5px; color: var(--ink-700); }
.collage-shop em { color: var(--blood); font-weight: 700; }

/* ════ 卷宗背页 ════ */
#specs { padding: 0 clamp(20px, 5vw, 56px) clamp(90px, 13vh, 150px); }
.specs-card { max-width: 860px; margin-inline: auto; padding: clamp(28px, 5vw, 52px); }
.specs-title { font-family: var(--f-mono); font-size: 13px; letter-spacing: .34em; color: var(--ink-500); text-align: center; }
.specs-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 30px; text-align: center; }
.specs-cols h3 { font-size: 16px; letter-spacing: .3em; color: var(--blood); }
.specs-cols p { margin-top: 10px; font-family: var(--f-mono); font-size: 13.5px; line-height: 2.1; color: var(--ink-500); }
.specs-stamp { position: absolute; right: 26px; bottom: 20px; opacity: .85; transform: rotate(-8deg); }

/* ════ 入所邀请 ════ */
#join { padding: clamp(100px, 15vh, 170px) 0; text-align: center; }
#join h2 { margin-bottom: 10px; }
.join-envelope { position: relative; margin-top: 44px; border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-3); }
.env-img { transition: opacity .5s ease; }
.env-cracked { position: absolute; inset: 0; opacity: 0; }
.join-envelope.is-cracked .env-cracked { opacity: 1; }
.join-envelope.is-cracked .env-sealed { opacity: 0; }
.join-envelope.is-cracked { animation: thud .32s var(--ease-sig); }
/* V-CTA 火漆自裂成片层：文件就位即整层盖上（首帧＝封缄态），缺片时永不显形 */
.env-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .4s ease;
}
.join-envelope.env-has-video .env-video { opacity: 1; }
.join-envelope.is-filmed { animation: none; }
.env-hotspot {
  position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%);
  width: 128px; height: 128px; border-radius: 50%;
  display: grid; place-items: center;
}
.env-hotspot span {
  font-family: var(--f-mono); font-size: 13px; letter-spacing: .3em;
  color: var(--paper-100); background: rgba(10, 8, 6, .55);
  border: 1px solid rgba(242, 234, 212, .5); border-radius: 999px;
  padding: 10px 18px; backdrop-filter: blur(4px);
  transition: transform .25s var(--ease-sig), background .25s;
}
#join.is-live .env-hotspot span { animation: hotspot-pulse 2.4s ease-in-out infinite; }
.env-hotspot:hover span { transform: scale(1.08); background: rgba(139, 20, 16, .72); }
@keyframes hotspot-pulse { 50% { box-shadow: 0 0 0 14px rgba(242, 234, 212, .07); } }
.join-envelope.is-cracked .env-hotspot { display: none; }

.join-letter {
  max-width: 560px; margin: -46px auto 0; padding: 40px 44px 34px;
  text-align: left; transform: rotate(-.8deg);
  animation: letter-rise .7s var(--ease-sig) both;
}
@keyframes letter-rise { from { opacity: 0; transform: translateY(44px) rotate(-.8deg); } }
.letter-text { font-size: 17px; line-height: 2.2; color: var(--ink-700); }
.letter-sign { margin-top: 18px; text-align: right; font-family: var(--f-hand); font-size: 24px; color: var(--ink-500); }
.letter-stamp { position: absolute; right: 22px; bottom: 52px; height: 72px; width: auto; animation: stamp-drop .5s var(--ease-sig) .55s both; }
.join-cta { margin-top: 48px; animation: qa-in .6s var(--ease-sig) both; }
.join-note { margin-top: 14px; font-size: 13.5px; color: var(--ink-300); letter-spacing: .08em; }

/* ════ 页脚 ════ */
#footer { border-top: 1px solid rgba(184, 153, 104, .22); padding: 56px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; align-items: start; }
.footer-brand { display: flex; align-items: center; gap: 16px; }
.footer-quote { font-size: 15px; color: var(--ink-300); font-style: normal; }
.footer-dir { display: grid; gap: 8px; }
.footer-dir div { display: flex; gap: 16px; align-items: baseline; }
.footer-dir dt { font-family: var(--f-mono); font-size: 12px; letter-spacing: .2em; color: var(--brass); flex: none; width: 30px; }
.footer-dir dd { font-size: 13.5px; color: var(--ink-300); }
.footer-credits { margin-top: 42px; font-size: 12px; line-height: 2; color: var(--ink-300); text-align: center; }

/* ── 滚动渐显 ── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s var(--ease-sig); }
.reveal.in { opacity: 1; transform: none; }

/* ── 响应式 ── */
@media (max-width: 900px) {
  .kitchen-stats { grid-template-columns: repeat(2, 1fr); gap: 26px 12px; }
  .frontdesk { grid-template-columns: 1fr; }
  .soups-grid { grid-template-columns: 1fr; margin-top: -40px; }
  .career-collage { grid-template-columns: 1fr; }
  .collage-license, .collage-remark, .collage-radar, .collage-clips, .collage-shop { grid-column: auto; }
  .collage-license { max-width: 240px; }
  .footer-grid { grid-template-columns: 1fr; }
  .specs-cols { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 640px) {
  .btn-sm { padding: 12px 22px; } /* 触点 ≥ 40px */
  .hero-sign { display: none; }
  .hero-copy { padding-bottom: 88px; }
  #progress { display: none; }
  .why-lamp { opacity: .3; }
  .why-copy { padding-left: 0; }
  .door-overlay { justify-content: center; }
  .beat-card { max-width: 92%; left: 4%; bottom: 4%; padding: 16px 18px; }
  .beat-stamp { height: 48px; }
  #play { height: 620vh; }
  .join-letter { padding: 28px 24px; }
  .letter-stamp { height: 56px; bottom: 40px; }
}

/* ── 截图核验模式（?static=1）：移除一切动画与过渡，元素呈自然终态 ── */
html.static-capture *, html.static-capture *::before, html.static-capture *::after {
  animation: none !important;
  transition: none !important;
}
html.static-capture .verdict-strip img { opacity: 1; }
html.static-capture #door .door-plaque { filter: none; }
html.static-capture #door .door-quote { opacity: 1; transform: rotate(-.6deg); }

/* ── 降级：用户偏好减少动效 ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-sign, .hero-copy .kicker, .h1-line, .hero-sub, .hero-cta, .hero-rain { animation: none !important; }
  .hero-bg img, .hero-media { transform: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .qa-stamp, .beat-stamp, .letter-stamp, .cork-photo, .join-letter, .join-cta, .case-reveal-btn { animation: none !important; opacity: 1; }
  .verdict-strip img { animation: none !important; opacity: 1; }
  #door .door-plaque { filter: none; transition: none; }
  #door .door-quote { opacity: 1; transform: rotate(-.6deg); transition: none; }
  .ink-dust { display: none; }
  .beat-typed.typing::after { content: ""; }
  .env-hotspot span { animation: none; }
  .beat-img img, .beat-img .beat-media { transition: none; }
  .truth-text::after { content: ""; }
}