/* ══════════════════════════════════════════════════════════════
   时间折叠 · TimeFold — 暗房档案版
   色彩系统：暗房的「暗」做底，Logo 的「光」做色
   彩色永远只以光的形式出现（辉光 / 渐变光带 / 轮廓光），永不平涂
   ══════════════════════════════════════════════════════════════ */

:root {
  /* 基底 · 暗房 */
  --bg-deep: #07080D;
  --bg: #0B0D15;
  --bg-raise: #151824;
  --bg-night-warm: #100E16;

  /* 光源 · Logo 光谱 */
  --pink: #F2A7C9;
  --blue: #8FB4F2;
  --purple: #BE9EF2;
  --spectrum: linear-gradient(100deg, var(--pink), var(--blue) 52%, var(--purple));

  /* 墨色 · 文字 */
  --ink: #EFEDE7;
  --ink-2: #A7A4B3;
  --ink-3: #666373;

  /* 标本专属光 */
  --l-accumulate: #E9C477;
  --l-night: #E89B63;
  --l-delay: #D96A5A;
  --l-future: #DDE1EC;
  --l-seal: #BE9EF2;

  /* 时间感知变量（由 JS 按时段微调） */
  --lift: 0;                 /* 0=标准夜, 1=白日提亮 */
  --ambient: rgba(143, 180, 242, 0.05);
  --torch-size: 780px;
  --torch-strength: 0.72;

  --font-ui: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-poem: "Songti SC", "STSong", "Noto Serif CJK SC", "SimSun", serif;

  --ease-fold: cubic-bezier(0.7, 0, 0.2, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── 时段变体 ─────────────────────────────── */
body[data-daytime="morning"] { --ambient: rgba(143,180,242,.09); --lift: .35; --torch-strength: .66; }
body[data-daytime="day"]     { --ambient: rgba(143,180,242,.12); --lift: .55; --torch-strength: .6; --torch-size: 860px; }
body[data-daytime="dusk"]    { --ambient: rgba(232,155, 99,.10); --lift: .25; }
body[data-daytime="night"]   { --ambient: rgba(143,180,242,.05); }
body[data-daytime="deep-night"] {
  --bg: var(--bg-deep);
  --ambient: rgba(232,155, 99,.05);
  --torch-strength: .84;
  --torch-size: 640px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.75;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 1.2s ease;
}
::selection { background: rgba(190, 158, 242, .25); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }

/* 中文排版：标点不悬空，长句优先平衡，关键短语不拆成孤字。 */
:where(h1, h2, h3, p, blockquote, dt, dd, label, a, button) {
  word-break: normal;
  overflow-wrap: normal;
  line-break: strict;
}
:where(h1, h2, h3) { text-wrap: balance; }
:where(p, blockquote, dd) { text-wrap: pretty; }
.nowrap-phrase { white-space: nowrap; }
.title-line { display: block; }

/* ── 氛围层 ───────────────────────────────── */
.grain {
  position: fixed; inset: 0; z-index: 24;
  width: 100%; height: 100%;
  pointer-events: none; opacity: .5;
  mix-blend-mode: overlay;
}
.aurora { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.aurora i {
  position: absolute; width: 55vmax; height: 55vmax; border-radius: 50%;
  filter: blur(90px); opacity: calc(.65 + var(--lift) * .3);
}
.aurora i:nth-child(1) { top: -22vmax; left: -14vmax; background: radial-gradient(circle, rgba(242,167,201,.14), transparent 62%); animation: drift-a 26s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { bottom: -26vmax; right: -16vmax; background: radial-gradient(circle, rgba(143,180,242,.17), transparent 62%); animation: drift-b 32s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { top: 30vh; left: 44vw; width: 40vmax; height: 40vmax; background: radial-gradient(circle, rgba(190,158,242,.12), transparent 60%); animation: drift-a 38s ease-in-out infinite alternate-reverse; }
@keyframes drift-a { to { transform: translate(6vmax, 4vmax) scale(1.12); } }
@keyframes drift-b { to { transform: translate(-5vmax, -6vmax) scale(1.08); } }

.vignette {
  position: fixed; inset: 0; z-index: 22; pointer-events: none;
  background: radial-gradient(ellipse 120% 100% at 50% 42%, transparent 46%, rgba(7,8,13,.62) 100%);
}

/* 光标手电：一束柔光，照亮才能看见（盖在内容之上、UI 之下） */
.torch {
  position: fixed; inset: 0; z-index: 20; pointer-events: none;
  background:
    radial-gradient(calc(var(--torch-size) * .52) circle at var(--tx, 50%) var(--ty, 42%),
      rgba(255, 246, 232, .095), rgba(255, 246, 232, .03) 48%, transparent 72%),
    radial-gradient(var(--torch-size) circle at var(--tx, 50%) var(--ty, 42%),
      transparent 0%, transparent 34%,
      rgba(4,5,9, calc(var(--torch-strength) * .5)) 66%,
      rgba(4,5,9, var(--torch-strength)) 100%);
  transition: opacity .8s ease;
}
body[data-route="entry"] .torch,
body.no-torch .torch { opacity: 0; }
@media (hover: none), (max-width: 760px) { .torch { display: none; } }

/* ── ENTRY · 入口仪式 ─────────────────────── */
.entry {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg-deep);
  transition: opacity 1.1s var(--ease-soft), visibility 1.1s;
}
.entry.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.entry__hud {
  position: absolute; top: 28px; left: 34px; right: 34px;
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; letter-spacing: .34em; color: var(--ink-3);
}
.entry__hud i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(239,237,231,.14), transparent); }
.entry__core { position: relative; width: 220px; height: 220px; display: grid; place-items: center; margin-bottom: 44px; }
.entry__mark { width: 108px; height: 108px; object-fit: contain; filter: drop-shadow(0 0 34px rgba(190,158,242,.5)); animation: mark-breathe 5s ease-in-out infinite; }
@keyframes mark-breathe { 50% { filter: drop-shadow(0 0 54px rgba(242,167,201,.65)); transform: scale(1.03); } }
.entry__halo { position: absolute; inset: -30px; border-radius: 50%; background: radial-gradient(circle, rgba(190,158,242,.16), transparent 64%); }
.entry__ring { position: absolute; border-radius: 50%; border: 1px solid transparent; }
.entry__ring--1 { inset: 0; border-top-color: rgba(242,167,201,.55); border-right-color: rgba(143,180,242,.2); animation: spin 9s linear infinite; }
.entry__ring--2 { inset: 22px; border-bottom-color: rgba(190,158,242,.5); border-left-color: rgba(143,180,242,.18); animation: spin 14s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.entry__copy { text-align: center; }
.entry__en { font-size: 13px; letter-spacing: .6em; text-indent: .6em; color: var(--ink-3); text-transform: uppercase; }
.entry__zh {
  margin: 10px 0 12px; font-family: var(--font-poem); font-weight: 600;
  font-size: clamp(40px, 6vw, 62px); letter-spacing: .14em; text-indent: .14em;
}
.entry__sub { color: var(--ink-2); font-size: 15px; letter-spacing: .12em; }
.enter-btn {
  margin-top: 40px; display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 34px; border-radius: 999px;
  font-size: 15px; letter-spacing: .3em; text-indent: .3em; color: var(--ink);
  border: 1px solid rgba(239,237,231,.18);
  background: linear-gradient(100deg, rgba(242,167,201,.08), rgba(143,180,242,.08), rgba(190,158,242,.08));
  transition: border-color .5s, box-shadow .5s, transform .5s var(--ease-soft);
}
.enter-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .5s var(--ease-soft); }
.enter-btn:hover { border-color: rgba(190,158,242,.55); box-shadow: 0 0 44px rgba(190,158,242,.22); transform: translateY(-2px); }
.enter-btn:hover svg { transform: translateX(4px); }
.entry__hint { margin-top: 26px; font-size: 12px; letter-spacing: .2em; color: var(--ink-3); animation: hint-fade 3.2s ease-in-out infinite; }
@keyframes hint-fade { 50% { opacity: .35; } }
.entry__loading { position: absolute; bottom: 34px; font-size: 12px; letter-spacing: .3em; color: var(--ink-3); }
.entry__loading.is-hidden { display: none; }

/* ── TOP BAR ──────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 55;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 34px;
  opacity: 0; transform: translateY(-12px);
  transition: opacity .9s var(--ease-soft) .3s, transform .9s var(--ease-soft) .3s;
}
body.is-in .topbar { opacity: 1; transform: none; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(190,158,242,.5)); }
.brand__name { display: flex; flex-direction: column; line-height: 1.25; }
.brand__name strong { font-size: 15px; letter-spacing: .18em; font-weight: 600; }
.brand__name small { font-size: 10px; letter-spacing: .32em; color: var(--ink-3); text-transform: uppercase; }
.nav { display: flex; gap: 34px; }
.nav a { position: relative; font-size: 14px; letter-spacing: .12em; color: var(--ink-2); padding: 6px 0; transition: color .4s; }
.nav a i { font-style: normal; font-size: 10px; color: var(--ink-3); margin-right: 7px; letter-spacing: .1em; transition: color .4s; }
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--spectrum); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-soft);
}
.nav a:hover, .nav a.is-active { color: var(--ink); }
.nav a.is-active::after { transform: scaleX(1); }
.topbar__right { display: flex; align-items: center; gap: 18px; }
.daytime { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .14em; color: var(--ink-3); cursor: default; }
.daytime__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px var(--blue); }
body[data-daytime="dusk"] .daytime__dot,
body[data-daytime="deep-night"] .daytime__dot { background: var(--l-night); box-shadow: 0 0 10px var(--l-night); }
.burger {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
}
.burger span { width: 24px; height: 1.5px; background: var(--ink); transition: transform .4s, opacity .4s; }
.burger:focus-visible {
  outline: 1px solid rgba(190, 158, 242, .78);
  outline-offset: 4px;
  border-radius: 3px;
}
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* 侧标 */
.fold-tag {
  position: fixed; left: 34px; bottom: 96px; z-index: 30;
  display: flex; flex-direction: column; gap: 3px;
  font-size: 11px; letter-spacing: .22em; color: var(--ink-3);
  writing-mode: vertical-rl; transform: rotate(180deg);
  opacity: 0; transition: opacity 1s ease 1s;
}
body.is-in .fold-tag { opacity: .9; }
.fold-tag strong { color: var(--ink-2); font-weight: 500; }

/* Drawer（移动端） */
.drawer {
  position: fixed; inset: 0; z-index: 50; background: rgba(7,8,13,.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 12vw;
  opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s;
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer a { display: flex; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(239,237,231,.07); font-size: 22px; }
.drawer a b { font-size: 11px; color: var(--ink-3); font-weight: 400; }
.drawer a span i { display: block; font-style: normal; font-size: 11px; letter-spacing: .28em; color: var(--ink-3); text-transform: uppercase; }
.drawer__mail { margin-top: 34px; font-size: 15px !important; color: var(--ink-2); border-bottom: 0 !important; }

/* ── STAGE / 折叠翻页 ─────────────────────── */
.stage { position: fixed; inset: 0; z-index: 10; perspective: 1700px; perspective-origin: 50% 40%; }
.scene {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: rgba(239,237,231,.14) transparent;
  visibility: hidden; pointer-events: none;
  transform-origin: 50% 0%;
  background:
    radial-gradient(ellipse 90% 62% at 50% 0%, var(--ambient), transparent 70%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 90%, transparent),
      color-mix(in srgb, var(--bg) 96%, transparent) 30%,
      color-mix(in srgb, var(--bg) 96%, transparent) 72%,
      color-mix(in srgb, var(--bg-deep) 88%, transparent));
  transition: background 1.2s ease;
}
.scene.is-active { visibility: visible; pointer-events: auto; }
/* 折起离场：当前页像纸一样向上折走 */
.scene.is-folding-out { animation: fold-out .85s var(--ease-fold) forwards; }
.scene.is-folding-in  { animation: fold-in .85s var(--ease-fold) forwards; z-index: 2; }
@keyframes fold-out {
  0%   { transform: rotateX(0deg); opacity: 1; filter: brightness(1); }
  100% { transform: rotateX(-84deg); opacity: 0; filter: brightness(.35); }
}
@keyframes fold-in {
  0%   { transform: rotateX(70deg) translateY(6vh); opacity: 0; filter: brightness(.4); }
  100% { transform: rotateX(0deg) translateY(0); opacity: 1; filter: brightness(1); }
}
/* 折痕高光 */
.scene::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: 120px; z-index: 2;
  background: linear-gradient(180deg, rgba(239,237,231,.06), transparent);
  opacity: 0; pointer-events: none; transition: opacity .4s;
}
.scene.is-folding-out::before, .scene.is-folding-in::before { opacity: 1; }

.scene__inner { position: relative; z-index: 5; min-height: 100%; display: flex; flex-direction: column; padding: 120px 8vw 90px; }
.scene-head__kicker { font-size: 11px; letter-spacing: .4em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 18px; }
.scene-head h2, .idea-hero h2 {
  font-family: var(--font-poem); font-weight: 600;
  font-size: clamp(30px, 4.2vw, 46px); letter-spacing: .06em; line-height: 1.5;
}
.scene-head__lead { margin-top: 14px; max-width: 560px; color: var(--ink-2); font-size: 15px; }
.scene-head__night { margin-top: 18px; font-size: 13px; letter-spacing: .1em; color: var(--l-night); text-shadow: 0 0 18px rgba(232,155,99,.4); }

.eyebrow { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .4em; color: var(--ink-3); text-transform: uppercase; }
.eyebrow i { width: 44px; height: 1px; background: var(--spectrum); opacity: .8; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 28px; border-radius: 999px; font-size: 14px; letter-spacing: .14em;
  transition: transform .45s var(--ease-soft), box-shadow .45s, border-color .45s, background .45s;
}
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; transition: transform .45s var(--ease-soft); }
.btn:hover svg { transform: translateX(4px); }
.btn--primary {
  color: #0B0D15; font-weight: 600;
  background: var(--spectrum);
  box-shadow: 0 8px 34px rgba(143,180,242,.22);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 48px rgba(190,158,242,.34); }
.btn--ghost { color: var(--ink-2); border: 1px solid rgba(239,237,231,.16); }
.btn--ghost:hover { color: var(--ink); border-color: rgba(190,158,242,.5); transform: translateY(-2px); }

/* ── INDEX ────────────────────────────────── */
.scene--index .scene__inner { justify-content: center; max-width: 1200px; margin: 0 auto; width: 100%; }
.index__title {
  margin: 26px 0 22px;
  font-family: var(--font-poem); font-weight: 600;
  font-size: clamp(42px, 6.4vw, 84px); line-height: 1.32; letter-spacing: .04em;
}
.index__title .ln { display: block; text-wrap: balance; }
.index__title em {
  font-style: normal; position: relative;
  background: var(--spectrum);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 44px rgba(190,158,242,.3);
}
.index__intro { color: var(--ink-2); font-size: 16px; letter-spacing: .06em; }
.index__cta { display: flex; gap: 18px; margin-top: 46px; flex-wrap: wrap; }
.index__note { margin-top: 64px; font-size: 12px; letter-spacing: .22em; color: var(--ink-3); animation: hint-fade 4s ease-in-out infinite; }
.scroll-hint {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .3em; color: var(--ink-3); transition: color .4s;
}
.scroll-hint:hover { color: var(--ink-2); }
.scroll-hint i { width: 1px; height: 40px; background: linear-gradient(180deg, var(--purple), transparent); animation: hint-drop 2.2s var(--ease-soft) infinite; }
@keyframes hint-drop { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ── IDEA · 理念叙事 ──────────────────────── */
.scene--idea .scene__inner { max-width: 880px; margin: 0 auto; width: 100%; gap: 0; }
.idea-hero { padding: 6vh 0 12vh; }
.idea-hero__lead { margin-top: 24px; color: var(--ink-2); font-size: 16px; }
.tenet { position: relative; padding: 11vh 0; border-top: 1px solid rgba(239,237,231,.07); }
.tenet__no { font-family: var(--font-poem); font-size: 14px; letter-spacing: .5em; color: var(--purple); text-shadow: 0 0 20px rgba(190,158,242,.5); }
.tenet h3 { margin: 16px 0 18px; font-family: var(--font-poem); font-size: clamp(26px, 3.4vw, 36px); font-weight: 600; letter-spacing: .1em; }
.tenet__line { color: var(--ink-2); font-size: 15.5px; }
.tenet__demo { margin-top: 34px; }

/* 其一：真实时刻 */
.tenet__demo--moments { display: flex; flex-wrap: wrap; gap: 12px; }
.tenet__demo--moments span {
  padding: 9px 18px; border-radius: 999px; font-size: 13px; letter-spacing: .08em; color: var(--ink-2);
  border: 1px solid rgba(239,237,231,.1); background: rgba(21,24,36,.5);
  transition: border-color .5s, color .5s, box-shadow .5s;
}
.tenet__demo--moments span:hover { color: var(--ink); border-color: rgba(143,180,242,.45); box-shadow: 0 0 26px rgba(143,180,242,.14); }

/* 其二：删繁就简 */
.tenet__demo--strip { font-family: var(--font-poem); font-size: clamp(18px, 2.4vw, 24px); letter-spacing: .04em; line-height: 2; }
.tenet__demo--strip .keep { color: var(--ink); }
.tenet__demo--strip .keep { white-space: nowrap; }
.tenet__demo--strip .drop { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(217,106,90,.7); text-decoration-thickness: 1px; opacity: .55; transition: opacity 1.6s ease, filter 1.6s ease; }
.tenet.is-seen .tenet__demo--strip .drop { opacity: .12; filter: blur(1px); }

/* 其三：按住显影 */
.tenet__demo--develop { user-select: none; -webkit-user-select: none; }
.develop-plate {
  position: relative; width: min(420px, 100%); aspect-ratio: 4 / 3; border-radius: 10px;
  background: #0a0708; border: 1px solid rgba(217,106,90,.22);
  display: grid; place-items: center; overflow: hidden; cursor: pointer;
  box-shadow: inset 0 0 60px rgba(217,106,90,.06);
  touch-action: none;
}
.develop-plate__img {
  position: absolute; inset: 14%; border-radius: 6px;
  background:
    radial-gradient(circle at 32% 36%, rgba(242,167,201,.8), transparent 42%),
    radial-gradient(circle at 68% 62%, rgba(143,180,242,.75), transparent 46%),
    radial-gradient(circle at 52% 84%, rgba(190,158,242,.55), transparent 40%),
    #11141f;
  filter: blur(16px) brightness(.16) saturate(.4);
  opacity: .25; transform: scale(1.06);
  transition: filter 2.6s ease, opacity 2.6s ease, transform 2.6s ease;
}
.develop-plate.is-developing .develop-plate__img { filter: blur(0) brightness(1) saturate(1.1); opacity: 1; transform: scale(1); }
.develop-plate__hint { position: relative; z-index: 2; font-size: 12px; letter-spacing: .3em; color: rgba(217,106,90,.9); text-shadow: 0 0 14px rgba(217,106,90,.6); transition: opacity .6s; }
.develop-plate.is-developing .develop-plate__hint { opacity: 0; }
.develop-caption { margin-top: 16px; font-size: 13px; letter-spacing: .12em; color: var(--l-delay); opacity: 0; transform: translateY(6px); transition: opacity 1.2s ease .8s, transform 1.2s ease .8s; }
.tenet__demo--develop.is-developed .develop-caption { opacity: 1; transform: none; }

/* 其四：持续生长 */
.tenet__demo--grow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.grow-cell {
  width: 34px; height: 44px; border-radius: 6px;
  border: 1px dashed rgba(239,237,231,.16);
  transition: border-color .6s, box-shadow .6s, background .6s;
}
.grow-cell.is-lit {
  border: 1px solid rgba(233,196,119,.5);
  background: linear-gradient(160deg, rgba(233,196,119,.16), rgba(190,158,242,.1));
  box-shadow: 0 0 22px rgba(233,196,119,.14);
}
.grow-cell--more { display: grid; place-items: center; border: 0; color: var(--ink-3); font-size: 18px; }
.tenet.is-seen .grow-cell { animation: cell-pop .7s var(--ease-soft) both; }
.tenet.is-seen .grow-cell:nth-child(2) { animation-delay: .08s; } .tenet.is-seen .grow-cell:nth-child(3) { animation-delay: .16s; }
.tenet.is-seen .grow-cell:nth-child(4) { animation-delay: .24s; } .tenet.is-seen .grow-cell:nth-child(5) { animation-delay: .32s; }
.tenet.is-seen .grow-cell:nth-child(6) { animation-delay: .4s; } .tenet.is-seen .grow-cell:nth-child(7) { animation-delay: .48s; }
.tenet.is-seen .grow-cell:nth-child(8) { animation-delay: .56s; } .tenet.is-seen .grow-cell:nth-child(9) { animation-delay: .64s; }
.tenet.is-seen .grow-cell:nth-child(10) { animation-delay: .72s; }
@keyframes cell-pop { from { transform: translateY(14px); opacity: 0; } }

.idea-outro { padding: 12vh 0 8vh; text-align: center; border-top: 1px solid rgba(239,237,231,.07); }
.idea-outro p { font-family: var(--font-poem); font-size: clamp(18px, 2.4vw, 24px); letter-spacing: .08em; color: var(--ink-2); margin-bottom: 34px; }

/* 滚动显影 */
[data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 1.1s var(--ease-soft), transform 1.1s var(--ease-soft); }
[data-reveal].is-seen { opacity: 1; transform: none; }

/* ── FOLDS · 标本柜 ───────────────────────── */
.scene--folds .scene__inner { max-width: 1280px; margin: 0 auto; width: 100%; }
.cabinet {
  margin-top: 54px;
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.specimen {
  position: relative; min-height: 300px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(165deg, rgba(21,24,36,.85), rgba(11,13,21,.9));
  border: 1px solid color-mix(in srgb, var(--light, #BE9EF2) 15%, rgba(239,237,231,.06));
  padding: 24px;
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft), border-color .6s, box-shadow .6s;
}
.specimen.is-seen { opacity: 1; transform: none; }
.specimen:hover { border-color: color-mix(in srgb, var(--light, var(--purple)) 42%, transparent); box-shadow: 0 18px 60px rgba(0,0,0,.5), 0 0 44px color-mix(in srgb, var(--light, var(--purple)) 12%, transparent); }
.specimen__id { font-size: 11px; letter-spacing: .3em; color: var(--ink-3); }
.specimen__word {
  margin-top: 8px; font-family: var(--font-poem); font-size: 26px; letter-spacing: .3em; color: var(--ink);
  text-shadow: 0 0 26px color-mix(in srgb, var(--light, #BE9EF2) 38%, transparent);
}
.specimen__stage {
  position: relative; flex: 1; margin: 18px 0; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center; min-height: 120px;
  background:
    radial-gradient(ellipse 78% 68% at 50% 46%, color-mix(in srgb, var(--light, #BE9EF2) 9%, transparent), transparent 78%),
    rgba(7,8,13,.6);
}
.specimen__riddle {
  font-family: var(--font-poem); font-size: 15px; letter-spacing: .1em; color: var(--ink-2);
  filter: blur(5px); opacity: .25;
  transition: filter 1.8s ease, opacity 1.8s ease;
}
.specimen.is-developed .specimen__riddle { filter: blur(0); opacity: 1; }
.specimen__meta { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.specimen__status { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .24em; color: var(--ink-3); }
.specimen__status i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--light, var(--purple));
  box-shadow: 0 0 10px var(--light, var(--purple));
  animation: status-breathe 3.4s ease-in-out infinite;
}
@keyframes status-breathe { 50% { opacity: .35; } }
.specimen__hold { font-size: 10px; letter-spacing: .2em; color: var(--ink-3); opacity: 0; transition: opacity .5s; }
.specimen:hover .specimen__hold { opacity: .8; }
.specimen__link {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center;
  background: rgba(7,8,13,.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .5s;
  font-size: 14px; letter-spacing: .2em; color: var(--ink);
}
.specimen.is-live:hover .specimen__link { opacity: 1; pointer-events: auto; }
.specimen.is-live { cursor: pointer; }
.specimen.is-live .specimen__status i { animation: none; }

/* 深夜休眠 */
body[data-daytime="deep-night"] .specimen:not([data-key="night"]) .specimen__stage > * { animation-play-state: paused !important; opacity: .3; }
body[data-daytime="deep-night"] .specimen:not([data-key="night"]) { border-color: rgba(239,237,231,.04); }
body[data-daytime="deep-night"] .specimen[data-key="night"] { border-color: rgba(232,155,99,.4); box-shadow: 0 0 60px rgba(232,155,99,.12); }

/* 标本内部的小世界 */
.mini { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }

/* 001 积累：光点缓缓堆叠 */
.mini--accumulate { align-items: end; padding-bottom: 18px; }
.mini--accumulate .coin {
  position: absolute; bottom: 18px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--l-accumulate); box-shadow: 0 0 12px rgba(233,196,119,.8);
  animation: coin-drop 3.6s ease-in infinite;
}
@keyframes coin-drop {
  0% { transform: translateY(-70px) scale(.6); opacity: 0; }
  18% { opacity: 1; }
  60% { transform: translateY(0) scale(1); }
  85%, 100% { transform: translateY(0) scale(1); opacity: 0; }
}
.mini--accumulate .pile { width: 52px; height: 16px; border-radius: 50%; background: radial-gradient(ellipse, rgba(233,196,119,.4), transparent 70%); animation: pile-glow 3.6s ease-in infinite; }
@keyframes pile-glow { 55% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); opacity: .6; } }

/* 002 夜晚：一盏呼吸的灯 */
.mini--night .lamp {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--l-night);
  box-shadow: 0 0 24px 6px rgba(232,155,99,.55), 0 0 80px 24px rgba(232,155,99,.18);
  animation: lamp-breathe 4.6s ease-in-out infinite;
}
.mini--night .lamp-halo { position: absolute; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(232,155,99,.16), transparent 66%); animation: lamp-breathe 4.6s ease-in-out infinite; }
@keyframes lamp-breathe { 50% { transform: scale(1.28); opacity: .72; } }

/* 003 延迟：底片待显影 */
.mini--delay .film {
  width: 64%; aspect-ratio: 4/3; border-radius: 4px;
  background:
    radial-gradient(circle at 34% 40%, rgba(239,237,231,.5), transparent 40%),
    radial-gradient(circle at 66% 64%, rgba(217,106,90,.6), transparent 44%),
    #141017;
  filter: blur(9px) brightness(.3); opacity: .4; transform: scale(1.05);
  transition: filter 3s ease, opacity 3s ease, transform 3s ease;
}
.specimen[data-key="delay"].is-developed .mini--delay .film { filter: blur(0) brightness(1); opacity: .95; transform: scale(1); }
.mini--delay .safelight { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(217,106,90,.12), transparent 60%); }

/* 004 未来：封缄的光盒 */
.mini--future .box {
  position: relative; width: 74px; height: 74px; border-radius: 10px;
  border: 1px solid rgba(221,225,236,.35);
  background: linear-gradient(150deg, rgba(221,225,236,.06), rgba(21,24,36,.4));
  box-shadow: inset 0 0 24px rgba(221,225,236,.06), 0 0 34px rgba(221,225,236,.08);
}
.mini--future .box::after {
  content: ""; position: absolute; inset: -1px; border-radius: 10px; padding: 1px;
  background: conic-gradient(from var(--seal-angle, 0deg), transparent 0 70%, rgba(221,225,236,.75) 82%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: seal-trace 7s linear infinite;
}
@property --seal-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes seal-trace { to { --seal-angle: 360deg; } }
.mini--future .seal-dot { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 36% 32%, #f4f5fa, var(--l-future) 55%, #9aa0b4); box-shadow: 0 0 16px rgba(221,225,236,.5); }

/* 005 同步：两面相照的镜子 */
.mini--sync { gap: 14px; grid-auto-flow: column; }
.mini--sync .mirror { width: 44px; height: 64px; border-radius: 8px; }
.mini--sync .mirror--a { background: linear-gradient(160deg, rgba(242,167,201,.5), rgba(242,167,201,.06)); box-shadow: 0 0 26px rgba(242,167,201,.22); animation: mirror-a 4s ease-in-out infinite; }
.mini--sync .mirror--b { background: linear-gradient(200deg, rgba(143,180,242,.5), rgba(143,180,242,.06)); box-shadow: 0 0 26px rgba(143,180,242,.22); animation: mirror-b 4s ease-in-out infinite; }
.mini--sync .seam { width: 1px; height: 70px; background: linear-gradient(180deg, transparent, rgba(239,237,231,.4), transparent); }
@keyframes mirror-a { 50% { opacity: .55; } }
@keyframes mirror-b { 50% { opacity: 1; } }
.mini--sync .mirror--b { animation-name: mirror-a; animation-delay: 2s; }

/* 006 封存：封进琥珀的卡 */
.mini--seal .card {
  position: relative; width: 62px; height: 84px; border-radius: 8px;
  background: linear-gradient(155deg, rgba(190,158,242,.3), rgba(21,24,36,.7));
  border: 1px solid rgba(190,158,242,.4);
  box-shadow: 0 0 34px rgba(190,158,242,.2), inset 0 0 20px rgba(190,158,242,.12);
  animation: card-float 6s ease-in-out infinite;
  overflow: hidden;
}
.mini--seal .card::before { content: ""; position: absolute; inset: 22% 26%; border-radius: 4px; background: radial-gradient(circle, rgba(239,237,231,.35), transparent 70%); }
.mini--seal .card::after {
  content: ""; position: absolute; top: -60%; left: -80%; width: 60%; height: 220%;
  background: linear-gradient(100deg, transparent, rgba(239,237,231,.22), transparent);
  transform: rotate(18deg); animation: amber-sweep 5.4s ease-in-out infinite;
}
@keyframes card-float { 50% { transform: translateY(-7px) rotate(-1.6deg); } }
@keyframes amber-sweep { 0%, 55% { left: -80%; } 85%, 100% { left: 130%; } }

/* 尚未折叠的空槽位 */
.specimen--empty { border: 1px dashed rgba(239,237,231,.12); background: transparent; box-shadow: none !important; }
.specimen--empty:hover { border-color: rgba(239,237,231,.2); }
.specimen--empty .specimen__word { color: var(--ink-3); }
.specimen--empty .specimen__stage { background: transparent; }
.specimen--empty .twinkle { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); animation: twinkle 4s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .1; transform: scale(.6); } }
.folds__foot { margin-top: 46px; font-size: 13px; letter-spacing: .1em; color: var(--ink-3); }
.folds__foot a {
  display: inline-block;
  color: var(--ink-2);
  border-bottom: 1px solid rgba(190,158,242,.4);
  padding-bottom: 2px;
  white-space: nowrap;
  transition: color .4s;
}
.folds__foot a:hover { color: var(--purple); }

/* ── CONTACT ──────────────────────────────── */
.scene--contact .scene__inner { max-width: 880px; margin: 0 auto; width: 100%; }
.contact__hero { margin: 44px 0 50px; }
.contact__email {
  display: inline-block;
  font-family: var(--font-poem); font-size: clamp(30px, 5vw, 54px); letter-spacing: .04em;
  background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: text-shadow .5s, transform .5s var(--ease-soft);
}
.contact__email:hover { text-shadow: 0 0 54px rgba(190,158,242,.4); transform: translateY(-2px); }
.contact__copy { margin-top: 18px; color: var(--ink-2); font-size: 15px; max-width: 480px; }
.contact__row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; margin-bottom: 54px; }
.notify { padding: 26px; border-radius: 14px; background: rgba(21,24,36,.6); border: 1px solid rgba(239,237,231,.08); }
.notify label { font-size: 14px; letter-spacing: .1em; color: var(--ink-2); }
.notify__row { display: flex; gap: 10px; margin-top: 16px; }
.notify input {
  flex: 1; min-width: 0; padding: 12px 16px; border-radius: 999px;
  background: rgba(7,8,13,.7); border: 1px solid rgba(239,237,231,.14);
  color: var(--ink); font-size: 14px; font-family: inherit; outline: none;
  transition: border-color .4s, box-shadow .4s;
}
.notify input:focus { border-color: rgba(143,180,242,.55); box-shadow: 0 0 24px rgba(143,180,242,.14); }
.notify input::placeholder { color: var(--ink-3); }
.notify button {
  padding: 12px 26px; border-radius: 999px; font-size: 14px; letter-spacing: .14em;
  color: #0B0D15; font-weight: 600; background: var(--spectrum);
  transition: transform .4s var(--ease-soft), box-shadow .4s;
}
.notify button:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(190,158,242,.3); }
.notify__note { margin-top: 12px; font-size: 12px; color: var(--ink-3); letter-spacing: .06em; }
.notify__note.is-ok { color: var(--l-accumulate); }
.souvenir {
  position: relative; padding: 26px; border-radius: 14px; text-align: left;
  background: linear-gradient(150deg, rgba(190,158,242,.1), rgba(21,24,36,.6));
  border: 1px solid rgba(190,158,242,.28);
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  transition: transform .45s var(--ease-soft), box-shadow .45s, border-color .45s;
  overflow: hidden;
}
.souvenir:hover { transform: translateY(-3px); border-color: rgba(190,158,242,.6); box-shadow: 0 16px 50px rgba(190,158,242,.16); }
.souvenir__title { font-family: var(--font-poem); font-size: 20px; letter-spacing: .14em; }
.souvenir__sub { font-size: 12px; letter-spacing: .16em; color: var(--ink-2); }
.souvenir svg { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; fill: none; stroke: var(--purple); stroke-width: 1.5; opacity: .8; }
.meta { display: grid; gap: 0; border-top: 1px solid rgba(239,237,231,.08); }
.meta > div { display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid rgba(239,237,231,.06); font-size: 14px; }
.meta dt { color: var(--ink-3); letter-spacing: .14em; font-size: 12px; padding-top: 3px; }
.meta dd { color: var(--ink-2); }
.meta__company { text-wrap: balance; }
.meta a { border-bottom: 1px solid rgba(239,237,231,.2); transition: color .4s, border-color .4s; }
.meta a:hover { color: var(--ink); border-color: var(--purple); }

/* ── FOOTER ───────────────────────────────── */
.footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: flex; justify-content: space-between; gap: 20px;
  padding: 18px 34px; font-size: 11px; letter-spacing: .1em; color: var(--ink-3);
  opacity: 0; transition: opacity 1s ease 1.2s;
}
body.is-in .footer { opacity: 1; }
.footer a:hover { color: var(--ink-2); }

