/* ==========================================================================
   星际能量漫游 · v3.0
   共用层样式：太阳系空间、星体外观、镜头节奏、阅读布局与导航
   —— 换客户不需要改这个文件
   ========================================================================== */

/* ---------------------------------------------------------------- 基础 */
:root {
  --ink-0: #04060e;
  --ink-1: #070b18;
  --ink-2: #0b1224;
  --paper: #f3eee5;
  --paper-2: rgba(243, 238, 229, 0.74);
  --paper-3: rgba(243, 238, 229, 0.52);
  --gold: #e7cb99;
  --gold-soft: rgba(231, 203, 153, 0.46);
  --line: rgba(243, 238, 229, 0.14);
  --line-soft: rgba(243, 238, 229, 0.08);

  --font-display: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC", "Times New Roman", serif;
  --font-text: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;

  --shell-pad: clamp(20px, 3vw, 48px);
  --ease-drift: cubic-bezier(0.22, 0.61, 0.24, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink-0);
  color: var(--paper);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { min-height: 100%; }

img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

[hidden] { display: none !important; }

::selection { background: rgba(231, 203, 153, 0.28); }

/* 滚动条：阅读区里保持安静 */
.reading::-webkit-scrollbar { width: 8px; }
.reading::-webkit-scrollbar-thumb { background: rgba(243, 238, 229, 0.14); border-radius: 8px; }
.reading::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------- 星空 */
#starfield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

/* 宇宙底色：深蓝黑，永不纯黑 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(28, 44, 92, 0.5) 0%, rgba(6, 9, 20, 0) 62%),
    radial-gradient(120% 100% at 82% 96%, rgba(20, 30, 70, 0.42) 0%, rgba(4, 6, 14, 0) 60%),
    linear-gradient(180deg, #05070f 0%, #04060e 100%);
}

/* 远处的太阳光点：始终存在，只是方位与大小在变 */
.sun-source {
  position: fixed;
  left: var(--sun-x, 50%);
  top: var(--sun-y, 50%);
  width: var(--sun-size, 0px);
  height: var(--sun-size, 0px);
  margin-left: calc(var(--sun-size, 0px) / -2);
  margin-top: calc(var(--sun-size, 0px) / -2);
  opacity: var(--sun-opacity, 0);
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle,
    #fffdf8 0%,
    rgba(255, 243, 210, 0.9) 8%,
    rgba(255, 214, 150, 0.44) 20%,
    rgba(255, 190, 118, 0.16) 38%,
    rgba(255, 176, 100, 0.05) 58%,
    rgba(255, 170, 96, 0) 76%);
  box-shadow: 0 0 calc(var(--sun-size, 0px) * 1.1) rgba(255, 198, 122, 0.34);
  transition: left 4.5s var(--ease-drift), top 4.5s var(--ease-drift),
              width 4.5s var(--ease-drift), height 4.5s var(--ease-drift),
              opacity 3.6s var(--ease-drift), box-shadow 4.5s var(--ease-drift);
}