/* ── 来访凭证 ─────────────────────────────── */
.credential {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center; padding: 24px;
  background: rgba(7,8,13,.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transition: opacity .6s var(--ease-soft), visibility .6s;
}
.credential.is-open { opacity: 1; visibility: visible; }
.credential__card {
  width: min(400px, 92vw); padding: 38px 34px 30px; border-radius: 18px;
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(190,158,242,.12), transparent 60%),
    linear-gradient(170deg, #14161f, #0c0e16);
  border: 1px solid rgba(190,158,242,.3);
  box-shadow: 0 40px 120px rgba(0,0,0,.6), 0 0 80px rgba(190,158,242,.1);
  transform: translateY(26px) rotateX(8deg); transition: transform .7s var(--ease-soft);
}
.credential.is-open .credential__card { transform: none; }
.credential__kicker { font-size: 10px; letter-spacing: .44em; color: var(--ink-3); }
.credential__serial { margin: 10px 0 26px; font-size: 15px; letter-spacing: .3em; color: var(--purple); text-shadow: 0 0 18px rgba(190,158,242,.5); }
.credential__rows { display: grid; gap: 14px; padding: 20px 0; border-top: 1px solid rgba(239,237,231,.08); border-bottom: 1px solid rgba(239,237,231,.08); }
.credential__rows div { display: flex; justify-content: space-between; font-size: 13px; }
.credential__rows dt { color: var(--ink-3); letter-spacing: .18em; }
.credential__rows dd { color: var(--ink); letter-spacing: .04em; }
.credential__line { margin: 24px 0 6px; font-family: var(--font-poem); font-size: 17px; letter-spacing: .1em; text-align: center; }
.credential__valid { text-align: center; font-size: 11px; letter-spacing: .2em; color: var(--ink-3); }
.credential__actions { display: flex; justify-content: center; gap: 14px; margin-top: 26px; }
.credential__actions .btn { padding: 11px 22px; font-size: 13px; }

/* ── 响应式 ───────────────────────────────── */
@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: flex; }
  .contact__row { grid-template-columns: 1fr; }
  .fold-tag { display: none; }
}
@media (max-width: 760px) {
  .scene__inner { padding: 104px 7vw 110px; }
  .topbar { padding: 16px 20px; }
  .footer { padding: 14px 20px; flex-direction: column; gap: 4px; align-items: center; }
  .scroll-hint { display: none; }
  .cabinet { grid-template-columns: 1fr; }
  .entry__hud { left: 20px; right: 20px; }
  .index__note { display: none; }
  .meta > div { grid-template-columns: 96px 1fr; gap: 12px; }
  .daytime { display: none; }
}

/* ── 降级：减弱动态 / 低配 ────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .2s !important; }
  .torch { display: none; }
  .grain { display: none; }
}
body.lite .grain, body.lite .torch { display: none; }
body.lite .aurora i { animation: none; }

/* ══════════════════════════════════════════════════════════════
   V3 · 实体折页档案
   首页把「时间折叠」变成可触摸的档案物件；文字始终可读，光只做氛围。
   ══════════════════════════════════════════════════════════════ */
.entry__hint--touch { display: none; }

.torch {
  z-index: 48;
  opacity: .94;
  mix-blend-mode: screen;
  background: radial-gradient(
    calc(var(--torch-size) * .44) circle at var(--tx, 50%) var(--ty, 42%),
    rgba(255, 249, 238, .18),
    rgba(190, 205, 244, .07) 46%,
    rgba(143, 180, 242, .018) 66%,
    transparent 78%
  );
  will-change: background;
}

.scene--index .scene__inner {
  display: grid;
  grid-template-columns: minmax(600px, .98fr) minmax(500px, 1.02fr);
  align-items: center;
  gap: 0;
  max-width: 1600px;
  padding: 104px 3.2vw 76px 5.8vw;
}

.scene--index {
  background: #02060B;
}

.index__content {
  position: relative;
  z-index: 3;
  min-width: 0;
  padding-bottom: 1vh;
}