/* 开场：地球在身后 */
.earth {
  position: fixed;
  left: -14vmin;
  bottom: -40vmin;
  width: 76vmin;
  height: 76vmin;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 2.6s var(--ease-drift), transform 3.4s var(--ease-drift), filter 2.6s var(--ease-drift);
  background:
    radial-gradient(circle at 34% 30%, #cfe6ff 0%, #4f8fd6 30%, #1f4f92 58%, #102847 80%, #070e1c 100%);
  box-shadow: inset -30px -40px 90px rgba(0, 0, 0, 0.66), 0 0 120px rgba(96, 150, 230, 0.24);
  filter: blur(2px);
}
.earth.is-visible { opacity: 0.92; transform: scale(1); }
.earth.is-behind { opacity: 0.4; filter: blur(6px); transform: scale(0.72) translateY(6%); }
.earth.is-gone { opacity: 0; transform: scale(0.5) translate(6%, 14%); }
/* 归航时地球从另一侧回来 */
.earth.is-home { transform: scale(1) translate(96vmin, 6vmin); }
.earth-light {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 62% 24%, rgba(255, 252, 244, 0.42) 0%, rgba(255, 252, 244, 0) 42%);
}
.earth-clouds {
  position: absolute;
  inset: -2%;
  border-radius: 50%;
  opacity: 0.5;
  background:
    radial-gradient(28% 12% at 46% 22%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(34% 14% at 62% 52%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(26% 11% at 34% 68%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
  animation: cloud-drift 64s linear infinite;
}

/* ---------------------------------------------------------------- 顶部操作 */
.hud {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--shell-pad);
  background: linear-gradient(180deg, rgba(4, 6, 14, 0.72) 0%, rgba(4, 6, 14, 0) 100%);
  border-bottom: 1px solid transparent;
  transition: background 0.7s var(--ease-drift), border-color 0.7s;
  pointer-events: none;
}
.hud.is-solid {
  background: rgba(5, 8, 16, 0.86);
  backdrop-filter: blur(16px);
  border-bottom-color: rgba(243, 238, 229, 0.07);
}
.hud > * { pointer-events: auto; }
.hud__brand {
  background: none;
  border: 0;
  padding: 6px 0;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.22em;
  color: var(--paper-2);
  cursor: pointer;
  transition: color 0.3s;
}
.hud__brand:hover { color: var(--gold); }
.hud__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.btn {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(243, 238, 229, 0.04);
  color: var(--paper-2);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.35s, color 0.35s, border-color 0.35s, opacity 0.3s;
  white-space: nowrap;
}
.btn:hover { background: rgba(243, 238, 229, 0.09); color: var(--paper); border-color: rgba(243, 238, 229, 0.26); }
.btn:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
.btn[aria-pressed="true"] { color: var(--gold); border-color: var(--gold-soft); background: rgba(231, 203, 153, 0.1); }
.btn--primary {
  border-color: var(--gold-soft);
  background: rgba(231, 203, 153, 0.12);
  color: #f7ecd8;
  padding: 12px 26px;
  letter-spacing: 0.14em;
}
.btn--primary:hover { background: rgba(231, 203, 153, 0.2); border-color: var(--gold); color: #fff8ea; }
.btn[disabled] { opacity: 0.32; pointer-events: none; }

/* ---------------------------------------------------------------- 屏幕容器 */
#main { position: relative; z-index: 2; }

.screen { min-height: 100svh; }

/* ---------------------------------------------------------------- 开场 */
.screen--intro {
  display: grid;
  place-items: center;
  padding: clamp(72px, 12vh, 140px) var(--shell-pad) 56px;
}
.intro-card {
  max-width: 620px;
  text-align: left;
  animation: rise-in 1.6s var(--ease-drift) both;
}
.eyebrow {
  margin: 0 0 18px;
  font-size: 12px;
  letter-spacing: 0.4em;
  color: var(--gold-soft);
  text-transform: none;
}
.intro-title {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 5.2vw, 54px);
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: #fbf6ec;
}
.intro-lead {
  margin: 0 0 34px;
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 2;
  color: var(--paper-2);
  max-width: 34em;
}
.intro-hint {
  margin: 26px 0 0;
  font-size: 13px;
  line-height: 1.9;
  color: var(--paper-3);
  letter-spacing: 0.04em;
}
.intro-foot {
  position: fixed;
  left: var(--shell-pad);
  bottom: 22px;
  right: var(--shell-pad);
  margin: 0;
  max-width: 40em;
  font-size: 11.5px;
  line-height: 1.8;
  color: rgba(243, 238, 229, 0.42);
}
.return-card .intro-foot {
  position: static;
  margin-top: 30px;
  color: rgba(243, 238, 229, 0.38);
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------- 站点布局 */
.screen--station {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(360px, 33vw, 470px);
  min-height: 100svh;
  height: 100svh;
}

/* 舞台：星体 + 投影 */
.stage {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  --orb-base: min(46vmin, 460px);
}

/* 星体 */
.orb-frame {
  position: relative;
  --orb-box: calc(var(--orb-base, min(46vmin, 460px)) * var(--orb-size, 1));
  width: var(--orb-box);
  height: var(--orb-box);
  transform: scale(var(--orb-scale, 1)) translate3d(var(--orb-x, 0px), var(--orb-y, 0px), 0);
  transform-origin: 52% 52%;
  transition: transform var(--orb-dur, 1.8s) var(--ease-drift), opacity var(--orb-dur, 1.8s) var(--ease-drift);
  will-change: transform, opacity;
}
/* 接近中：星体还在很远处 */
.stage .orb-frame { --orb-scale: 0.07; --orb-y: 7%; opacity: 0.2; }
/* 到站：慢慢靠近，然后平稳停住 */
.stage.is-arrived .orb-frame {
  --orb-dur: var(--approach-duration, 4.6s);
  --orb-scale: 1;
  --orb-y: 0%;
  opacity: 1;
}
/* 投影展开：星体稍微后退，让位给阅读 */
.stage.is-projected .orb-frame {
  --orb-dur: 1.9s;
  --orb-scale: 0.85;
  --orb-x: -24%;
  --orb-y: -3%;
  opacity: 0.78;
}
/* 离站：星体重新收拢，镜头转向下一站 */
.stage.is-receding .orb-frame {
  --orb-dur: 1.2s;
  --orb-scale: 0.06;
  --orb-x: -9%;
  --orb-y: -7%;
  opacity: 0.14;
}
.orb { position: absolute; inset: 0; }

.orb__sphere {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 33% 27%,
      var(--orb-core, #fff) 0%,
      var(--orb-mid, #ccc) 42%,
      var(--orb-edge, #666) 74%,
      #05060c 100%);
  box-shadow:
    inset -22px -30px 70px rgba(0, 0, 0, 0.62),
    inset 14px 18px 46px rgba(255, 255, 255, 0.1),
    0 0 90px var(--orb-glow, rgba(255, 255, 255, 0.2));
}
/* 表面纹理：全部为程序化生成的简化外观，明确是艺术化处理 */
.orb__surface {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  mix-blend-mode: overlay;
  opacity: 0.55;
  animation: orb-spin 150s linear infinite;
}
.orb__clouds { position: absolute; inset: 0; border-radius: 50%; opacity: 0.4; }
.orb__shade {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 33% 27%, rgba(0, 0, 0, 0) 34%, rgba(3, 4, 10, 0.72) 82%, rgba(2, 3, 8, 0.92) 100%);
}

/* 日冕：只有太阳有 */
.orb__corona {
  position: absolute;
  inset: -46%;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(255, 236, 200, 0.34) 22%,
    rgba(255, 200, 120, 0.2) 40%,
    rgba(255, 170, 80, 0.08) 58%,
    rgba(255, 150, 60, 0) 74%);
  filter: blur(18px);
}
[data-corona="1"] .orb__corona { opacity: 1; animation: corona-breathe 9.5s ease-in-out infinite; }

/* 边缘光 */
.orb__rim {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0) 62%,
    var(--orb-glow, rgba(255, 255, 255, 0.3)) 88%,
    rgba(255, 255, 255, 0) 100%);
  opacity: 0.85;
}

/* 表面类型 */
[data-surface="granule"] .orb__surface {
  background:
    radial-gradient(12% 9% at 30% 34%, rgba(255, 245, 214, 0.9) 0%, rgba(255, 245, 214, 0) 60%),
    radial-gradient(10% 8% at 62% 24%, rgba(255, 236, 190, 0.7) 0%, rgba(255, 236, 190, 0) 60%),
    radial-gradient(14% 10% at 48% 62%, rgba(255, 228, 168, 0.72) 0%, rgba(255, 228, 168, 0) 62%),
    radial-gradient(9% 7% at 74% 56%, rgba(255, 240, 200, 0.6) 0%, rgba(255, 240, 200, 0) 60%),
    radial-gradient(11% 8% at 24% 70%, rgba(255, 232, 176, 0.62) 0%, rgba(255, 232, 176, 0) 62%);
  opacity: 0.7;
}
[data-surface="cloud"] .orb__surface {
  background:
    linear-gradient(94deg, rgba(255, 250, 236, 0) 8%, rgba(255, 250, 236, 0.34) 26%, rgba(255, 250, 236, 0) 46%),
    linear-gradient(86deg, rgba(255, 246, 226, 0) 48%, rgba(255, 246, 226, 0.28) 68%, rgba(255, 246, 226, 0) 88%);
  opacity: 0.6;
}
[data-surface="cloud"] .orb__clouds {
  background:
    radial-gradient(40% 12% at 34% 32%, rgba(255, 252, 242, 0.5) 0%, rgba(255, 252, 242, 0) 70%),
    radial-gradient(46% 11% at 66% 52%, rgba(255, 248, 232, 0.42) 0%, rgba(255, 248, 232, 0) 72%),
    radial-gradient(36% 10% at 44% 72%, rgba(255, 250, 240, 0.36) 0%, rgba(255, 250, 240, 0) 70%);
  animation: cloud-drift 88s linear infinite reverse;
}
[data-surface="mist"] .orb__surface {
  background:
    radial-gradient(34% 26% at 40% 42%, rgba(180, 214, 255, 0.5) 0%, rgba(180, 214, 255, 0) 68%),
    radial-gradient(28% 20% at 64% 60%, rgba(140, 186, 255, 0.42) 0%, rgba(140, 186, 255, 0) 70%),
    radial-gradient(30% 18% at 52% 24%, rgba(206, 230, 255, 0.36) 0%, rgba(206, 230, 255, 0) 70%);
  filter: blur(6px);
  opacity: 0.75;
  animation-duration: 210s;
}
[data-surface="mist"] .orb__clouds {
  background:
    radial-gradient(50% 16% at 44% 46%, rgba(150, 190, 255, 0.3) 0%, rgba(150, 190, 255, 0) 72%),
    radial-gradient(44% 14% at 58% 64%, rgba(120, 170, 255, 0.24) 0%, rgba(120, 170, 255, 0) 72%);
  filter: blur(10px);
}
[data-surface="rock"] .orb__surface {
  background:
    radial-gradient(16% 12% at 38% 36%, rgba(255, 248, 232, 0.34) 0%, rgba(255, 248, 232, 0) 62%),
    radial-gradient(12% 9% at 60% 48%, rgba(60, 52, 46, 0.5) 0%, rgba(60, 52, 46, 0) 62%),
    radial-gradient(18% 11% at 46% 66%, rgba(255, 246, 226, 0.24) 0%, rgba(255, 246, 226, 0) 64%);
  opacity: 0.6;
  animation-duration: 260s;
}

@keyframes orb-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes corona-breathe {
  0%, 100% { transform: scale(1); opacity: 0.86; }
  50% { transform: scale(1.055); opacity: 1; }
}
@keyframes cloud-drift {
  from { transform: translateX(-3%); }
  to { transform: translateX(3%); }
}

/* 接近时：只有星体名称与一句邀请 */
.approach {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(38px, 9vh, 92px);
  padding: 0 var(--shell-pad);
  text-align: center;
  opacity: 0;
  transition: opacity 1.4s var(--ease-drift);
}
.approach.is-on { opacity: 1; }
.approach__name {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(28px, 4.4vw, 46px);
  letter-spacing: 0.3em;
  color: #faf5eb;
  text-indent: 0.3em;
}
.approach__invite {
  margin: 0;
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 2;
  color: var(--paper-2);
}

.stage__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  padding: 0 var(--shell-pad);
  text-align: center;
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: rgba(243, 238, 229, 0.46);
  opacity: 0;
  transition: opacity 1.2s;
  pointer-events: none;
}
.stage__hint.is-on { opacity: 1; }

/* 投影 */
.projection {
  position: absolute;
  left: 57%;
  top: 50%;
  margin: 0;
  height: min(60vh, 560px);
  aspect-ratio: 9 / 16;
  transform: translate3d(-50%, -50%, 0) scale(0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.5s var(--ease-drift), transform 2.2s var(--ease-drift);
  z-index: 3;
}
.projection.is-open {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
  pointer-events: auto;
}
.projection__halo {
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--orb-glow, rgba(255, 255, 255, 0.24)) 0%, rgba(0, 0, 0, 0) 66%);
  filter: blur(34px);
  opacity: 0.65;
  z-index: -1;
}
.projection__frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 40px 120px rgba(2, 4, 12, 0.75), 0 0 0 1px rgba(243, 238, 229, 0.1);
  background: rgba(6, 9, 18, 0.6);
}
.projection__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(24px) saturate(0.7) brightness(0.72);
  transform: scale(1.06);
  transition: filter 2.6s var(--ease-drift), transform 2.6s var(--ease-drift);
}
.projection.is-clear .projection__img { filter: blur(0) saturate(1) brightness(1); transform: scale(1); }
.projection__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 9, 18, 0.34) 0%, rgba(6, 9, 18, 0) 22%, rgba(6, 9, 18, 0) 70%, rgba(6, 9, 18, 0.42) 100%);
  mix-blend-mode: multiply;
}
.projection.is-fading { opacity: 0; transform: translate3d(-50%, -56%, 0) scale(1.04); }
.projection__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -38px;
  margin: 0;
  text-align: center;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--paper-3);
}