.index__title {
  font-size: clamp(48px, 4.65vw, 68px);
  line-height: 1.36;
}

.index__intro {
  max-width: 540px;
}

.index__note {
  max-width: 510px;
  margin-top: 52px;
  line-height: 1.9;
}

.archive-folio {
  --folio-open: 0;
  --folio-x: 0px;
  --folio-y: 0px;
  --folio-rx: 0deg;
  --folio-ry: 0deg;
  position: relative;
  z-index: 2;
  justify-self: end;
  width: min(72vw, 1020px);
  aspect-ratio: 1200 / 1024;
  margin-right: -10vw;
  padding: 0;
  color: var(--ink-2);
  text-align: left;
  cursor: grab;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  perspective: 1400px;
}

.archive-folio:active,
.archive-folio.is-dragging {
  cursor: grabbing;
}

.archive-folio:focus-visible {
  outline: none;
}

.archive-folio__visual {
  position: absolute;
  inset: 0;
  display: block;
  transform:
    translate3d(var(--folio-x), var(--folio-y), 0)
    rotateX(var(--folio-rx))
    rotateY(var(--folio-ry))
    scale(1.018);
  transform-style: preserve-3d;
  transition: transform .72s var(--ease-soft), filter .72s ease;
  will-change: transform;
}

.archive-folio__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-clip-path: inset(6% 0 0 10%);
  clip-path: inset(6% 0 0 10%);
  pointer-events: none;
  -webkit-user-drag: none;
  backface-visibility: hidden;
  transition: opacity .72s var(--ease-soft), filter .72s ease, transform .82s var(--ease-soft);
  will-change: opacity, transform;
}

.archive-folio__image--closed {
  opacity: calc(1 - var(--folio-open));
  transform-origin: 14% 52%;
  transform:
    translateX(var(--folio-cover-shift, 0%))
    rotateY(var(--folio-cover-rotate, 0deg))
    scale(var(--folio-cover-scale, 1));
}

.archive-folio__image--open {
  opacity: var(--folio-open);
  transform-origin: 50% 52%;
  transform:
    translateX(var(--folio-open-shift, 2.2%))
    scale(var(--folio-open-scale, .978));
}

.archive-folio:hover .archive-folio__visual,
.archive-folio:focus-visible .archive-folio__visual {
  filter: brightness(1.045);
}

.archive-folio.is-dragging .archive-folio__visual,
.archive-folio.is-dragging .archive-folio__image,
.archive-folio.is-turning .archive-folio__image {
  transition: none;
}

.index__content {
  transition: opacity .72s ease, transform .9s var(--ease-soft), filter .72s ease;
}

body.is-opening-archive .scene--index .index__content {
  opacity: .24;
  transform: translateX(-2.4vw) scale(.985);
  filter: blur(2px);
}

body.is-opening-archive .archive-folio__visual {
  transform:
    translate3d(calc(var(--folio-x) - 2vw), var(--folio-y), 0)
    rotateX(var(--folio-rx))
    rotateY(var(--folio-ry))
    scale(1.105);
  filter: brightness(1.09);
}