/* ---------------------------------------------------------------- 阅读区 */
.reading {
  position: relative;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(96px, 12vh, 132px) clamp(28px, 3.4vw, 54px) 64px;
  background: linear-gradient(180deg, rgba(6, 9, 18, 0.76) 0%, rgba(6, 9, 18, 0.93) 34%, rgba(5, 7, 15, 0.97) 100%);
  border-left: 1px solid var(--line-soft);
  backdrop-filter: blur(16px);
  opacity: 0;
  transition: opacity 1.5s var(--ease-drift);
}
.reading.is-on { opacity: 1; }
.reading__inner { max-width: 38em; }

.reading__head { margin-bottom: 30px; }
.reading__name {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 34px);
  letter-spacing: 0.18em;
  color: #fbf6ec;
}
.reading__meta {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--gold-soft);
}
.reading__theme {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.5vw, 19px);
  letter-spacing: 0.1em;
  color: var(--paper-2);
}

.meet {
  margin: 0 0 34px;
  padding: 0 0 0 20px;
  border-left: 1px solid var(--gold-soft);
  font-family: var(--font-display);
  font-size: clamp(16px, 1.45vw, 18.5px);
  line-height: 2.1;
  color: #f7f1e6;
}

.block { margin: 0 0 34px; }
.block__title {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.28em;
  font-weight: 400;
  color: var(--paper-3);
}
.visible {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.visible li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--paper-2);
}
.visible li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.82em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-soft);
}