body.is-in-archive .topbar,
body.is-in-archive .fold-tag,
body.is-in-archive .footer,
body.is-opening-archive .topbar,
body.is-opening-archive .fold-tag,
body.is-opening-archive .footer {
  opacity: 0;
  pointer-events: none;
}

.archive-folio__caption {
  position: absolute;
  right: 13%;
  bottom: 6%;
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 11px;
  letter-spacing: .16em;
  color: rgba(239, 237, 231, .62);
  opacity: .78;
  transform: translateY(0);
  transition: opacity .45s ease, transform .55s var(--ease-soft);
  pointer-events: none;
}

.archive-folio__caption small {
  font-size: 9px;
  letter-spacing: .28em;
  color: rgba(239, 237, 231, .35);
}

.archive-folio.is-open .archive-folio__caption {
  opacity: .92;
  transform: translateY(-3px);
}

.archive-folio.is-open .archive-folio__caption small {
  color: rgba(232, 155, 99, .62);
}

.archive-folio:focus-visible .archive-folio__caption {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 5px;
}

@media (max-width: 1180px) {
  .scene--index .scene__inner {
    grid-template-columns: minmax(500px, .92fr) minmax(460px, 1.08fr);
    padding-left: 5vw;
  }
  .index__title { font-size: clamp(44px, 4.6vw, 54px); }
  .archive-folio {
    width: min(78vw, 920px);
    margin-right: -17vw;
  }
}

@media (max-width: 900px) {
  .scene--index .scene__inner {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    min-height: 100%;
    padding: 112px 7vw 92px;
  }
  .index__content { z-index: 4; }
  .index__note { display: none; }
  .index__title {
    margin-top: 22px;
    font-size: clamp(40px, 9.6vw, 60px);
  }
  .index__cta { margin-top: 34px; }
  .archive-folio {
    flex: 0 0 auto;
    align-self: center;
    width: min(104vw, 650px);
    margin: 6px -9vw -3vh;
  }
  .archive-folio__caption {
    right: 16%;
    bottom: 5%;
  }
  body[data-route="index"] .footer { display: none; }
}

@media (hover: none), (pointer: coarse) {
  .entry__hint--pointer { display: none; }
  .entry__hint--touch { display: block; }
  .archive-folio:hover .archive-folio__visual { filter: none; }
}

@media (max-width: 760px) {
  .topbar {
    background: rgba(2, 6, 11, .9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .drawer {
    background: #07080D;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .scene--index .scene__inner {
    padding: 100px 7vw 86px;
  }
  .eyebrow {
    font-size: 9px;
    letter-spacing: .3em;
  }
  .index__title {
    margin: 18px 0 16px;
    font-size: clamp(38px, 10.2vw, 48px);
    line-height: 1.34;
    letter-spacing: .015em;
  }
  .index__intro {
    max-width: 90%;
    font-size: 14px;
    line-height: 1.8;
  }
  .index__cta {
    gap: 10px;
    margin-top: 28px;
  }
  .index__cta .btn {
    padding: 12px 19px;
    font-size: 12px;
  }
  .archive-folio {
    width: min(126vw, 590px);
    margin: 4px -22vw -2vh;
  }
  .archive-folio__caption {
    right: 18%;
    bottom: 4%;
    display: block;
    font-size: 10px;
    letter-spacing: .12em;
  }
  .archive-folio__caption small {
    display: block;
    margin-bottom: 3px;
    font-size: 8px;
  }
  .footer { display: none; }
}

@media (max-height: 760px) and (min-width: 901px) {
  .scene--index .scene__inner {
    padding-top: 92px;
    padding-bottom: 52px;
  }
  .index__title { margin: 18px 0 16px; }
  .index__cta { margin-top: 30px; }
  .index__note,
  .fold-tag { display: none; }
  .archive-folio { width: min(67vw, 860px); }
}

@media (prefers-reduced-motion: reduce) {
  .archive-folio__visual,
  .archive-folio__image,
  .archive-folio__caption {
    transition: opacity .2s ease !important;
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   INNER FOLD · 翻开档案后真正进入的时间夹层
   ══════════════════════════════════════════════════════════════ */
.archive-room {
  --room-light: 190, 158, 242;
  position: fixed;
  inset: 0;
  z-index: 52;
  overflow: hidden;
  color: var(--ink);
  background: #05070c;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.925);
  transform-origin: 78% 54%;
  clip-path: inset(31% 8% 29% 57% round 3px);
  transition:
    opacity .42s ease,
    visibility .9s,
    transform 1.08s var(--ease-soft),
    clip-path 1.08s var(--ease-soft);
}

.archive-room.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  clip-path: inset(0 round 0);
}

.archive-room__paper {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  max-width: none;
  object-fit: cover;
  opacity: .2;
  filter: grayscale(.18) brightness(.46) contrast(1.08) blur(4px);
  transform: scale(1.06);
  transition: transform 2.2s var(--ease-soft), opacity 1.2s ease;
}

.archive-room.is-open .archive-room__paper {
  opacity: .26;
  transform: scale(1);
}

.archive-room::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 5, 9, .97) 0%, rgba(3, 5, 9, .88) 48%, rgba(3, 5, 9, .58) 100%),
    linear-gradient(180deg, rgba(3, 5, 9, .4), rgba(3, 5, 9, .82));
}

.archive-room::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(360px circle at var(--tx, 72%) var(--ty, 46%),
      rgba(255, 244, 224, .16),
      rgba(var(--room-light), .055) 48%,
      transparent 76%);
  mix-blend-mode: screen;
}

.archive-room__top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
  padding: 20px 34px;
  border-bottom: 1px solid rgba(239, 237, 231, .08);
  font-size: 10px;
  letter-spacing: .34em;
  color: var(--ink-3);
}