.story p {
  margin: 0 0 1.35em;
  font-size: clamp(15px, 1.32vw, 16.5px);
  line-height: 2.15;
  color: var(--paper);
  opacity: 0;
  transform: translateY(10px);
}
.story p.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 1.2s var(--ease-drift), transform 1.2s var(--ease-drift);
}

.reminder {
  margin: 0 0 40px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(243, 238, 229, 0.04);
  font-size: 14.5px;
  line-height: 2;
  color: #f6efe2;
}

/* 知识：次要入口 */
.knowledge { border-top: 1px solid var(--line-soft); }
.knowledge__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--paper-3);
  transition: color 0.3s;
}
.knowledge__toggle:hover { color: var(--gold); }
.knowledge__mark { font-size: 16px; transition: transform 0.4s var(--ease-drift); }
.knowledge__toggle[aria-expanded="true"] .knowledge__mark { transform: rotate(45deg); }

.knowledge__panel { padding: 4px 0 26px; }
.knowledge__grid { margin: 0 0 22px; display: grid; gap: 16px; }
.knowledge__grid dt {
  font-size: 11.5px;
  letter-spacing: 0.24em;
  color: var(--gold-soft);
  margin-bottom: 7px;
}
.knowledge__grid dd {
  margin: 0;
  font-size: 14px;
  line-height: 2;
  color: var(--paper-2);
}
.knowledge__original {
  padding-top: 18px;
  border-top: 1px dashed var(--line-soft);
}
.knowledge__original p {
  margin: 0 0 1.15em;
  font-size: 13.5px;
  line-height: 2.1;
  color: var(--paper-3);
}