.archive-room__close {
  min-width: 104px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(239, 237, 231, .16);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 12px;
  letter-spacing: .16em;
  transition: color .35s ease, border-color .35s ease, background .35s ease;
}

.archive-room__close:hover,
.archive-room__close:focus-visible {
  color: var(--ink);
  border-color: rgba(190, 158, 242, .62);
  background: rgba(190, 158, 242, .08);
  outline: none;
}

.archive-room__content {
  position: relative;
  z-index: 4;
  width: min(1180px, 100%);
  height: 100%;
  margin: 0 auto;
  padding: clamp(108px, 13vh, 142px) 5vw 62px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(239, 237, 231, .14) transparent;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .72s ease .42s, transform .96s var(--ease-soft) .38s;
}

.archive-room.is-open .archive-room__content {
  opacity: 1;
  transform: none;
}

.archive-room__kicker {
  font-size: 10px;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: rgba(190, 158, 242, .72);
}

.archive-room__content h2 {
  max-width: 850px;
  margin-top: 13px;
  font-family: var(--font-poem);
  font-size: clamp(42px, 5vw, 70px);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: .055em;
}

.archive-room__lead {
  max-width: 640px;
  margin-top: 18px;
  color: var(--ink-2);
  font-size: 14px;
  letter-spacing: .06em;
}

.archive-room__samples {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(380px, 1.28fr);
  gap: 20px;
  max-width: 1000px;
  margin-top: 34px;
}

.archive-room__sample-list {
  display: grid;
  gap: 7px;
}

.archive-room__sample {
  display: grid;
  grid-template-columns: 36px 74px 1fr;
  align-items: baseline;
  gap: 8px;
  min-height: 56px;
  padding: 12px 15px;
  border: 1px solid rgba(239, 237, 231, .08);
  color: var(--ink-3);
  text-align: left;
  transition:
    color .38s ease,
    border-color .38s ease,
    background .38s ease,
    transform .55s var(--ease-soft);
}

.archive-room__sample b {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .18em;
}

.archive-room__sample span {
  font-family: var(--font-poem);
  font-size: 20px;
  letter-spacing: .16em;
}

.archive-room__sample small {
  font-size: 11px;
  letter-spacing: .08em;
}

.archive-room__sample:hover,
.archive-room__sample:focus-visible {
  color: var(--ink-2);
  border-color: rgba(190, 158, 242, .3);
  transform: translateX(4px);
  outline: none;
}

.archive-room__sample.is-active {
  color: var(--ink);
  border-color: rgba(var(--room-light), .42);
  background: rgba(var(--room-light), .07);
}

.archive-room__reading {
  position: relative;
  min-height: 182px;
  padding: 25px 28px;
  border: 1px solid rgba(var(--room-light), .2);
  background: rgba(6, 8, 13, .62);
  box-shadow: inset 0 0 54px rgba(var(--room-light), .035);
  transition: border-color .5s ease, box-shadow .5s ease;
}

.archive-room__reading p {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink-3);
  font-size: 9px;
  letter-spacing: .3em;
}

.archive-room__reading p i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--room-light), .34), transparent);
}

.archive-room__reading strong {
  display: block;
  margin-top: 22px;
  font-family: var(--font-poem);
  font-size: 29px;
  font-weight: 600;
  letter-spacing: .2em;
  color: rgba(var(--room-light), .9);
  text-shadow: 0 0 28px rgba(var(--room-light), .25);
}

.archive-room__reading blockquote {
  margin-top: 11px;
  font-family: var(--font-poem);
  font-size: clamp(17px, 2vw, 23px);
  font-style: normal;
  letter-spacing: .08em;
  color: var(--ink-2);
}

.archive-room__reading.is-changing > * {
  animation: room-reading-in .5s var(--ease-soft);
}

@keyframes room-reading-in {
  from { opacity: 0; transform: translateY(7px); filter: blur(3px); }
}

.archive-room__continue {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 50px;
  margin-top: 22px;
  padding: 0 22px;
  border: 1px solid rgba(239, 237, 231, .14);
  color: var(--ink-2);
  transition: color .38s ease, border-color .38s ease, background .38s ease, transform .55s var(--ease-soft);
}

.archive-room__continue span {
  font-size: 13px;
  letter-spacing: .12em;
}

.archive-room__continue small {
  font-size: 8px;
  letter-spacing: .24em;
  color: var(--ink-3);
}

.archive-room__continue:hover,
.archive-room__continue:focus-visible {
  color: var(--ink);
  border-color: rgba(190, 158, 242, .46);
  background: rgba(190, 158, 242, .075);
  transform: translateX(5px);
  outline: none;
}

.archive-room__hint {
  position: absolute;
  right: 34px;
  bottom: 22px;
  z-index: 5;
  font-size: 9px;
  letter-spacing: .24em;
  color: rgba(239, 237, 231, .3);
}

@media (max-width: 900px) {
  .archive-room {
    transform-origin: 54% 72%;
    clip-path: inset(57% 10% 6% 10% round 3px);
  }
  .archive-room__content {
    width: 100%;
    padding: 112px 7vw 64px;
  }
  .archive-room__samples {
    grid-template-columns: 1fr;
    max-width: 720px;
  }
  .archive-room__sample-list {
    grid-template-columns: repeat(3, 1fr);
  }
  .archive-room__sample {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 1px;
    min-height: 82px;
  }
  .archive-room__sample small { display: none; }
  .archive-room__reading { min-height: 172px; }
}

@media (max-width: 760px) {
  .archive-room__top {
    min-height: 76px;
    padding: 14px 20px;
  }
  .archive-room__top > span {
    max-width: 150px;
    line-height: 1.55;
  }
  .archive-room__close {
    min-width: 96px;
    padding: 0 14px;
  }
  .archive-room__content {
    padding: 102px 7vw 74px;
  }
  .archive-room__content h2 {
    font-size: clamp(34px, 9.7vw, 43px);
    line-height: 1.32;
  }
  .archive-room__lead {
    margin-top: 14px;
    font-size: 13px;
  }
  .archive-room__samples {
    gap: 12px;
    margin-top: 25px;
  }
  .archive-room__sample-list { gap: 5px; }
  .archive-room__sample {
    min-height: 72px;
    padding: 9px 8px;
    text-align: center;
  }
  .archive-room__sample b { font-size: 8px; }
  .archive-room__sample span {
    font-size: 17px;
    letter-spacing: .12em;
  }
  .archive-room__reading {
    min-height: 160px;
    padding: 21px 20px;
  }
  .archive-room__reading strong {
    margin-top: 17px;
    font-size: 25px;
  }
  .archive-room__reading blockquote {
    font-size: 17px;
  }
  .archive-room__continue {
    width: 100%;
    justify-content: space-between;
    margin-top: 14px;
  }
  .archive-room__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .archive-room,
  .archive-room__content,
  .archive-room__paper {
    transition-duration: .2s !important;
    transform: none !important;
  }
}