.station-nav {
  display: flex;
  gap: 12px;
  padding: 30px 0 0;
  flex-wrap: wrap;
}
.reading__foot {
  margin: 26px 0 0;
  font-size: 11.5px;
  line-height: 1.9;
  color: rgba(243, 238, 229, 0.3);
}

/* 跳过转场 */
.skip {
  position: fixed;
  right: calc(clamp(360px, 33vw, 470px) + 24px);
  bottom: 24px;
  z-index: 45;
  opacity: 0;
  transition: opacity 0.6s;
}
.skip.is-on { opacity: 1; }

/* ---------------------------------------------------------------- 归航 */
.screen--return {
  display: grid;
  place-items: center;
  padding: clamp(84px, 12vh, 140px) var(--shell-pad) 72px;
}
.return-card {
  max-width: 680px;
  animation: rise-in 1.6s var(--ease-drift) both;
}
.recall {
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.recall li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  background: rgba(243, 238, 229, 0.03);
  font-size: 14px;
  line-height: 1.9;
  color: var(--paper-2);
}
.recall b {
  font-weight: 400;
  font-family: var(--font-display);
  letter-spacing: 0.14em;
  color: var(--gold);
  white-space: nowrap;
}
.blessing {
  margin: 0 0 34px;
  padding-left: 20px;
  border-left: 1px solid var(--gold-soft);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.4vw, 17.5px);
  line-height: 2.15;
  color: #f7f1e6;
}
.return-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- 目录 */
.catalog {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
}
.catalog__scrim {
  position: absolute;
  inset: 0;
  background: rgba(3, 5, 12, 0.78);
  backdrop-filter: blur(6px);
  animation: fade-in 0.5s ease both;
}
.catalog__panel {
  position: relative;
  width: min(520px, 100%);
  max-height: 82svh;
  overflow-y: auto;
  padding: 26px clamp(20px, 3vw, 32px) 30px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(12, 17, 33, 0.96), rgba(7, 10, 20, 0.98));
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
  animation: rise-in 0.7s var(--ease-drift) both;
}
.catalog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}
.catalog__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.2em;
}
.catalog__note { margin: 0 0 20px; font-size: 12.5px; color: var(--paper-3); }
.catalog__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.catalog__item {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 14px;
  padding: 15px 16px;
  text-align: left;
  background: rgba(243, 238, 229, 0.03);
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.catalog__item:hover { background: rgba(231, 203, 153, 0.09); border-color: var(--gold-soft); transform: translateX(2px); }
.catalog__item[aria-current="true"] { border-color: var(--gold-soft); }
.catalog__idx { font-size: 11px; letter-spacing: 0.2em; color: var(--gold-soft); }
.catalog__label { font-family: var(--font-display); font-size: 16px; letter-spacing: 0.14em; color: #fbf6ec; }
.catalog__label small {
  display: block;
  margin-top: 5px;
  font-family: var(--font-text);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--paper-3);
}
.catalog__state { font-size: 11.5px; color: var(--paper-3); white-space: nowrap; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------- 提示条 */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 70;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(9, 13, 26, 0.94);
  font-size: 13px;
  color: var(--paper-2);
  animation: fade-in 0.4s ease both;
}

/* 图片读不出来时：保留星体与文字，不停在黑屏 */
.projection.is-missing .projection__frame {
  background:
    radial-gradient(circle at 33% 27%, rgba(243, 238, 229, 0.16) 0%, rgba(243, 238, 229, 0) 60%),
    linear-gradient(180deg, rgba(20, 28, 54, 0.9), rgba(6, 9, 18, 0.95));
}
.projection.is-missing .projection__img { display: none; }
.projection__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--paper-3);
}

/* ---------------------------------------------------------------- 转场：跳过时用最短时长 */
.screen--station { --approach-duration: 4.6s; }

body.is-fast .orb-frame,
body.is-fast .projection,
body.is-fast .projection__img,
body.is-fast .reading,
body.is-fast .approach,
body.is-fast .stage__hint,
body.is-fast .story p {
  transition-duration: 0.32s !important;
}

/* ---------------------------------------------------------------- 手机 */
@media (max-width: 900px) {
  .screen--station {
    display: block;
    height: auto;
  }
  .stage {
    height: 74svh;
    min-height: 430px;
    padding-top: 46px;
    --orb-base: min(58vmin, 320px);
  }
  .stage.is-projected .orb-frame { --orb-scale: 0.52; --orb-x: 0%; --orb-y: -58%; opacity: 0.62; }
  .projection {
    left: 50%;
    top: 66%;
    height: min(40svh, 340px);
    aspect-ratio: 9 / 15;
  }
  .projection__caption { display: none; }
  .approach { bottom: 34px; }
  .approach__name { letter-spacing: 0.24em; }
  .stage__hint { display: none; }
  .reading {
    padding: 34px clamp(20px, 5.4vw, 30px) 74px;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
    background: linear-gradient(180deg, rgba(6, 9, 18, 0.94) 0%, rgba(5, 7, 15, 0.99) 30%);
    backdrop-filter: none;
  }
  .skip {
    right: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    bottom: 18px;
  }
  .hud { padding: 9px clamp(12px, 4vw, 20px); gap: 10px; }
  .hud__brand { font-size: 12px; letter-spacing: 0.04em; white-space: nowrap; }
  .hud__actions { gap: 6px; }
  .hud__actions .btn { padding: 7px 10px; font-size: 11.5px; letter-spacing: 0.02em; }
  .intro-foot { position: static; margin-top: 34px; }
  .screen--intro { align-content: start; }
}

@media (max-width: 560px) {
  .hud__brand { font-size: 11px; }
  .hud__actions .btn { padding: 6px 9px; font-size: 11px; }
}

/* ---------------------------------------------------------------- 减少动态 */
body.is-reduced *, body.is-reduced *::before, body.is-reduced *::after {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
}
body.is-reduced .orb-frame,
body.is-reduced .projection,
body.is-reduced .projection__img,
body.is-reduced .reading,
body.is-reduced .orb,
body.is-reduced .sun-source,
body.is-reduced .earth,
body.is-reduced .story p {
  transition-duration: 0.5s !important;
}
body.is-reduced .story p { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; }
  .orb-frame, .projection, .projection__img, .reading { transition-duration: 0.5s !important; }
}