:root {
  --ink: #f7ecd8;
  --ink-muted: rgb(247 236 216 / 72%);
  --night: #171a2b;
  --twilight: #27324f;
  --violet: #4a4e72;
  --peach: #f2b6a0;
  --amber: #e8b766;
  --clay: #c96f5b;
  --story-progress: 0;
  --pointer-x: 0;
  --pointer-y: 0;
  --header-height: 4.75rem;
  --content-width: min(88vw, 78rem);
  --font-ui: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
  --font-editorial: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --font-hand: "LXGW WenKai Lite", "KaiTi", "Kaiti SC", "STKaiti", "Noto Serif SC", serif;
  color-scheme: dark;
  font-family: var(--font-ui);
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--night);
}

body {
  margin: 0;
  min-width: 20rem;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--night);
}

body.story-locked {
  overflow: hidden;
}

body::selection {
  color: var(--night);
  background: var(--amber);
}

a {
  color: inherit;
}

button,
summary,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 1rem;
  left: 1rem;
  padding: 0.75rem 1rem;
  color: var(--night);
  background: var(--ink);
  border-radius: 999px;
  transform: translateY(-180%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.intro-gate {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: none;
  place-items: center;
  overflow: hidden;
  color: var(--ink);
  background: #16182a;
  isolation: isolate;
  transition: opacity 650ms ease, visibility 650ms ease;
}

.has-js .intro-gate {
  display: grid;
}

.intro-gate::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 68% 46%, rgb(232 183 102 / 22%), transparent 24%),
    radial-gradient(circle at 24% 28%, rgb(74 78 114 / 46%), transparent 36%),
    linear-gradient(135deg, rgb(22 24 42 / 88%), rgb(39 50 79 / 78%));
}

.intro-gate__backdrop {
  position: absolute;
  z-index: -2;
  inset: -2rem;
  opacity: 0.22;
  background:
    linear-gradient(rgb(20 22 39 / 62%), rgb(20 22 39 / 74%)),
    url("assets/visual/candidates/cohabitation-opening-tender-cinematic-whale-v1.png") center / cover no-repeat;
  filter: blur(1.5rem) saturate(0.8);
  transform: scale(1.08);
}

.intro-gate__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.82fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 9rem);
  width: min(86vw, 72rem);
}

.intro-prologue {
  max-width: 35rem;
  transition: opacity 520ms ease, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.intro-prologue__eyebrow {
  margin: 0 0 1rem;
  color: var(--amber);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.2em;
}

.intro-prologue h2 {
  max-width: 9ch;
  margin: 0;
  font-size: clamp(3.2rem, 6.4vw, 6.2rem);
}

.intro-prologue > p:not(.intro-prologue__eyebrow, .intro-note) {
  max-width: 32rem;
  margin: 1.3rem 0 0;
  color: rgb(247 236 216 / 76%);
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.9;
}

.intro-prologue .intro-prologue__question {
  color: var(--ink);
}

.intro-open {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.2rem;
  min-width: 13.5rem;
  min-height: 3.4rem;
  margin-top: 2rem;
  padding: 0.65rem 0.75rem 0.65rem 1.2rem;
  color: #241f2b;
  cursor: pointer;
  background: linear-gradient(135deg, #f7ecd8, #e8b766);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 1rem 3rem rgb(10 11 22 / 28%);
}

.intro-open:disabled {
  cursor: wait;
}

.intro-open__arrow {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  color: var(--ink);
  background: #36334b;
  border-radius: 50%;
}

.intro-note {
  margin: 0.8rem 0 0;
  color: rgb(247 236 216 / 44%);
  font-size: 0.7rem;
  line-height: 1.6;
}

.book-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 33rem;
  perspective: 110rem;
}

.book-shadow {
  position: absolute;
  bottom: 8%;
  width: 80%;
  height: 12%;
  opacity: 0.58;
  background: #05060c;
  border-radius: 50%;
  filter: blur(1.6rem);
  transform: rotate(-4deg);
  transition: opacity 650ms ease, transform 900ms ease;
}

.book {
  position: relative;
  width: clamp(15rem, 23vw, 19rem);
  aspect-ratio: 0.72;
  transform: rotateX(5deg) rotateY(-18deg) rotateZ(2deg);
  transform-style: preserve-3d;
  transition: transform 1200ms cubic-bezier(0.18, 0.8, 0.22, 1);
}

.book__page-stack,
.book__page,
.book__cover {
  position: absolute;
  inset: 0;
  border-radius: 0.35rem 0.8rem 0.8rem 0.35rem;
  transform-origin: left center;
  transform-style: preserve-3d;
}

.book__page-stack {
  background: #e9dfc9;
  box-shadow: 0 1.8rem 4rem rgb(5 6 12 / 40%);
}

.book__page-stack--back {
  transform: translate3d(0.65rem, 0.3rem, -1.2rem);
}

.book__page-stack--middle {
  inset: 0.45rem -0.2rem 0.45rem 0.55rem;
  background:
    repeating-linear-gradient(to bottom, #f0e6d2 0 3px, #d2c4aa 3px 4px);
  transform: translateZ(-0.3rem);
}

.book__page {
  inset: 0.7rem 0.2rem 0.7rem 0.7rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 18%, rgb(232 183 102 / 20%), transparent 25%),
    #f2e7d3;
  box-shadow: inset 1.3rem 0 2rem rgb(61 50 54 / 12%);
  transform: translateZ(0.1rem);
}

.book__page::before {
  position: absolute;
  inset: 13% 12%;
  content: "";
  border: 1px solid rgb(39 50 79 / 16%);
  border-radius: 50%;
  transform: rotate(-18deg);
}

.book__page-line {
  position: absolute;
  left: 18%;
  height: 1px;
  background: rgb(39 50 79 / 18%);
}

.book__page-line--one { top: 62%; width: 62%; }
.book__page-line--two { top: 68%; width: 54%; }
.book__page-line--three { top: 74%; width: 44%; }

.book__cover {
  z-index: 4;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 2rem;
  overflow: hidden;
  color: #f7ecd8;
  text-align: center;
  background:
    radial-gradient(circle at 68% 24%, rgb(232 183 102 / 22%), transparent 28%),
    linear-gradient(145deg, #4a4e72 0%, #27324f 48%, #242438 100%);
  border: 1px solid rgb(247 236 216 / 20%);
  box-shadow:
    inset 0 0 0 0.35rem rgb(247 236 216 / 5%),
    inset 1rem 0 1.8rem rgb(8 9 18 / 34%),
    0 1.4rem 3rem rgb(5 6 12 / 35%);
  transform: translateZ(0.8rem);
  transition: transform 1350ms cubic-bezier(0.18, 0.78, 0.2, 1), box-shadow 900ms ease;
  backface-visibility: hidden;
}

.book__cover::after {
  position: absolute;
  inset: 1.15rem;
  content: "";
  pointer-events: none;
  border: 1px solid rgb(232 183 102 / 38%);
  border-radius: 0.15rem 0.55rem 0.55rem 0.15rem;
}

.book__cover::before {
  position: absolute;
  z-index: 0;
  inset: -30% -55%;
  content: "";
  pointer-events: none;
  opacity: 0.18;
  background: linear-gradient(105deg, transparent 38%, rgb(247 236 216 / 24%) 49%, transparent 60%);
  transform: translateX(-26%) skewX(-12deg);
}

.book__spine-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1.3rem;
  width: 1px;
  background: rgb(232 183 102 / 35%);
  box-shadow: 0 0 0.8rem rgb(5 6 12 / 55%);
}

.book__cover-kicker,
.book__cover-note {
  position: relative;
  z-index: 1;
  color: rgb(247 236 216 / 58%);
  font-size: 0.52rem;
  letter-spacing: 0.2em;
}

.book__cover strong {
  position: relative;
  z-index: 1;
  margin: 1.2rem 0;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  font-size: clamp(2.5rem, 4.2vw, 3.9rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0.12em;
}

.book__cover-orbit {
  position: absolute;
  width: 68%;
  aspect-ratio: 1;
  opacity: 0.32;
  border: 1px solid var(--amber);
  border-radius: 50%;
  transform: rotate(-24deg) scaleY(0.36);
}

.intro-gate.is-opening .intro-prologue {
  opacity: 0;
  transform: translateX(-2.4rem);
}

.intro-gate.is-opening .book {
  transform: translateX(-12%) rotateX(2deg) rotateY(0deg) rotateZ(0deg) scale(1.08);
}

.intro-gate.is-opening .book__cover {
  box-shadow: -1.4rem 1.3rem 3rem rgb(5 6 12 / 22%);
  transform: translateZ(0.8rem) rotateY(-158deg);
}

.intro-gate.is-opening .book-shadow {
  opacity: 0.32;
  transform: rotate(0deg) scaleX(1.2);
}

.intro-gate.is-dismissed {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

.film-grain {
  position: fixed;
  z-index: 30;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.site-header {
  position: fixed;
  z-index: 40;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr minmax(12rem, 23rem) 1fr;
  align-items: center;
  width: 100%;
  height: var(--header-height);
  padding: 0 3vw;
  color: rgb(247 236 216 / 88%);
  background: linear-gradient(to bottom, rgb(15 17 30 / 70%), transparent);
  transition: background 300ms ease;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  width: max-content;
  font-size: 0.84rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-decoration: none;
}

.brand-mark {
  position: relative;
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid currentcolor;
  border-radius: 50%;
}

.brand-mark::after {
  position: absolute;
  inset: 0.31rem;
  content: "";
  border-radius: 50%;
  background: var(--peach);
}

.story-progress {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.story-progress__label,
.story-progress__percent {
  color: rgb(247 236 216 / 58%);
}

.story-progress__track {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: rgb(247 236 216 / 22%);
}

.story-progress__value {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--story-progress) * 100%);
  background: linear-gradient(90deg, var(--peach), var(--amber));
  transition: width 80ms linear;
}

.music-control {
  position: relative;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.volume-control {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.6rem;
  padding: 0.35rem 0.7rem;
  color: rgb(247 236 216 / 72%);
  background: rgb(17 20 35 / 28%);
  border: 1px solid rgb(247 236 216 / 18%);
  border-radius: 999px;
  backdrop-filter: blur(0.7rem);
}

.volume-control__icon {
  font-size: 0.72rem;
}

.volume-control input {
  width: clamp(4rem, 6vw, 6.25rem);
  height: 1rem;
  margin: 0;
  cursor: pointer;
  accent-color: var(--amber);
}

.volume-control:focus-within {
  border-color: rgb(232 183 102 / 55%);
  box-shadow: 0 0 0 0.18rem rgb(232 183 102 / 12%);
}

.sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.6rem;
  padding: 0.4rem 0.8rem;
  color: inherit;
  cursor: pointer;
  background: rgb(17 20 35 / 28%);
  border: 1px solid rgb(247 236 216 / 22%);
  border-radius: 999px;
  backdrop-filter: blur(0.7rem);
}

.sound-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.sound-toggle__icon {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  color: var(--night);
  background: var(--amber);
  border-radius: 50%;
}

.sound-toggle__label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.music-picker {
  position: relative;
}

.music-picker > summary {
  min-width: 3.6rem;
  padding: 0.65rem 0.72rem;
  color: rgb(247 236 216 / 68%);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-align: center;
  list-style: none;
  cursor: pointer;
  background: rgb(17 20 35 / 28%);
  border: 1px solid rgb(247 236 216 / 18%);
  border-radius: 999px;
  backdrop-filter: blur(0.7rem);
}

.music-picker > summary::-webkit-details-marker {
  display: none;
}

.music-picker[open] > summary {
  color: var(--ink);
  border-color: rgb(232 183 102 / 48%);
}

.music-picker__panel {
  position: absolute;
  top: calc(100% + 0.65rem);
  right: 0;
  display: grid;
  gap: 0.3rem;
  width: min(21rem, calc(100vw - 2rem));
  padding: 0.7rem;
  color: var(--ink);
  background: rgb(18 21 37 / 94%);
  border: 1px solid rgb(247 236 216 / 16%);
  border-radius: 1rem;
  box-shadow: 0 1.4rem 4rem rgb(4 6 15 / 45%);
  backdrop-filter: blur(1.4rem);
}

.music-picker__panel > p {
  margin: 0;
  padding: 0.35rem 0.45rem 0.45rem;
  color: rgb(247 236 216 / 58%);
  font-size: 0.65rem;
  letter-spacing: 0.09em;
}

.music-picker__panel button {
  display: grid;
  gap: 0.18rem;
  width: 100%;
  padding: 0.72rem 0.8rem;
  color: inherit;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.7rem;
}

.music-picker__panel button:hover,
.music-picker__panel button:focus-visible,
.music-picker__panel button.is-current {
  background: rgb(247 236 216 / 7%);
  border-color: rgb(232 183 102 / 26%);
}

.music-picker__panel button strong {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 620;
}

.music-picker__panel button span {
  color: rgb(247 236 216 / 52%);
  font-size: 0.64rem;
}

.chapter-nav {
  position: fixed;
  z-index: 35;
  top: 50%;
  right: 2.2vw;
  display: grid;
  gap: 0.9rem;
  transform: translateY(-50%);
}

.chapter-nav a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 1.5rem;
  height: 1rem;
  color: rgb(247 236 216 / 58%);
  text-decoration: none;
}

.chapter-nav a::after {
  width: 0.36rem;
  height: 0.36rem;
  content: "";
  background: currentcolor;
  border-radius: 50%;
  transition: width 180ms ease, border-radius 180ms ease, background 180ms ease;
}

.chapter-nav a span {
  position: absolute;
  right: 1.2rem;
  padding: 0.25rem 0.45rem;
  font-size: 0.68rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  background: rgb(19 22 38 / 62%);
  border-radius: 0.25rem;
  transform: translateX(0.35rem);
  transition: opacity 180ms ease, transform 180ms ease;
}

.chapter-nav a:hover span,
.chapter-nav a:focus-visible span {
  opacity: 1;
  transform: translateX(0);
}

.chapter-nav a[aria-current="true"] {
  color: var(--amber);
}

.chapter-nav a[aria-current="true"]::after {
  width: 1.4rem;
  border-radius: 999px;
}

.story-section {
  position: relative;
  min-height: 165svh;
  --local-progress: 0;
}

/*
 * 序章与书籍不是长页中的普通两段，而是进入正文前的两扇独立全屏门。
 * JavaScript 只在这两页接管滚轮；进入 opening 以后恢复浏览器原生滚动。
 */
.has-js body.portal-active {
  overflow: hidden;
}

.has-js .portal-page {
  position: fixed;
  z-index: 24;
  inset: 0;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: scale(1.018);
  transition:
    opacity 720ms ease,
    transform 920ms cubic-bezier(0.18, 0.8, 0.22, 1),
    visibility 0s linear 920ms;
}

.has-js .portal-page.is-portal-active {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transform: scale(1);
  transition-delay: 0s;
}

.has-js .portal-page > .scene-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100svh;
}

.has-js .portal-page.story-section--earth,
.has-js .portal-page.story-section--book {
  min-height: 100svh;
}

/*
 * 情绪动效层：只增加呼吸、光线与阅读节拍，不锁定最终插画风格。
 * 正式插画接入后，这些效果仍可作为场景的前后景继续复用。
 */
.story-section::before {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 18svh;
  min-height: 7rem;
  content: "";
  pointer-events: none;
  opacity: 0.58;
  background: linear-gradient(to bottom, rgb(12 14 25 / 46%), transparent);
}

.scene-stage::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at calc(50% + var(--pointer-x) * 7%) calc(48% + var(--pointer-y) * 5%), transparent 24%, rgb(8 10 20 / 8%) 68%, rgb(8 10 20 / 34%) 100%),
    linear-gradient(to bottom, transparent 74%, rgb(8 10 20 / 16%));
  transition: background-position 900ms ease-out;
}

.story-section--earth {
  min-height: 430svh;
}

.story-section--book {
  min-height: 190svh;
  background: #20253d;
}

.scene-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 36rem;
  overflow: hidden;
  isolation: isolate;
}

.scene-visual {
  position: absolute;
  z-index: -2;
  inset: -3%;
  overflow: hidden;
  transform:
    translate3d(
      calc(var(--pointer-x) * -0.7%),
      calc((var(--local-progress) - 0.5) * -1.8% + var(--pointer-y) * -0.45%),
      0
    )
    scale(1.04);
  will-change: transform;
}

.earth-scene {
  position: absolute;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 68% 46%, rgb(70 92 125 / 24%), transparent 25%),
    radial-gradient(circle at 17% 28%, rgb(232 183 102 / 8%), transparent 18%),
    linear-gradient(145deg, #171a2b 0%, #202941 48%, #101421 100%);
}

.earth-scene::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(14 17 29 / 78%) 0%, transparent 55%),
    linear-gradient(0deg, rgb(10 12 22 / 34%), transparent 42%);
}

.earth-star {
  position: absolute;
  width: 0.22rem;
  height: 0.22rem;
  opacity: 0.5;
  background: #f7ecd8;
  border-radius: 50%;
  box-shadow: 0 0 0.8rem rgb(247 236 216 / 52%);
  animation: star-breathe 4.8s ease-in-out infinite;
}

.earth-star--one { top: 18%; left: 11%; }
.earth-star--two { top: 28%; right: 12%; animation-delay: -1.2s; }
.earth-star--three { right: 35%; bottom: 13%; animation-delay: -2.4s; }
.earth-star--four { bottom: 24%; left: 39%; animation-delay: -3.1s; }

@keyframes star-breathe {
  0%, 100% { opacity: 0.26; transform: scale(0.75); }
  50% { opacity: 0.82; transform: scale(1.35); }
}

.earth-system {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: min(94vmin, 58rem);
  aspect-ratio: 1;
  --earth-tilt-x: 0deg;
  --earth-tilt-y: 0deg;
  perspective: 80rem;
  transform:
    translate(calc(-50% + var(--local-progress) * 20vw), -50%)
    scale(calc(1.08 - var(--local-progress) * 0.2))
    rotateX(var(--earth-tilt-x))
    rotateY(var(--earth-tilt-y));
  transform-style: preserve-3d;
  transition: transform 240ms ease-out;
  opacity: max(0, min(calc((0.91 - var(--local-progress)) * 14), 1));
  will-change: transform;
}

.earth-globe {
  position: absolute;
  z-index: 2;
  inset: 8%;
  width: 84%;
  height: 84%;
  overflow: visible;
  filter: drop-shadow(0 2.8rem 4.5rem rgb(4 6 14 / 52%));
  transform: rotate(calc(var(--local-progress) * 5deg));
}

.earth-globe__atmosphere {
  fill: none;
  stroke: rgb(190 218 238 / 30%);
  stroke-width: 10;
  filter: drop-shadow(0 0 1.2rem rgb(151 194 220 / 42%));
}

.earth-globe__longitude ellipse {
  fill: none;
  stroke: rgb(219 229 230 / 8%);
  stroke-width: 1.2;
}

.earth-globe__continents {
  opacity: calc(0.58 + var(--local-progress) * 0.22);
}

.earth-globe__routes {
  opacity: calc(0.66 - var(--local-progress) * 0.42);
  stroke: rgb(232 183 102 / 42%);
  stroke-dasharray: 5 12;
  stroke-linecap: round;
  stroke-width: 2;
  animation: earth-routes 18s linear infinite;
}

@keyframes earth-routes {
  to { stroke-dashoffset: -170; }
}

.earth-globe__lights {
  fill: #f1be6b;
  opacity: calc(0.92 - var(--local-progress) * 0.56);
  animation: city-breathe 3.4s ease-in-out infinite;
}

.earth-globe__people {
  /* 旧版抽象线条小人已由儿童电影绘本立绘替换。 */
  display: none;
}

.earth-children {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 50%;
  width: 74%;
  height: auto;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: saturate(0.92) contrast(0.96) drop-shadow(0 1rem 1.8rem rgb(3 6 15 / 40%));
  opacity: clamp(0.32, calc(0.92 - var(--local-progress) * 0.7), 0.92);
  -webkit-mask-image: radial-gradient(ellipse 72% 66% at 50% 49%, #000 58%, transparent 92%);
  mask-image: radial-gradient(ellipse 72% 66% at 50% 49%, #000 58%, transparent 92%);
  transform: translateX(-50%) translateY(calc(var(--local-progress) * -1.5rem));
}

.earth-globe__people path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.earth-globe__people > g {
  transform-box: fill-box;
  transform-origin: center;
  animation: people-greeting 3.8s ease-in-out infinite alternate;
}

.earth-globe__people > g:nth-child(2) { animation-delay: -0.8s; }
.earth-globe__people > g:nth-child(3) { animation-delay: -1.7s; }
.earth-globe__people > g:nth-child(4) { animation-delay: -2.4s; }
.earth-globe__people > g:nth-child(5) { animation-delay: -3.1s; }

@keyframes people-greeting {
  from { opacity: 0.62; translate: 0 0; }
  to { opacity: 1; translate: 0 -1.4px; }
}

@keyframes city-breathe {
  0%, 100% { filter: brightness(0.82); }
  50% { filter: brightness(1.35); }
}

.earth-globe__shade {
  fill: rgb(4 7 16 / 48%);
}

.earth-halo {
  position: absolute;
  z-index: 0;
  border: 1px solid rgb(247 236 216 / 12%);
  border-radius: 50%;
  transform: rotate(-13deg) scaleY(0.46);
}

.earth-halo--outer {
  inset: 1%;
  border-style: dashed;
  animation: orbit-drift 26s linear infinite;
}

.earth-halo--inner {
  inset: 10%;
  border-color: rgb(232 183 102 / 20%);
  transform: rotate(27deg) scaleY(0.55);
  animation: orbit-drift 19s linear infinite reverse;
}

@keyframes orbit-drift {
  to { rotate: 1turn; }
}

.life-signal {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  min-width: 3.6rem;
  min-height: 3.6rem;
  padding: 0.5rem;
  color: rgb(247 236 216 / 76%);
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  opacity: max(0, min(calc((var(--local-progress) - 0.53) * 4.2), 1));
  background: rgb(21 26 43 / 48%);
  border: 1px solid rgb(247 236 216 / 18%);
  border-radius: 50%;
  box-shadow: 0 0 2.2rem rgb(232 183 102 / 8%);
  backdrop-filter: blur(0.55rem);
}

.life-signal::before {
  position: absolute;
  width: 0.3rem;
  height: 0.3rem;
  content: "";
  background: var(--amber);
  border-radius: 50%;
  box-shadow: 0 0 1rem var(--amber);
}

.life-signal--whale { top: 9%; left: 17%; transform: translateY(calc((1 - var(--local-progress)) * 1rem)); }
.life-signal--bird { top: 21%; right: 2%; transform: translateY(calc((1 - var(--local-progress)) * -1rem)); }
.life-signal--forest { right: 8%; bottom: 11%; transform: translateX(calc((1 - var(--local-progress)) * 1rem)); }
.life-signal--snow { bottom: 3%; left: 18%; transform: translateX(calc((1 - var(--local-progress)) * -1rem)); }

.earth-copy {
  position: absolute;
  z-index: 3;
  top: 51%;
  left: max(6vw, calc((100vw - 78rem) / 2));
  width: min(52rem, 86vw);
  text-shadow: 0 0.15rem 1.6rem rgb(8 10 20 / 38%);
  pointer-events: none;
  opacity: 1;
  transform: translateY(-50%);
}

.has-js .earth-copy {
  opacity: 0;
}

.earth-copy h1,
.earth-copy h2 {
  max-width: none;
}

.earth-copy h1 {
  font-size: clamp(4.2rem, 6.6vw, 6.1rem);
  line-height: 1.08;
  letter-spacing: -0.055em;
}

.earth-copy h2 {
  max-width: 10ch;
  font-size: clamp(3rem, 5.3vw, 4.8rem);
  line-height: 1.14;
  letter-spacing: -0.045em;
}

.earth-copy p {
  max-width: 38rem;
  margin: 0.8rem 0 0;
  color: var(--ink-muted);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.9;
}

.earth-copy .lead {
  color: var(--ink);
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
}

.earth-scroll-invite {
  position: absolute;
  z-index: 4;
  bottom: 2.4rem;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  margin: 0;
  color: rgb(247 236 216 / 64%);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  opacity: calc(1 - min(calc(var(--local-progress) * 10), 1));
  transform: translateX(-50%);
}

.earth-scroll-invite span:last-child {
  color: var(--amber);
  animation: scroll-invite 1.8s ease-in-out infinite;
}

@keyframes scroll-invite {
  0%, 100% { transform: translateY(-0.2rem); }
  50% { transform: translateY(0.35rem); }
}

.has-js .earth-copy--beat-one {
  opacity: max(0, min(calc((var(--local-progress) - 0.06) * 11), calc((0.31 - var(--local-progress)) * 10), 1));
  transform: translateY(calc(-46% - var(--local-progress) * 1.2rem));
}

.has-js .earth-copy--beat-two {
  opacity: max(0, min(calc((var(--local-progress) - 0.28) * 11), calc((0.53 - var(--local-progress)) * 10), 1));
  transform: translateY(calc(-45% - var(--local-progress) * 1.1rem));
}

.has-js .earth-copy--beat-three {
  opacity: max(0, min(calc((var(--local-progress) - 0.5) * 11), calc((0.75 - var(--local-progress)) * 10), 1));
  transform: translateY(calc(-44% - var(--local-progress) * 1rem));
}

.has-js .earth-copy--beat-four {
  pointer-events: auto;
  opacity: max(0, min(calc((var(--local-progress) - 0.72) * 10), calc((0.9 - var(--local-progress)) * 14), 1));
  transform: translateY(calc(-43% - var(--local-progress) * 0.8rem));
}

.display-line,
.copy-line {
  display: block;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
}

.earth-book-match {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: max(0, min(calc((var(--local-progress) - 0.87) * 13), 1));
  background:
    radial-gradient(circle at 34% 48%, rgb(232 183 102 / 14%), transparent 22%),
    linear-gradient(145deg, rgb(32 37 61 / 96%), rgb(19 23 39 / 98%));
}

.earth-book-match__halo {
  position: absolute;
  top: 50%;
  left: 34%;
  width: min(68vmin, 42rem);
  aspect-ratio: 1;
  border: 1px solid rgb(247 236 216 / 10%);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-17deg) scaleY(0.44);
}

.transition-book {
  position: absolute;
  top: 50%;
  left: 34%;
  display: grid;
  align-content: center;
  justify-items: center;
  width: min(32vw, 58vh, 36rem);
  aspect-ratio: 0.72;
  padding: 2rem;
  overflow: hidden;
  color: #f7ecd8;
  text-align: center;
  background:
    radial-gradient(circle at 68% 24%, rgb(232 183 102 / 22%), transparent 28%),
    linear-gradient(145deg, #4a4e72 0%, #27324f 48%, #242438 100%);
  border: 1px solid rgb(247 236 216 / 20%);
  border-radius: 0.35rem 0.8rem 0.8rem 0.35rem;
  box-shadow:
    inset 0 0 0 0.38rem rgb(247 236 216 / 5%),
    inset 1rem 0 1.8rem rgb(8 9 18 / 34%),
    0 2.8rem 5rem rgb(5 6 12 / 42%);
  transform:
    translate(-50%, -50%)
    rotateX(calc((1 - var(--local-progress)) * 10deg))
    rotateY(calc((1 - var(--local-progress)) * -14deg))
    scale(max(0.72, min(calc((var(--local-progress) - 0.84) * 5), 1)));
  transform-style: preserve-3d;
}

.transition-book::after {
  position: absolute;
  inset: 1.15rem;
  content: "";
  border: 1px solid rgb(232 183 102 / 38%);
  border-radius: 0.15rem 0.55rem 0.55rem 0.15rem;
}

.transition-book__spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1.3rem;
  width: 1px;
  background: rgb(232 183 102 / 35%);
}

.transition-book__kicker,
.transition-book__note {
  position: relative;
  z-index: 2;
  color: rgb(247 236 216 / 60%);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
}

.transition-book strong {
  position: relative;
  z-index: 2;
  margin: 1.3rem 0;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  font-size: clamp(3.1rem, 5vw, 5rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: 0.12em;
}

.transition-book__orbit {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  opacity: 0.3;
  border: 1px solid var(--amber);
  border-radius: 50%;
  transform: rotate(-24deg) scaleY(0.36);
}

.earth-book-match > p {
  position: absolute;
  right: 9vw;
  bottom: 12vh;
  width: min(25rem, 28vw);
  margin: 0;
  color: rgb(247 236 216 / 62%);
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.8;
}

.book-chapter {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 46%, rgb(232 183 102 / 15%), transparent 26%),
    linear-gradient(145deg, #252b47 0%, #1a1f35 58%, #131727 100%);
}

.book-chapter__backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.book-chapter__backdrop::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.32;
  background:
    radial-gradient(circle at 28% 23%, rgb(242 182 160 / 22%), transparent 18%),
    radial-gradient(circle at 73% 72%, rgb(111 159 145 / 18%), transparent 20%);
  filter: blur(2.2rem);
}

.book-chapter__orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgb(247 236 216 / 9%);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-18deg) scaleY(0.42);
}

.book-chapter__orbit--one { width: 72vmin; height: 72vmin; }
.book-chapter__orbit--two { width: 96vmin; height: 96vmin; border-style: dashed; transform: translate(-50%, -50%) rotate(24deg) scaleY(0.5); }

.book-stage--chapter {
  position: absolute;
  inset: var(--header-height) 0 0;
  min-height: 0;
  perspective: 120rem;
  transform: translateX(-16vw);
  transition: transform 1100ms cubic-bezier(0.18, 0.8, 0.22, 1);
}

.book--chapter {
  width: min(32vw, 58vh, 36rem);
  transform: rotateX(4deg) rotateY(-12deg) rotateZ(1deg);
  transition:
    width 1250ms cubic-bezier(0.18, 0.8, 0.22, 1),
    transform 1350ms cubic-bezier(0.18, 0.8, 0.22, 1);
}

.book--chapter.is-open {
  width: min(47vw, 68vh, 60rem);
  transform: translateX(49%) rotateX(1deg) rotateY(0deg) rotateZ(0deg);
}

.book-chapter.has-open-book .book-stage--chapter {
  transform: translateX(0);
}

.book--chapter.is-open .book__cover {
  box-shadow: -1.4rem 1.3rem 3rem rgb(5 6 12 / 22%);
  transform: translateZ(0.8rem) rotateY(-158deg);
}

.book__page--story {
  color: #27324f;
  background:
    radial-gradient(circle at 72% 18%, rgb(232 183 102 / 24%), transparent 24%),
    linear-gradient(135deg, #f8efd9, #e9dcc1);
}

.book__left-page {
  position: absolute;
  z-index: 2;
  inset: 0.7rem 0.2rem 0.7rem 0.7rem;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 28% 22%, rgb(201 111 91 / 12%), transparent 24%),
    linear-gradient(225deg, #f8efd9, #e6d8bb);
  border-radius: 0.35rem 0.8rem 0.8rem 0.35rem;
  box-shadow: inset 1.3rem 0 2rem rgb(61 50 54 / 12%);
  transform: translateZ(0.65rem);
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: opacity 180ms ease 360ms, transform 1350ms cubic-bezier(0.18, 0.78, 0.2, 1);
}

.book--chapter.is-open .book__left-page {
  opacity: 1;
  transform: translateZ(0.65rem) rotateY(-158deg);
}

.book__left-page-orbit {
  position: absolute;
  top: 16%;
  left: 15%;
  width: 68%;
  aspect-ratio: 1;
  opacity: 0.18;
  border: 1px solid #8b5949;
  border-radius: 50%;
  transform: rotate(26deg) scaleY(0.42);
}

.book__left-page-line {
  position: absolute;
  right: 16%;
  height: 1px;
  background: rgb(39 50 79 / 14%);
}

.book__left-page-line--one { bottom: 26%; width: 48%; }
.book__left-page-line--two { bottom: 21%; width: 56%; }
.book__left-page-line--three { bottom: 16%; width: 38%; }

.book-page-copy {
  position: absolute;
  inset: 12% 11% 10% 17%;
  display: grid;
  align-content: center;
  justify-items: start;
  opacity: 0;
  transform: translateX(-1rem);
  transition: opacity 500ms ease 650ms, transform 650ms ease 620ms;
}

html:not(.has-js) .story-section--earth {
  min-height: auto;
  padding: 7rem 6vw 4rem;
  background: #171a2b;
}

html:not(.has-js) .story-section--earth .scene-stage {
  height: auto;
  min-height: 0;
  overflow: visible;
}

html:not(.has-js) .earth-scene,
html:not(.has-js) .earth-scroll-invite {
  display: none;
}

html:not(.has-js) .earth-copy {
  position: relative;
  top: auto;
  left: auto;
  width: min(42rem, 100%);
  margin: 0 0 3.5rem;
  pointer-events: auto;
  opacity: 1;
  transform: none;
}

html:not(.has-js) .story-section--book {
  min-height: 44rem;
}

html:not(.has-js) .book--chapter {
  transform: translateX(49%) rotateX(1deg) rotateY(0deg) scale(0.9);
}

html:not(.has-js) .book--chapter .book__cover {
  transform: translateZ(0.8rem) rotateY(-158deg);
}

html:not(.has-js) .book-page-copy {
  opacity: 1;
  transform: none;
}

html:not(.has-js) .book-cover-action {
  display: none;
}

.book--chapter.is-open .book-page-copy {
  opacity: 1;
  transform: translateX(0);
}

.book-page-copy > span {
  color: #8b5949;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.book-page-copy h2 {
  max-width: 6ch;
  margin: 0.8rem 0 0;
  font-size: clamp(2.2rem, 4.4vmin, 3.6rem);
}

.book-page-copy p {
  margin: 1rem 0 0;
  color: rgb(39 50 79 / 72%);
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  font-size: 0.9rem;
  line-height: 1.8;
}

.book-page-copy a {
  display: inline-flex;
  gap: 0.8rem;
  margin-top: 1.4rem;
  padding-bottom: 0.3rem;
  color: #27324f;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-bottom: 1px solid rgb(39 50 79 / 30%);
}

.book-cover-action {
  position: relative;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1.5rem;
  padding: 0.65rem 0.85rem;
  color: #f7ecd8;
  cursor: pointer;
  background: rgb(17 20 35 / 26%);
  border: 1px solid rgb(247 236 216 / 30%);
  border-radius: 999px;
  backdrop-filter: blur(0.5rem);
}

.book-chapter__hint {
  position: absolute;
  right: 1rem;
  bottom: 1.2rem;
  left: 1rem;
  margin: 0;
  color: rgb(247 236 216 / 42%);
  font-size: 0.67rem;
  letter-spacing: 0.08em;
  text-align: center;
}

.book-companion-art {
  position: absolute;
  z-index: 2;
  top: 47%;
  right: 7vw;
  width: min(28vw, 25rem);
  margin: 0;
  opacity: 1;
  transform: translateY(-50%) rotate(2.5deg);
  transition:
    opacity 650ms ease,
    transform 950ms cubic-bezier(0.18, 0.8, 0.22, 1);
}

.book-companion-art__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  padding: 0.7rem;
  overflow: hidden;
  background: #e9dcc1;
  border: 1px solid rgb(247 236 216 / 28%);
  border-radius: 0.25rem;
  box-shadow: 0 2.2rem 5rem rgb(5 6 12 / 38%);
}

.book-companion-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(0.9) contrast(0.94) brightness(0.94);
}

.book-companion-art__glow {
  position: absolute;
  inset: 0.7rem;
  pointer-events: none;
  background:
    linear-gradient(to top, rgb(24 27 46 / 60%), transparent 44%),
    radial-gradient(circle at 68% 28%, rgb(232 183 102 / 16%), transparent 30%);
}

.book-companion-art figcaption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.9rem;
  color: rgb(247 236 216 / 58%);
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
}

.book-chapter.has-open-book .book-companion-art {
  pointer-events: none;
  opacity: 0;
  transform: translate(4rem, -50%) rotate(5deg);
}

/* 长篇故事：每章先用原来的满屏段落做封面，再让三帧正文各自停留。 */
.chapter-story {
  position: relative;
  --chapter-accent: #e8b766;
  background: #171c2c;
}

.chapter-story--coco { background: #18223a; }
.chapter-story--light { background: #172238; }
.chapter-story--routes { background: #242332; }
.chapter-story--poaching { background: #282837; }
.chapter-story--horseshoe { background: #172b39; }
.chapter-story--rescue { background: #342b2c; }

/* 藏羚羊章节以高原、迁徙线、商品纤维和巡护节点讲述。
   正式插画到位前保持抽象、非血腥，也不把雌性误画成有长角的雄性。 */
.scene-visual--poaching,
.story-frame__visual--antelope-route,
.story-frame__visual--antelope-return {
  background:
    radial-gradient(ellipse at 68% 22%, rgb(224 174 111 / 24%), transparent 32%),
    linear-gradient(148deg, #384151 0%, #4f4b58 48%, #242735 100%);
}

.scene-image--poaching {
  object-position: 48% 50%;
  filter: saturate(0.72) contrast(1.04) brightness(0.68);
  transform: scale(calc(1.035 + min(var(--local-progress), 1) * 0.025));
}

.scene-image-veil--poaching {
  opacity: 1;
  background:
    linear-gradient(90deg, rgb(20 22 34 / 18%) 0%, rgb(24 25 36 / 34%) 38%, rgb(24 25 36 / 91%) 72%, rgb(18 20 31 / 96%) 100%),
    linear-gradient(0deg, rgb(21 22 34 / 72%) 0%, transparent 56%);
}

#poaching .story-copy {
  width: min(42rem, 45vw);
}

#poaching .story-copy h2 {
  font-size: clamp(2.85rem, 4.55vw, 4.75rem);
}

#poaching .story-copy .lead {
  max-width: 29rem;
}

.plateau-ridge,
.antelope-route,
.antelope-herd,
.trade-thread,
.grass-wind,
.fiber-field,
.trade-label,
.trade-line,
.patrol-node,
.passage-road,
.passage-lights,
.antelope-dawn {
  position: absolute;
  display: block;
  pointer-events: none;
}

.plateau-ridge {
  right: -5%;
  bottom: 16%;
  width: 76%;
  height: 50%;
  opacity: 0.42;
  background: linear-gradient(145deg, rgb(163 164 168 / 18%), rgb(21 24 35 / 46%));
  clip-path: polygon(0 72%, 10% 61%, 23% 68%, 36% 38%, 47% 55%, 62% 23%, 75% 47%, 90% 30%, 100% 42%, 100% 100%, 0 100%);
}

.plateau-ridge--far {
  right: 5%;
  bottom: 29%;
  opacity: 0.24;
  transform: scale(1.18);
}

.plateau-ridge--near { right: -12%; bottom: 5%; opacity: 0.58; }
.plateau-ridge--night { right: -8%; bottom: 0; width: 82%; opacity: 0.46; }

.antelope-route {
  right: 12%;
  bottom: 31%;
  width: 54%;
  border-top: 1px dashed rgb(232 183 102 / 46%);
  opacity: calc(0.28 + var(--local-progress, var(--frame-progress, 0)) * 0.62);
  transform: rotate(-7deg) scaleX(calc(0.45 + var(--local-progress, var(--frame-progress, 0)) * 0.55));
  transform-origin: left;
}

.antelope-route--frame { right: 9%; bottom: 37%; width: 62%; }
.antelope-route--recovery { right: 10%; bottom: 43%; width: 62%; transform: rotate(3deg) scaleX(calc(0.38 + var(--frame-progress) * 0.62)); }
.antelope-route--return { right: 18%; bottom: 28%; width: 64%; }

.antelope-herd {
  right: 10%;
  bottom: 26%;
  width: min(54vw, 48rem);
  height: min(20vw, 17rem);
  opacity: 0.86;
}

.antelope-herd i {
  position: absolute;
  display: block;
  width: clamp(2.5rem, 4.8vw, 4.6rem);
  height: clamp(0.9rem, 1.7vw, 1.6rem);
  border: 1px solid rgb(247 236 216 / 40%);
  border-radius: 58% 48% 50% 46%;
  background: linear-gradient(160deg, rgb(218 194 157 / 32%), rgb(87 81 82 / 28%));
  box-shadow: 0 0.8rem 2.5rem rgb(7 8 16 / 18%);
}

.antelope-herd i::before {
  position: absolute;
  right: -10%;
  bottom: 56%;
  width: 34%;
  height: 105%;
  content: "";
  border-top: 1px solid rgb(247 236 216 / 36%);
  border-right: 1px solid rgb(247 236 216 / 36%);
  border-radius: 0 65% 42% 0;
  transform: rotate(-18deg);
}

.antelope-herd i::after {
  position: absolute;
  top: 87%;
  left: 18%;
  width: 58%;
  height: 88%;
  content: "";
  border-right: 1px solid rgb(247 236 216 / 35%);
  border-left: 1px solid rgb(247 236 216 / 35%);
  transform: skewX(-8deg);
}

.antelope-herd i:nth-child(1) { right: 5%; bottom: 12%; transform: scale(1.08); }
.antelope-herd i:nth-child(2) { right: 28%; bottom: 35%; transform: scale(0.82); }
.antelope-herd i:nth-child(3) { right: 49%; bottom: 20%; transform: scale(0.68); }
.antelope-herd i:nth-child(4) { right: 68%; bottom: 46%; transform: scale(0.52); }
.antelope-herd i:nth-child(5) { right: 84%; bottom: 27%; transform: scale(0.4); }

.antelope-herd--single { right: 14%; bottom: 29%; width: 30vw; }
.antelope-herd--single i { right: 12%; bottom: 20%; transform: scale(1.65); }
.antelope-herd--recovery { right: 9%; bottom: 31%; width: 66vw; }
.antelope-herd--return { right: 19%; bottom: 31%; width: 43vw; }

.trade-thread {
  top: 29%;
  right: 6%;
  width: 48%;
  height: 34%;
  border-top: 1px solid rgb(195 112 100 / 34%);
  border-right: 1px dashed rgb(195 112 100 / 28%);
  border-radius: 0 68% 0 0;
  transform: rotate(8deg);
}

.grass-wind {
  right: 0;
  bottom: 8%;
  width: 68%;
  height: 32%;
  opacity: 0.24;
  background: repeating-linear-gradient(103deg, transparent 0 1.15rem, rgb(226 190 134 / 34%) 1.2rem 1.25rem, transparent 1.3rem 2.2rem);
  transform: skewX(calc(-10deg + var(--frame-progress) * 8deg));
}

.story-frame__visual--shahtoosh {
  background:
    radial-gradient(circle at 70% 40%, rgb(232 183 102 / 14%), transparent 27%),
    linear-gradient(145deg, #2e2d3d 0%, #514553 58%, #272735 100%);
}

.fiber-field {
  top: 10%;
  right: -5%;
  width: 61%;
  height: 80%;
  opacity: calc(0.16 + var(--frame-progress) * 0.36);
  background: repeating-linear-gradient(78deg, transparent 0 0.85rem, rgb(236 218 188 / 16%) 0.9rem 0.98rem, transparent 1.04rem 1.75rem);
  mask-image: radial-gradient(ellipse, #000 16%, transparent 72%);
  transform: translateX(calc((1 - var(--frame-progress)) * 4rem));
}

.trade-label {
  top: 31%;
  right: 8%;
  width: clamp(8rem, 18vw, 17rem);
  height: clamp(4rem, 9vw, 8rem);
  border: 1px solid rgb(232 183 102 / 34%);
  border-radius: 0.3rem;
  background: linear-gradient(135deg, rgb(247 236 216 / 7%), rgb(16 17 28 / 20%));
  transform: rotate(6deg) translateY(calc(var(--frame-progress) * -1rem));
}

.trade-label::before {
  position: absolute;
  top: 50%;
  left: -48%;
  width: 48%;
  content: "";
  border-top: 1px solid rgb(232 183 102 / 28%);
}

.trade-label::after {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 28%;
  aspect-ratio: 1;
  content: "";
  border: 1px dashed rgb(247 236 216 / 20%);
  border-radius: 50%;
}

.trade-label--fading { opacity: calc(0.7 - var(--frame-progress) * 0.7); }

.story-frame__visual--patrol {
  background:
    radial-gradient(circle at 72% 50%, rgb(232 183 102 / 13%), transparent 24%),
    linear-gradient(150deg, #181d2a, #292b37 55%, #171925);
}

.trade-line {
  top: 52%;
  right: 6%;
  width: 58%;
  border-top: 2px dashed rgb(188 91 83 / 40%);
  transform: rotate(-5deg) scaleX(calc(0.98 - var(--frame-progress) * 0.7));
  transform-origin: right;
}

.patrol-node {
  top: 48%;
  width: 1.1rem;
  aspect-ratio: 1;
  border: 1px solid rgb(232 183 102 / 52%);
  border-radius: 50%;
  background: rgb(232 183 102 / 22%);
  box-shadow: 0 0 2.2rem rgb(232 183 102 / 42%);
  opacity: calc(0.2 + var(--frame-progress) * 0.8);
}

.patrol-node--one { right: 18%; }
.patrol-node--two { top: 42%; right: 38%; }
.patrol-node--three { top: 54%; right: 58%; }

.story-frame__visual--recovery {
  background:
    radial-gradient(ellipse at 64% 24%, rgb(226 181 116 / 28%), transparent 32%),
    linear-gradient(155deg, #4c4b59, #3a404c 58%, #252a36);
}

.passage-road {
  right: -8%;
  bottom: 17%;
  width: 74%;
  height: 24%;
  border-top: 1px solid rgb(219 213 199 / 28%);
  border-bottom: 1px solid rgb(219 213 199 / 16%);
  background: linear-gradient(rgb(31 34 45 / 26%), rgb(18 20 29 / 38%));
  transform: rotate(2deg) skewX(-20deg);
}

.passage-lights {
  right: 18%;
  bottom: 33%;
  width: 30%;
  border-top: 3px dotted rgb(232 183 102 / 42%);
  opacity: calc(0.7 - var(--frame-progress) * 0.55);
}

.story-frame__visual--antelope-return {
  background:
    radial-gradient(ellipse at 52% 26%, rgb(247 194 126 / 36%), transparent 34%),
    linear-gradient(155deg, #5d5962, #3c434f 55%, #272d38);
}

.antelope-dawn {
  top: 18%;
  left: 50%;
  width: min(62vw, 52rem);
  height: 30%;
  background: radial-gradient(ellipse, rgb(247 196 130 / 42%), transparent 69%);
  filter: blur(1.2rem);
  transform: translateX(-50%) scale(calc(0.9 + var(--frame-progress) * 0.15));
}

/* 鲎章节采用“潮汐—实验室—替代技术—归海”的抽象分镜。
   在正式插画生成完成前，它也能独立表达科学与生命并置的叙事。 */
.scene-visual--horseshoe,
.story-frame__visual--horseshoe-tide,
.story-frame__visual--horseshoe-return {
  background:
    radial-gradient(circle at 18% 18%, rgb(114 205 218 / 24%), transparent 28%),
    radial-gradient(ellipse at 72% 76%, rgb(232 183 102 / 18%), transparent 33%),
    linear-gradient(145deg, #163445 0%, #1c5366 48%, #102331 100%);
}

.horseshoe-tide,
.horseshoe-form,
.horseshoe-lab-line,
.horseshoe-cell,
.horseshoe-sample,
.process-step,
.process-route,
.test-path,
.test-result,
.horseshoe-dawn {
  position: absolute;
  display: block;
  pointer-events: none;
}

.horseshoe-tide {
  right: -12vw;
  bottom: 10%;
  width: 78vw;
  height: 35%;
  border: 1px solid rgb(155 222 224 / 18%);
  border-radius: 50%;
  opacity: 0.72;
  transform: rotate(-7deg);
}

.horseshoe-tide::before,
.horseshoe-tide::after {
  position: absolute;
  inset: 16% 8%;
  content: "";
  border: 1px solid rgb(155 222 224 / 17%);
  border-radius: inherit;
}

.horseshoe-tide::after { inset: 34% 17%; }
.horseshoe-tide--two { right: -22vw; bottom: -4%; transform: rotate(4deg); }
.horseshoe-tide--return { right: -8vw; bottom: -8%; width: 96vw; opacity: 0.9; }

.horseshoe-form {
  top: 24%;
  right: 17%;
  width: min(34vw, 31rem);
  aspect-ratio: 1.06;
  border: 1px solid rgb(232 183 102 / 42%);
  border-radius: 52% 52% 42% 42% / 58% 58% 34% 34%;
  background:
    radial-gradient(circle at 38% 39%, rgb(247 236 216 / 24%) 0 1.3%, transparent 1.7%),
    radial-gradient(circle at 62% 39%, rgb(247 236 216 / 24%) 0 1.3%, transparent 1.7%),
    radial-gradient(ellipse at 50% 55%, rgb(89 158 174 / 36%), rgb(24 69 82 / 12%) 64%, transparent 66%);
  box-shadow: inset 0 0 3.5rem rgb(90 185 199 / 18%), 0 2rem 7rem rgb(4 12 19 / 28%);
  transform: rotate(-9deg) translate3d(0, calc((var(--local-progress, var(--frame-progress, 0)) - 0.5) * 1.5rem), 0);
}

.horseshoe-form::before {
  position: absolute;
  top: 91%;
  left: 49.5%;
  width: 1px;
  height: 62%;
  content: "";
  background: linear-gradient(rgb(232 183 102 / 48%), transparent);
  transform: rotate(4deg);
  transform-origin: top;
}

.horseshoe-form::after {
  position: absolute;
  inset: 12%;
  content: "";
  border: 1px dashed rgb(154 221 224 / 21%);
  border-radius: inherit;
}

.horseshoe-form i,
.horseshoe-form i::before,
.horseshoe-form i::after {
  position: absolute;
  bottom: -14%;
  width: 44%;
  height: 27%;
  content: "";
  border-bottom: 1px solid rgb(232 183 102 / 35%);
  border-radius: 50%;
}

.horseshoe-form i { left: 28%; }
.horseshoe-form i::before { right: 65%; bottom: 13%; width: 100%; transform: rotate(18deg); }
.horseshoe-form i::after { left: 65%; bottom: 13%; width: 100%; transform: rotate(-18deg); }

.horseshoe-form--frame { top: 23%; right: 15%; }
.horseshoe-form--return { top: 41%; right: 48%; width: min(22vw, 18rem); opacity: 0.8; transform: translateX(50%) rotate(7deg); }

.horseshoe-lab-line {
  top: 32%;
  right: 7%;
  width: 54%;
  height: 42%;
  border-top: 1px dashed rgb(155 222 224 / 28%);
  border-right: 1px dashed rgb(155 222 224 / 19%);
  border-radius: 0 80% 0 0;
  transform: rotate(-7deg);
}

.story-frame__visual--horseshoe-cells {
  background:
    radial-gradient(circle at 68% 44%, rgb(91 194 218 / 24%), transparent 32%),
    linear-gradient(135deg, #102a3b, #204e60 54%, #112530);
}

.horseshoe-cell {
  width: clamp(7rem, 13vw, 13rem);
  aspect-ratio: 1;
  border: 1px solid rgb(166 230 233 / 35%);
  border-radius: 44% 56% 48% 52%;
  background: radial-gradient(circle at 42% 38%, rgb(215 246 244 / 26%), rgb(53 143 162 / 15%) 38%, transparent 70%);
  box-shadow: 0 0 4rem rgb(54 177 198 / 12%);
  transform: rotate(calc(var(--frame-progress) * 25deg)) scale(calc(0.86 + var(--frame-progress) * 0.2));
}

.horseshoe-cell::after {
  position: absolute;
  inset: 31%;
  content: "";
  border: 1px dashed rgb(232 183 102 / 37%);
  border-radius: 48% 52% 45% 55%;
}

.horseshoe-cell--one { top: 18%; right: 16%; }
.horseshoe-cell--two { top: 43%; right: 34%; width: clamp(5rem, 9vw, 9rem); }
.horseshoe-cell--three { right: 8%; bottom: 10%; width: clamp(4rem, 7vw, 7rem); }

.horseshoe-sample {
  top: 17%;
  right: 43%;
  width: 2px;
  height: 66%;
  opacity: calc(0.28 + var(--frame-progress) * 0.5);
  background: linear-gradient(transparent, #8fd7e2 20%, #4ea4bb 75%, transparent);
  box-shadow: 0 0 1.4rem #5fc4d4;
}

.story-frame__visual--horseshoe-process {
  background:
    radial-gradient(circle at 72% 50%, rgb(232 183 102 / 12%), transparent 34%),
    linear-gradient(130deg, #102532 0%, #1e3e4a 58%, #182834 100%);
}

.process-step {
  top: 46%;
  width: clamp(3.8rem, 7vw, 6.5rem);
  aspect-ratio: 1;
  border: 1px solid rgb(155 222 224 / 30%);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(93 180 193 / 22%), transparent 68%);
  box-shadow: 0 0 2.5rem rgb(44 151 170 / 10%);
}

.process-step::before {
  position: absolute;
  top: 50%;
  left: 100%;
  width: calc(10vw - 0.7rem);
  content: "";
  border-top: 1px dashed rgb(232 183 102 / 32%);
}

.process-step::after {
  position: absolute;
  inset: 35%;
  content: "";
  border: 1px solid rgb(247 236 216 / 31%);
  border-radius: 50%;
}

.process-step--one { left: 42%; }
.process-step--two { left: 54%; }
.process-step--three { left: 66%; }
.process-step--four { left: 78%; }
.process-step--four::before { display: none; }

.process-route {
  top: 28%;
  left: 39%;
  width: 51%;
  height: 45%;
  border: 1px solid rgb(155 222 224 / 13%);
  border-radius: 50%;
  transform: scaleX(calc(0.6 + var(--frame-progress) * 0.4));
}

.story-frame__visual--horseshoe-alternative {
  background:
    radial-gradient(circle at 73% 37%, rgb(105 205 212 / 20%), transparent 27%),
    linear-gradient(140deg, #122a35, #244b52 55%, #172c35);
}

.test-path {
  right: 12%;
  width: 39%;
  height: 1px;
  transform-origin: right center;
}

.test-path::before {
  position: absolute;
  top: -0.45rem;
  left: -0.85rem;
  width: 0.9rem;
  aspect-ratio: 1;
  content: "";
  border: 1px solid currentColor;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 1.5rem currentColor;
}

.test-path--animal {
  top: 41%;
  color: rgb(232 183 102 / 58%);
  border-top: 1px dashed currentColor;
  transform: rotate(-11deg) scaleX(calc(0.4 + var(--frame-progress) * 0.6));
}

.test-path--recombinant {
  top: 60%;
  color: rgb(126 217 210 / 60%);
  border-top: 1px solid currentColor;
  transform: rotate(9deg) scaleX(calc(0.4 + var(--frame-progress) * 0.6));
}

.test-result {
  top: 43%;
  right: 8%;
  width: 4.2rem;
  aspect-ratio: 1;
  border: 1px solid rgb(247 236 216 / 38%);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(247 236 216 / 20%), transparent 62%);
  box-shadow: 0 0 3.5rem rgb(142 220 215 / 16%);
}

.story-frame__visual--horseshoe-return {
  background:
    radial-gradient(ellipse at 50% 28%, rgb(245 183 117 / 32%), transparent 34%),
    linear-gradient(#325b67 0%, #224855 47%, #15303e 100%);
}

.horseshoe-dawn {
  top: 24%;
  left: 50%;
  width: min(56vw, 48rem);
  height: 24%;
  background: radial-gradient(ellipse, rgb(247 203 143 / 42%), transparent 70%);
  filter: blur(1rem);
  transform: translateX(-50%) scale(calc(0.9 + var(--frame-progress) * 0.14));
}

.story-frame {
  position: relative;
  min-height: 172svh;
  --frame-progress: 0;
}

.story-frame__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 36rem;
  overflow: hidden;
  isolation: isolate;
}

.story-frame__visual {
  position: absolute;
  z-index: -2;
  inset: -2%;
  overflow: hidden;
  background: #141827;
  transform: translate3d(0, calc((var(--frame-progress) - 0.5) * -2.2%), 0) scale(1.045);
  will-change: transform;
}

.story-frame__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(0.96);
  transform: scale(calc(1.03 + var(--frame-progress) * 0.025));
  transition: filter 900ms ease;
}

/* 04-01 先使用已生成的竖幅穿山甲插画；把主体稳定留在横向叙事画布中。 */
.story-frame__visual img[data-story-art-key="04-01"] {
  object-position: 50% 66%;
}

.story-frame__stage::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, transparent 18%, rgb(7 9 18 / 18%) 72%),
    linear-gradient(to bottom, rgb(8 10 18 / 12%), rgb(8 10 18 / 36%));
}

.story-frame__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.story-frame__veil--ocean {
  background: linear-gradient(90deg, rgb(12 19 37 / 72%) 0%, transparent 58%, rgb(12 18 35 / 22%));
}

.story-frame__veil--deep {
  background: linear-gradient(110deg, rgb(9 12 25 / 28%) 0%, rgb(9 12 25 / 70%) 72%);
}

.story-frame__veil--hope {
  background:
    radial-gradient(circle at 55% 34%, rgb(232 183 102 / 12%), transparent 27%),
    linear-gradient(0deg, rgb(9 12 25 / 62%) 0%, transparent 72%);
}

.story-frame__veil--sand {
  background: linear-gradient(90deg, rgb(13 20 36 / 68%) 0%, transparent 62%);
}

.story-frame__veil--light {
  background:
    radial-gradient(circle at 83% 48%, rgb(232 183 102 / 28%), transparent 24%),
    linear-gradient(90deg, rgb(11 18 34 / 20%), rgb(11 18 34 / 62%));
}

.story-frame__veil--forest {
  background: linear-gradient(90deg, rgb(13 21 25 / 70%), transparent 58%, rgb(10 16 20 / 28%));
}

.story-frame__veil--snow {
  background: linear-gradient(90deg, rgb(28 29 42 / 66%), transparent 62%);
}

.story-frame__copy {
  position: absolute;
  z-index: 4;
  top: 50%;
  width: min(38rem, 82vw);
  padding: clamp(1.35rem, 2.6vw, 2.5rem);
  color: var(--ink);
  background: linear-gradient(135deg, rgb(18 22 37 / 68%), rgb(18 22 37 / 34%));
  border: 1px solid rgb(247 236 216 / 13%);
  border-radius: 0.35rem 1.4rem 0.35rem 1.4rem;
  box-shadow: 0 1.8rem 5rem rgb(4 6 13 / 24%);
  text-shadow: 0 0.12rem 1.1rem rgb(5 7 15 / 26%);
  backdrop-filter: blur(0.7rem);
  opacity: max(0, min(calc((var(--frame-progress) - 0.04) * 12), calc((0.96 - var(--frame-progress)) * 13), 1));
  transform: translateY(calc(-48% - var(--frame-progress) * 0.9rem));
}

.story-frame__copy--left {
  left: max(6vw, calc((100vw - 78rem) / 2));
}

.story-frame__copy--right {
  right: max(7vw, calc((100vw - 78rem) / 2));
}

.story-frame__copy--center {
  right: 50%;
  width: min(44rem, 84vw);
  text-align: center;
  transform: translate(50%, calc(-48% - var(--frame-progress) * 0.9rem));
}

.story-frame__number {
  margin: 0 0 1rem;
  color: var(--amber);
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.2em;
}

.story-frame__copy h3 {
  max-width: 100%;
  margin: 0;
  font-family: var(--font-hand);
  font-size: clamp(2.3rem, 3.35vw, 4.15rem);
  font-weight: 500;
  line-height: 1.17;
  letter-spacing: -0.025em;
  line-break: strict;
  word-break: keep-all;
  text-wrap: balance;
  text-shadow: 0 0.08em 0.55em rgb(232 183 102 / 8%);
}

.story-frame__copy--center h3 {
  margin-inline: auto;
}

.story-frame__copy p:not(.story-frame__number) {
  max-width: 38rem;
  margin: 1rem 0 0;
  color: rgb(247 236 216 / 72%);
  font-size: clamp(0.95rem, 1.25vw, 1.08rem);
  line-height: 1.9;
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.story-frame__copy--center p:not(.story-frame__number) {
  margin-inline: auto;
}

.story-frame__copy .lead {
  color: rgb(247 236 216 / 93%);
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  font-size: clamp(1.08rem, 1.6vw, 1.38rem);
}

.story-frame__copy .story-frame__dedication {
  color: #f2b6a0;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
}

/* 正文故事帧采用“原创插画画布 + 阅读文本”的双栏叙事。
   章节封面和回应帧仍保留电影感满屏画面；移动端在下方断点恢复上下叠放。 */
@media (min-width: 900px) {
  .story-section:not(.story-section--earth):not(.story-section--book) .story-copy--right {
    right: clamp(3rem, 5vw, 6rem);
    width: min(44rem, 46vw);
  }

  .story-section:not(.story-section--earth):not(.story-section--book) .story-copy--left {
    left: clamp(3rem, 5vw, 6rem);
    width: min(44rem, 46vw);
  }

  .story-frame:not(.story-frame--response) .story-frame__stage {
    background:
      radial-gradient(circle at 50% 50%, rgb(232 183 102 / 7%), transparent 38%),
      linear-gradient(145deg, rgb(15 18 30 / 98%), rgb(25 29 44 / 98%));
  }

  .story-frame:not(.story-frame--response) .story-frame__visual {
    z-index: 0;
    top: 50%;
    bottom: auto;
    width: clamp(34rem, 56vw, 64rem);
    height: min(80svh, 52rem);
    min-height: 30rem;
    overflow: hidden;
    border: 1px solid rgb(247 236 216 / 15%);
    border-radius: 0.55rem 2.25rem 0.55rem 2.25rem;
    box-shadow:
      0 2.4rem 7rem rgb(3 5 12 / 46%),
      inset 0 0 0 1px rgb(255 255 255 / 4%);
    transform: translate3d(
        0,
        calc(-50% + (var(--frame-progress) - 0.5) * -2.2%),
        0
      )
      scale(1.018);
  }

  .story-frame:not(.story-frame--response)
    .story-frame__stage:has(.story-frame__copy--left)
    .story-frame__visual {
    right: max(3.5vw, calc((100vw - 92rem) / 2));
    left: auto;
  }

  .story-frame:not(.story-frame--response)
    .story-frame__stage:has(.story-frame__copy--right)
    .story-frame__visual {
    right: auto;
    left: clamp(1.5rem, 3vw, 4rem);
  }

  .story-frame:not(.story-frame--response)
    .story-frame__stage:has(.story-frame__copy--center)
    .story-frame__visual {
    right: auto;
    left: clamp(1.5rem, 3vw, 4rem);
  }

  .story-frame:not(.story-frame--response) .story-frame__stage::after {
    z-index: 1;
    background:
      radial-gradient(circle at 50% 48%, transparent 24%, rgb(7 9 18 / 17%) 78%),
      linear-gradient(to bottom, rgb(8 10 18 / 8%), rgb(8 10 18 / 26%));
  }

  .story-frame:not(.story-frame--response) .story-frame__copy {
    width: min(42rem, 45vw);
    padding: clamp(1.55rem, 2.4vw, 2.45rem);
    background: linear-gradient(135deg, rgb(22 26 40 / 91%), rgb(22 26 40 / 72%));
    border-color: rgb(247 236 216 / 17%);
    box-shadow: 0 1.8rem 5rem rgb(4 6 13 / 32%);
    backdrop-filter: blur(1.1rem);
  }

  .story-frame:not(.story-frame--response) .story-frame__copy--left {
    left: clamp(2.5rem, 4vw, 5rem);
  }

  .story-frame:not(.story-frame--response) .story-frame__copy--right {
    right: clamp(2.5rem, 4vw, 5rem);
  }

  .story-frame:not(.story-frame--response) .story-frame__copy--center {
    right: clamp(2.5rem, 4vw, 5rem);
    left: auto;
    width: min(42rem, 45vw);
    text-align: left;
    transform: translateY(calc(-48% - var(--frame-progress) * 0.9rem));
  }

  .story-frame:not(.story-frame--response) .story-frame__copy--center p,
  .story-frame:not(.story-frame--response) .story-frame__copy--center h3 {
    margin-right: 0;
    margin-left: 0;
  }
}

.story-frame__route,
.story-frame__breath,
.story-frame__false-light,
.story-frame__home-glow,
.story-frame__broken-line,
.story-frame__footprints,
.story-frame__snow,
.story-frame__warm-pulse,
.story-frame__window-light {
  position: absolute;
  pointer-events: none;
}

.story-frame__route {
  top: 52%;
  left: 20%;
  width: 56%;
  height: 1px;
  opacity: calc(0.18 + var(--frame-progress) * 0.7);
  border-top: 1px dashed rgb(232 183 102 / 56%);
  transform-origin: left center;
}

.story-frame__route--whale { transform: rotate(8deg) scaleX(var(--frame-progress)); }
.story-frame__route--ship { top: 39%; transform: rotate(-5deg) scaleX(var(--frame-progress)); }

.story-frame__breath {
  top: 39%;
  left: 56%;
  width: 4rem;
  height: 7rem;
  opacity: calc(0.15 + (1 - var(--frame-progress)) * 0.45);
  background: radial-gradient(ellipse at bottom, rgb(247 236 216 / 46%), transparent 68%);
  filter: blur(0.55rem);
  transform: translateY(calc(var(--frame-progress) * -1.8rem)) scale(calc(0.8 + var(--frame-progress) * 0.5));
}

.story-frame__false-light {
  top: 26%;
  right: 8%;
  width: 32vmin;
  aspect-ratio: 1;
  opacity: calc(0.25 + var(--frame-progress) * 0.45);
  background: radial-gradient(circle, rgb(232 183 102 / 40%), transparent 66%);
  filter: blur(1.8rem);
}

.story-frame__home-glow {
  top: 35%;
  left: 52%;
  width: 30vmin;
  height: 12vmin;
  background: radial-gradient(ellipse, rgb(142 183 195 / 38%), transparent 70%);
  filter: blur(1.2rem);
}

.story-frame__broken-line {
  top: 57%;
  left: 12%;
  width: 76%;
  border-top: 1px dashed rgb(201 111 91 / 55%);
  transform: scaleX(calc(0.25 + var(--frame-progress) * 0.75));
}

.story-frame__footprints {
  right: 22%;
  bottom: 24%;
  width: 26%;
  height: 2px;
  opacity: calc(0.1 + var(--frame-progress) * 0.55);
  border-top: 2px dotted rgb(232 183 102 / 56%);
  transform: rotate(-12deg);
}

.story-frame__snow {
  inset: 0;
  opacity: 0.28;
  background-image: radial-gradient(circle, #f7ecd8 0 1px, transparent 1.5px);
  background-size: 2.8rem 2.8rem;
  transform: translate3d(calc(var(--frame-progress) * 1.5rem), calc(var(--frame-progress) * 4rem), 0);
}

.story-frame__warm-pulse,
.story-frame__window-light {
  right: 21%;
  bottom: 26%;
  width: 18vmin;
  aspect-ratio: 1;
  opacity: calc(0.18 + var(--frame-progress) * 0.48);
  background: radial-gradient(circle, rgb(232 183 102 / 46%), transparent 68%);
  filter: blur(1.1rem);
}

.story-frame__window-light {
  right: 12%;
  bottom: 33%;
  width: 24vmin;
}

.scene-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scene-image--opening {
  object-position: 50% 50%;
}

.scene-image--coco {
  object-position: 50% 50%;
  filter: saturate(0.94) brightness(0.86);
}

.scene-image--turtle,
.scene-image--pangolin,
.scene-image--barry {
  object-position: 50% 50%;
  filter: saturate(0.92) brightness(0.84);
}

.scene-image--finale {
  object-position: 50% 50%;
  filter: saturate(0.92) brightness(0.92);
  transform: scale(calc(1.025 + min(var(--local-progress), 1) * 0.025));
  transform-origin: 52% 48%;
}

.scene-image-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scene-image-veil--coco {
  background:
    linear-gradient(90deg, rgb(14 18 34 / 82%) 0%, rgb(20 25 46 / 42%) 37%, transparent 68%),
    linear-gradient(0deg, rgb(10 13 25 / 34%), transparent 55%);
}

.scene-image-veil--turtle {
  background:
    linear-gradient(90deg, rgb(16 18 36 / 76%) 0%, rgb(24 26 48 / 30%) 38%, transparent 68%),
    linear-gradient(0deg, rgb(12 14 28 / 38%), transparent 52%);
}

.scene-image-veil--pangolin {
  background:
    linear-gradient(270deg, rgb(10 24 28 / 82%) 0%, rgb(15 31 35 / 42%) 36%, transparent 68%),
    linear-gradient(0deg, rgb(8 17 21 / 35%), transparent 48%);
}

.scene-image-veil--barry {
  background:
    linear-gradient(90deg, rgb(38 42 58 / 70%) 0%, rgb(54 58 72 / 24%) 42%, transparent 68%),
    linear-gradient(0deg, rgb(29 31 44 / 30%), transparent 55%);
}

.scene-image-veil--finale {
  opacity: calc(0.16 + min(var(--local-progress), 0.74));
  background:
    linear-gradient(0deg, rgb(25 28 44 / 92%) 0%, rgb(37 41 57 / 64%) 44%, transparent 78%),
    linear-gradient(90deg, transparent 8%, rgb(35 39 55 / 20%) 32%, rgb(35 39 55 / 26%) 68%, transparent 92%);
}

.scene-veil {
  position: absolute;
  inset: 0;
}

.scene-veil--opening {
  background:
    linear-gradient(90deg, rgb(19 21 39 / 68%) 0%, rgb(21 24 43 / 20%) 53%, transparent 78%),
    linear-gradient(0deg, rgb(11 13 25 / 35%) 0%, transparent 42%);
}

.story-copy {
  position: absolute;
  z-index: 3;
  top: 50%;
  width: min(34rem, 84vw);
  opacity: 1;
  transform: translateY(-50%);
  transition: opacity 380ms ease;
}

.has-js .story-copy:not(.story-copy--hero) {
  opacity: calc(0.62 + min(var(--local-progress), 0.38));
  transform: translateY(calc(-50% + (1 - min(var(--local-progress), 1)) * 1.8rem));
}

.story-copy--left {
  left: max(6vw, calc((100vw - 78rem) / 2));
}

.story-copy--right {
  right: max(8vw, calc((100vw - 78rem) / 2));
}

.story-copy--center {
  left: 50%;
  width: min(48rem, 86vw);
  text-align: center;
  transform: translate(-50%, -50%);
}

.has-js .story-copy--center:not(.story-copy--hero) {
  transform: translate(-50%, calc(-50% + (1 - min(var(--local-progress), 1)) * 1.8rem));
}

.story-copy--wide {
  width: min(62rem, 86vw);
}

.story-copy--hero {
  top: 53%;
  width: min(39rem, 84vw);
  color: var(--ink);
  opacity: 1;
  text-shadow: 0 0.15rem 1.5rem rgb(12 14 26 / 32%);
  transform: translateY(-50%);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.15rem;
  color: rgb(247 236 216 / 66%);
  font-size: 0.74rem;
  font-weight: 620;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.story-copy--center .eyebrow {
  justify-content: center;
}

.eyebrow span {
  color: var(--amber);
}

h1,
h2,
p,
blockquote {
  text-wrap: pretty;
  line-break: strict;
  word-break: normal;
}

h1,
h2 {
  margin: 0;
  font-family: var(--font-editorial);
  font-kerning: normal;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

h1 {
  font-size: clamp(4.2rem, 10vw, 8.6rem);
}

h1:focus {
  outline: none;
}

h2 {
  max-width: 13ch;
  margin-bottom: 1.2rem;
  font-size: clamp(2.65rem, 5.2vw, 5.1rem);
}

h2:has(.display-line) {
  max-width: none;
}

.story-copy--center h2 {
  margin-right: auto;
  margin-left: auto;
}

.story-copy p {
  max-width: 36rem;
  margin: 0.8rem 0 0;
  color: var(--ink-muted);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.9;
  line-break: strict;
  text-wrap: pretty;
}

.story-copy--center p {
  margin-right: auto;
  margin-left: auto;
}

.story-copy .lead {
  max-width: 32rem;
  margin-top: 0;
  color: var(--ink);
  font-family: var(--font-editorial);
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1.65;
  text-wrap: balance;
}

.hero-line {
  color: var(--ink) !important;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  font-size: clamp(1.45rem, 2.4vw, 2.05rem) !important;
  letter-spacing: 0.06em;
}

.hero-intro {
  max-width: 28rem !important;
}

.continue-cue {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.2rem;
  color: rgb(247 236 216 / 74%);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-decoration: none;
}

.continue-cue__line {
  width: 4.8rem;
  height: 1px;
  overflow: hidden;
  background: rgb(247 236 216 / 25%);
}

.continue-cue__line::after {
  display: block;
  width: 55%;
  height: 100%;
  content: "";
  background: var(--amber);
  animation: breathe-line 2.8s ease-in-out infinite;
}

@keyframes breathe-line {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(180%); }
}

.scene-visual--ocean {
  background:
    radial-gradient(circle at 68% 16%, rgb(242 182 160 / 42%), transparent 24%),
    linear-gradient(160deg, #3f466f 0%, #262e52 45%, #161a31 100%);
}

.coco-dedication,
.light-action {
  margin-top: 1.35rem !important;
  padding-left: 1rem;
  color: rgb(247 236 216 / 88%) !important;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  border-left: 1px solid var(--amber);
}

.scene-visual--light {
  background:
    radial-gradient(circle at 16% 14%, rgb(247 236 216 / 12%), transparent 16%),
    linear-gradient(162deg, #192441 0%, #253655 48%, #171c30 100%);
}

.night-sky {
  position: absolute;
  inset: 0;
  opacity: calc(0.78 - var(--local-progress) * 0.15);
  background-image:
    radial-gradient(circle at 14% 20%, #f7ecd8 0 1px, transparent 2px),
    radial-gradient(circle at 38% 12%, #f7ecd8 0 1px, transparent 2px),
    radial-gradient(circle at 72% 24%, #f7ecd8 0 1px, transparent 2px),
    radial-gradient(circle at 88% 10%, #f7ecd8 0 1px, transparent 2px);
}

.city-glow {
  position: absolute;
  right: -7%;
  bottom: -18%;
  width: 54vw;
  height: 58vh;
  opacity: calc(0.74 - var(--local-progress) * 0.48);
  background: rgb(232 183 102 / 68%);
  border-radius: 50%;
  filter: blur(7rem);
}

.city-glow--two {
  right: 18%;
  bottom: -34%;
  width: 22vw;
  opacity: calc(0.48 - var(--local-progress) * 0.34);
  filter: blur(4rem);
}

.turtle-path {
  position: absolute;
  bottom: 16%;
  left: 50%;
  width: 38vw;
  height: 38vh;
  border: 2px dotted rgb(247 236 216 / 32%);
  border-color: rgb(247 236 216 / 32%) transparent transparent transparent;
  border-radius: 50%;
  transform-origin: left bottom;
}

.turtle-path--wrong {
  opacity: calc(0.74 - var(--local-progress) * 0.74);
  transform: rotate(15deg);
}

.turtle-path--home {
  opacity: max(0, min(calc((var(--local-progress) - 0.22) * 2.2), 0.78));
  transform: rotate(-21deg) scaleX(1.15);
}

.light-path {
  position: absolute;
  top: -20%;
  left: 52%;
  width: 23vw;
  height: 100vh;
  opacity: 0.34;
  background: linear-gradient(to bottom, rgb(247 236 216 / 75%), transparent 82%);
  filter: blur(4rem);
  transform: skewX(-10deg);
}

.water-line {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 34%;
  border: 1px solid rgb(247 236 216 / 12%);
  border-radius: 50%;
}

.water-line--one { top: 38%; transform: rotate(-7deg); }
.water-line--two { top: 55%; transform: rotate(5deg); }

.media-slot {
  position: relative;
  width: min(31rem, 100%);
  min-height: 10rem;
  margin: 1.5rem 0 0;
  overflow: hidden;
  background: rgb(10 13 28 / 36%);
  border: 1px solid rgb(247 236 216 / 18%);
  border-radius: 0.4rem;
  backdrop-filter: blur(0.8rem);
}

.chapter-video {
  display: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.media-slot.has-video .chapter-video {
  display: block;
}

.media-slot.has-video .media-slot__fallback {
  display: none;
}

.media-slot__fallback {
  display: grid;
  align-content: center;
  min-height: 10rem;
  padding: 1.25rem;
}

.media-slot__fallback span,
.media-slot figcaption {
  color: rgb(247 236 216 / 48%);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.media-slot__fallback strong {
  margin-top: 0.35rem;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  font-size: 1.2rem;
  font-weight: 500;
}

.media-slot__fallback small {
  margin-top: 0.45rem;
  color: rgb(247 236 216 / 60%);
  line-height: 1.55;
}

.media-slot figcaption {
  padding: 0.5rem 0.75rem;
  border-top: 1px solid rgb(247 236 216 / 10%);
}

.source-note {
  width: min(31rem, 100%);
  margin-top: 1.15rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgb(247 236 216 / 18%);
}

.source-note summary {
  width: max-content;
  color: rgb(247 236 216 / 64%);
  cursor: pointer;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
}

.source-note p {
  font-size: 0.86rem;
  line-height: 1.65;
}

.source-note a {
  display: inline-block;
  margin-top: 0.6rem;
  color: var(--amber);
  font-size: 0.8rem;
  text-underline-offset: 0.25em;
}

.scene-visual--routes {
  background:
    radial-gradient(circle at 24% 30%, rgb(201 111 91 / 24%), transparent 18%),
    linear-gradient(145deg, #524554 0%, #393542 48%, #202332 100%);
}

.route {
  position: absolute;
  width: 55vw;
  height: 28vh;
  border: 1px dashed rgb(247 236 216 / 26%);
  border-color: rgb(247 236 216 / 25%) transparent transparent transparent;
  border-radius: 50%;
}

.route--one { top: 20%; left: 14%; transform: rotate(9deg); }
.route--two { top: 48%; right: 8%; transform: rotate(-15deg); }
.route--broken { top: 36%; left: 45%; width: 19vw; opacity: 0.38; transform: rotate(70deg); }

blockquote {
  max-width: 31rem;
  margin: 1.5rem 0 0;
  padding: 0 0 0 1.1rem;
  color: rgb(247 236 216 / 82%);
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  font-size: 1.08rem;
  line-height: 1.8;
  border-left: 1px solid var(--clay);
}

.scene-visual--rescue {
  background: linear-gradient(150deg, #b9a695 0%, #75645d 48%, #342f36 100%);
}

.snow-haze {
  position: absolute;
  inset: -20%;
  opacity: 0.38;
  background: radial-gradient(circle at 35% 28%, #f7ecd8 0%, transparent 45%);
  filter: blur(2rem);
}

.warm-window {
  position: absolute;
  right: 17%;
  bottom: 18%;
  width: 12vw;
  min-width: 7rem;
  aspect-ratio: 4 / 3;
  opacity: 0.62;
  background: #e8b766;
  box-shadow: 0 0 8rem 3rem rgb(232 183 102 / 32%);
  border-radius: 50% 50% 42% 46%;
  filter: blur(1rem);
}

.scene-visual--truth {
  background: #1a1d2b;
}

.scene-image--truth {
  object-position: 50% 52%;
  filter: saturate(0.72) contrast(1.03) brightness(0.64);
  transform: scale(calc(1.08 + min(var(--local-progress), 1) * 0.035));
}

.scene-image-veil--truth {
  opacity: 1;
  background:
    linear-gradient(90deg, rgb(15 18 31 / 95%) 0%, rgb(19 23 38 / 78%) 35%, rgb(21 25 41 / 36%) 70%, rgb(18 21 35 / 56%) 100%),
    linear-gradient(0deg, rgb(14 17 29 / 78%) 0%, transparent 54%);
}

.story-copy--truth {
  width: min(43rem, 45vw);
  text-shadow: 0 0.16rem 1.4rem rgb(5 7 15 / 56%);
}

.story-copy--truth h2 {
  font-size: clamp(3.1rem, 4.9vw, 5rem);
}

.story-copy--truth .lead {
  max-width: 34rem;
}

.truth-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgb(247 236 216 / 15%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.truth-orbit--one { width: 42vmin; height: 42vmin; }
.truth-orbit--two { width: 68vmin; height: 68vmin; border-style: dashed; }

.scene-visual--action {
  background: linear-gradient(145deg, #4e3540 0%, #8b5949 56%, #ba7860 100%);
}

.action-glow {
  position: absolute;
  top: 15%;
  right: 8%;
  width: 42vw;
  height: 42vw;
  opacity: 0.36;
  background: #e8b766;
  border-radius: 50%;
  filter: blur(8rem);
}

.action-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  max-width: 60rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  background: rgb(247 236 216 / 15%);
  border: 1px solid rgb(247 236 216 / 15%);
}

.action-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.8rem;
  padding: 1rem;
  background: rgb(35 25 35 / 52%);
  backdrop-filter: blur(1rem);
}

.action-list li > span {
  grid-row: span 2;
  color: var(--amber);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
}

.action-list strong {
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  font-size: 1.18rem;
  font-weight: 500;
}

.action-list p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.6;
}

.story-section--finale {
  min-height: 220svh;
}

.scene-visual--finale {
  background: #37455f;
}

.finale-town-light {
  position: absolute;
  top: 47%;
  left: 45.5%;
  width: 0.42rem;
  height: 0.42rem;
  background: var(--amber);
  border-radius: 50%;
  box-shadow: 0 0 0.8rem 0.25rem rgb(232 183 102 / 48%);
  animation: finaleTownLight 3.8s ease-in-out infinite;
}

.finale-breath-glow {
  position: absolute;
  top: 42%;
  left: 61%;
  width: 1.2rem;
  height: 4.2rem;
  opacity: 0.28;
  background: linear-gradient(0deg, transparent, rgb(247 236 216 / 68%), transparent);
  filter: blur(0.45rem);
  transform: translate(-50%, -50%);
  animation: finaleBreath 4.6s ease-in-out infinite;
}

@keyframes finaleTownLight {
  0%, 100% { opacity: 0.82; }
  50% { opacity: 0.28; }
}

@keyframes finaleBreath {
  0%, 100% { opacity: 0.18; transform: translate(-50%, -42%) scale(0.85); }
  48% { opacity: 0.42; transform: translate(-50%, -56%) scale(1.08); }
}

.story-copy--finale {
  top: 48%;
  text-shadow: 0 1px 1.5rem rgb(38 26 42 / 35%);
}

.has-js .story-copy--center.story-copy--finale {
  opacity: clamp(
    0,
    calc(
      var(--local-progress) + var(--local-progress) + var(--local-progress) + var(--local-progress) - 0.48
    ),
    1
  );
  transform: translate(
    -50%,
    calc(-50% + (1 - min(var(--local-progress), 1)) * 2.6rem)
  );
}

.has-js #finale .story-copy--finale {
  visibility: hidden;
  opacity: clamp(
    0,
    calc(
      var(--local-progress) + var(--local-progress) + var(--local-progress) + var(--local-progress) - 0.48
    ),
    1
  );
}

.has-js #finale.is-finale-copy-ready .story-copy--finale {
  visibility: visible;
}

.has-js #finale:not(.is-finale-copy-ready) .story-copy--finale {
  pointer-events: none;
  opacity: 0 !important;
}

.story-copy--finale > p {
  max-width: 48rem;
}

.finale-track-button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.1rem;
  padding: 0.72rem 1rem;
  color: var(--ink);
  font: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  background: rgb(54 42 54 / 32%);
  border: 1px solid rgb(247 236 216 / 34%);
  border-radius: 999px;
  backdrop-filter: blur(0.8rem);
}

.finale-track-button:hover,
.finale-track-button:focus-visible {
  background: rgb(247 236 216 / 12%);
  border-color: rgb(247 236 216 / 62%);
}

.finale-track-button.is-current {
  border-color: var(--amber);
}

.story-copy--finale .finale-wish {
  margin-top: 1.15rem;
  color: var(--ink);
  font-family: var(--font-hand);
  font-size: 1.18rem;
  letter-spacing: 0.055em;
}

.restart-link {
  display: inline-block;
  margin-top: 1.8rem;
  padding-bottom: 0.25rem;
  color: var(--ink);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-bottom: 1px solid rgb(247 236 216 / 44%);
}

.site-footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem 5vw;
  color: rgb(247 236 216 / 46%);
  background: #151725;
  border-top: 1px solid rgb(247 236 216 / 10%);
  font-size: 0.72rem;
  line-height: 1.6;
}

.site-footer > div {
  display: grid;
  gap: 0.35rem;
}

.site-footer p {
  margin: 0;
}

.cover-replay {
  align-self: center;
  padding: 0.55rem 0;
  color: rgb(247 236 216 / 62%);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgb(247 236 216 / 22%);
}

/* 文字不是一起“弹出”，而是像旁白一样逐句抵达。 */
.has-js .story-copy[data-reveal] > * {
  opacity: 0;
  filter: blur(0.35rem);
  transform: translateY(1.15rem);
  transition:
    opacity 900ms cubic-bezier(0.2, 0.75, 0.24, 1),
    filter 900ms cubic-bezier(0.2, 0.75, 0.24, 1),
    transform 1100ms cubic-bezier(0.16, 0.78, 0.2, 1);
}

.has-js .story-copy[data-reveal].is-revealed > * {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.has-js .story-copy[data-reveal] > :nth-child(1) { transition-delay: 80ms; }
.has-js .story-copy[data-reveal] > :nth-child(2) { transition-delay: 180ms; }
.has-js .story-copy[data-reveal] > :nth-child(3) { transition-delay: 320ms; }
.has-js .story-copy[data-reveal] > :nth-child(4) { transition-delay: 470ms; }
.has-js .story-copy[data-reveal] > :nth-child(5) { transition-delay: 620ms; }
.has-js .story-copy[data-reveal] > :nth-child(6) { transition-delay: 760ms; }

/* 当前章节才运行较明显的循环，离屏章节保持安静。 */
.story-section .scene-visual span,
.story-section .scene-image,
.story-section .book-chapter__backdrop::before,
.story-section .book-shadow,
.story-section .book__cover::before {
  animation-play-state: paused;
}

.story-section.is-active .scene-visual span,
.story-section.is-active .scene-image,
.story-section.is-active .book-chapter__backdrop::before,
.story-section.is-active .book-shadow,
.story-section.is-active .book__cover::before {
  animation-play-state: running;
}

.story-section--opening .scene-image {
  animation: opening-alive 20s ease-in-out infinite alternate;
}

@keyframes opening-alive {
  from { transform: scale(1.015) translate3d(-0.25%, 0.15%, 0); filter: saturate(0.88) brightness(0.92); }
  to { transform: scale(1.065) translate3d(0.7%, -0.45%, 0); filter: saturate(1.02) brightness(1.02); }
}

.story-section--ocean .light-path {
  transform-origin: 50% 0;
  animation: ocean-light-sway 9s ease-in-out infinite alternate;
}

.story-section--ocean .water-line--one {
  animation: water-breathe-one 7s ease-in-out infinite alternate;
}

.story-section--ocean .water-line--two {
  animation: water-breathe-two 9s ease-in-out infinite alternate-reverse;
}

@keyframes ocean-light-sway {
  from { opacity: 0.25; transform: skewX(-12deg) translateX(-2%); }
  to { opacity: 0.44; transform: skewX(-7deg) translateX(4%); }
}

@keyframes water-breathe-one {
  from { opacity: 0.38; transform: rotate(-7deg) translateY(-0.6rem) scaleX(0.98); }
  to { opacity: 0.72; transform: rotate(-5deg) translateY(0.9rem) scaleX(1.03); }
}

@keyframes water-breathe-two {
  from { opacity: 0.28; transform: rotate(5deg) translateY(0.5rem) scaleX(1.02); }
  to { opacity: 0.62; transform: rotate(3deg) translateY(-0.8rem) scaleX(0.97); }
}

.story-section--light .city-glow {
  animation: borrowed-light 5.8s ease-in-out infinite alternate;
}

.story-section--light .city-glow--two { animation-delay: -2.2s; }

.story-section--light .turtle-path {
  stroke-dasharray: 1;
  animation: path-searching 8s ease-in-out infinite alternate;
}

@keyframes borrowed-light {
  from { filter: blur(6.5rem); transform: scale(0.92); }
  to { filter: blur(8.5rem); transform: scale(1.08); }
}

@keyframes path-searching {
  from { border-top-color: rgb(247 236 216 / 20%); }
  to { border-top-color: rgb(247 236 216 / 48%); }
}

.story-section--routes .route {
  animation: route-memory 10s ease-in-out infinite alternate;
}

.story-section--routes .route--two { animation-delay: -3.4s; }
.story-section--routes .route--broken { animation-delay: -6.2s; }

@keyframes route-memory {
  from { opacity: 0.24; filter: drop-shadow(0 0 0 rgb(232 183 102 / 0%)); }
  to { opacity: 0.72; filter: drop-shadow(0 0 0.8rem rgb(232 183 102 / 20%)); }
}

.story-section--rescue .snow-haze {
  animation: snow-drift 13s ease-in-out infinite alternate;
}

.story-section--rescue .warm-window {
  animation: shelter-breathe 4.8s ease-in-out infinite;
}

@keyframes snow-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(0.98); opacity: 0.3; }
  to { transform: translate3d(3%, 1.5%, 0) scale(1.05); opacity: 0.48; }
}

@keyframes shelter-breathe {
  0%, 100% { opacity: 0.52; transform: scale(0.94); }
  50% { opacity: 0.76; transform: scale(1.06); }
}

.story-section--truth .truth-orbit--one {
  animation: quiet-orbit 22s linear infinite;
}

.story-section--truth .truth-orbit--two {
  animation: quiet-orbit 32s linear infinite reverse;
}

@keyframes quiet-orbit {
  from { rotate: 0turn; opacity: 0.28; }
  50% { opacity: 0.62; }
  to { rotate: 1turn; opacity: 0.28; }
}

.story-section--action .action-glow {
  animation: action-heart 5.6s ease-in-out infinite;
}

@keyframes action-heart {
  0%, 100% { opacity: 0.3; transform: scale(0.92); }
  48% { opacity: 0.46; transform: scale(1.05); }
  58% { opacity: 0.4; transform: scale(1.01); }
}

.story-section--finale .finale-sun {
  animation: dawn-breathe 6.8s ease-in-out infinite alternate;
}

.story-section--finale .finale-horizon {
  animation: horizon-alive 12s ease-in-out infinite alternate;
}

@keyframes dawn-breathe {
  from { filter: brightness(0.96); transform: translateX(-50%) scale(0.94); }
  to { filter: brightness(1.08); transform: translateX(-50%) scale(1.04); }
}

@keyframes horizon-alive {
  from { transform: translateY(1.2%) scaleX(1); }
  to { transform: translateY(-1.2%) scaleX(1.018); }
}

.book-chapter__backdrop::before {
  animation: book-aurora 10s ease-in-out infinite alternate;
}

.book-shadow {
  animation: book-shadow-breathe 6s ease-in-out infinite;
}

.book__cover::before {
  animation: cover-light 5.5s ease-in-out infinite alternate;
}

@keyframes book-aurora {
  from { opacity: 0.25; transform: translate3d(-1.5%, -1%, 0) scale(0.98); }
  to { opacity: 0.44; transform: translate3d(1.5%, 1%, 0) scale(1.04); }
}

@keyframes book-shadow-breathe {
  0%, 100% { opacity: 0.54; transform: rotate(-4deg) scaleX(0.94); }
  50% { opacity: 0.72; transform: rotate(-2deg) scaleX(1.04); }
}

@keyframes cover-light {
  from { opacity: 0.1; transform: translateX(-26%) skewX(-12deg); }
  to { opacity: 0.3; transform: translateX(26%) skewX(-12deg); }
}

.story-section:not(.is-active) .scene-visual span,
.story-section:not(.is-active) .scene-image,
.story-section:not(.is-active) .book-chapter__backdrop::before,
.story-section:not(.is-active) .book-shadow,
.story-section:not(.is-active) .book__cover::before {
  animation-play-state: paused;
}

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 4px;
}

@media (max-width: 760px) {
  :root {
    --header-height: 4.2rem;
  }

  .site-header {
    grid-template-columns: 1fr auto;
    padding: 0 1rem;
  }

  .brand {
    font-size: 0.74rem;
  }

  .story-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
  }

  .story-progress__label,
  .story-progress__percent {
    display: none;
  }

  .sound-toggle {
    min-height: 2.35rem;
    padding: 0.3rem;
  }

  .sound-toggle__label {
    display: none;
  }

  .music-control {
    gap: 0.3rem;
  }

  .volume-control {
    min-height: 2.35rem;
    padding: 0.25rem 0.5rem;
  }

  .volume-control input {
    width: 3.7rem;
  }

  .music-picker > summary {
    min-width: 2.35rem;
    min-height: 2.35rem;
    padding: 0;
    font-size: 0;
  }

  .music-picker > summary::after {
    content: "•••";
    font-size: 0.55rem;
    letter-spacing: 0.04em;
  }

  .music-picker__panel {
    position: fixed;
    top: calc(var(--header-height) - 0.25rem);
    right: 0.7rem;
  }

  .chapter-nav {
    display: none;
  }

  .intro-gate__layout {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    width: min(88vw, 30rem);
    padding: max(1rem, env(safe-area-inset-top)) 0 max(1rem, env(safe-area-inset-bottom));
  }

  .intro-prologue {
    order: 2;
  }

  .intro-prologue__eyebrow {
    margin-bottom: 0.45rem;
  }

  .intro-prologue h2 {
    max-width: 12ch;
    font-size: clamp(2.3rem, 11vw, 3.4rem);
  }

  .intro-prologue > p:not(.intro-prologue__eyebrow, .intro-note) {
    margin-top: 0.65rem;
    font-size: 0.9rem;
    line-height: 1.7;
  }

  .intro-prologue .intro-prologue__question {
    display: none;
  }

  .intro-open {
    min-height: 3rem;
    margin-top: 1rem;
  }

  .intro-note {
    margin-top: 0.45rem;
    font-size: 0.64rem;
  }

  .book-stage {
    order: 1;
    min-height: 17.5rem;
  }

  .book {
    width: min(43vw, 11rem);
  }

  .book__cover strong {
    margin: 0.65rem 0;
    font-size: 2rem;
  }

  .book__cover-kicker,
  .book__cover-note {
    font-size: 0.38rem;
  }

  .story-section {
    min-height: 150svh;
  }

  .story-section--earth {
    min-height: 420svh;
  }

  .scene-stage {
    min-height: 34rem;
  }

  .story-frame {
    min-height: 184svh;
  }

  .story-frame__stage {
    min-height: 34rem;
  }

  .story-frame__visual {
    inset: -1%;
    transform: scale(1.025);
  }

  .story-frame__visual img {
    object-position: 50% 50%;
  }

  .chapter-story--coco .story-frame__visual img { object-position: 70% 50%; }
  .chapter-story--light .story-frame__visual img { object-position: 62% 50%; }
  .chapter-story--routes .story-frame__visual img { object-position: 45% 50%; }
  .chapter-story--rescue .story-frame__visual img { object-position: 70% 50%; }
  .story-frame__visual img[data-story-art-key="04-01"] { object-position: 50% 66%; }

  .story-frame__copy,
  .story-frame__copy--left,
  .story-frame__copy--right,
  .story-frame__copy--center {
    top: auto;
    right: 1rem;
    bottom: max(3.4rem, env(safe-area-inset-bottom));
    left: 1rem;
    width: auto;
    max-height: calc(100svh - var(--header-height) - 4.2rem);
    padding: 1.1rem 1.05rem 1.15rem;
    overflow-y: auto;
    text-align: left;
    border-radius: 0.25rem 1rem 0.25rem 1rem;
    transform: none;
  }

  .story-frame__copy--center h3,
  .story-frame__copy--center p:not(.story-frame__number) {
    margin-inline: 0;
  }

  .story-frame__copy h3 {
    max-width: 100%;
    font-size: clamp(2.05rem, 9.3vw, 3rem);
    line-height: 1.1;
  }

  .story-frame__copy p:not(.story-frame__number) {
    margin-top: 0.72rem;
    font-size: 0.91rem;
    line-height: 1.72;
  }

  .story-frame__copy .lead {
    font-size: 1rem;
  }

  .story-frame__number {
    margin-bottom: 0.65rem;
  }

  .plateau-ridge { right: -46%; bottom: 32%; width: 138%; height: 40%; }
  .antelope-route { right: -12%; bottom: 45%; width: 96%; }
  .antelope-herd { right: -4%; bottom: 40%; width: 92vw; height: 34vw; }
  .antelope-herd i { width: 2.5rem; height: 0.95rem; }
  .antelope-herd--single { right: -5%; bottom: 43%; width: 62vw; }
  .antelope-herd--single i { transform: scale(1.15); }
  .antelope-herd--recovery { right: -14%; bottom: 45%; width: 112vw; }
  .antelope-herd--return { right: 4%; bottom: 42%; width: 78vw; }
  .trade-thread { top: 20%; right: -20%; width: 86%; }
  .fiber-field { top: 0; right: -24%; width: 112%; height: 60%; }
  .trade-label { top: 18%; right: 5%; width: 9rem; height: 4.6rem; }
  .trade-line { top: 29%; right: -8%; width: 91%; }
  .patrol-node { top: 27%; }
  .patrol-node--one { right: 12%; }
  .patrol-node--two { top: 22%; right: 43%; }
  .patrol-node--three { top: 31%; right: 74%; }
  .passage-road { right: -28%; bottom: 45%; width: 146%; height: 16%; }
  .passage-lights { right: 7%; bottom: 57%; width: 48%; }
  .antelope-dawn { top: 8%; width: 98vw; }

  .horseshoe-form {
    top: 13%;
    right: 7%;
    width: min(52vw, 17rem);
    opacity: 0.72;
  }

  .horseshoe-form--frame { top: 15%; right: 10%; }
  .horseshoe-form--return { top: 22%; right: 50%; width: min(42vw, 14rem); }
  .horseshoe-tide { right: -38vw; bottom: 24%; width: 122vw; }

  .horseshoe-cell--one { top: 10%; right: 9%; }
  .horseshoe-cell--two { top: 27%; right: 46%; }
  .horseshoe-cell--three { right: 13%; bottom: 44%; }
  .horseshoe-sample { top: 8%; right: 54%; height: 45%; }

  .process-step { top: 25%; width: 3.6rem; }
  .process-step--one { left: 9%; }
  .process-step--two { left: 31%; }
  .process-step--three { left: 53%; }
  .process-step--four { left: 75%; }
  .process-step::before { width: calc(22vw - 3.6rem); }
  .process-route { top: 10%; left: 6%; width: 88%; height: 38%; }

  .test-path { right: 8%; width: 72%; }
  .test-path--animal { top: 19%; }
  .test-path--recombinant { top: 34%; }
  .test-result { top: 20%; right: 5%; width: 3.4rem; }
  .horseshoe-dawn { top: 13%; width: 88vw; }

  .scene-image--opening {
    object-position: 68% 50%;
  }

  .scene-image--coco {
    object-position: 76% 50%;
  }

  .scene-image--turtle {
    object-position: 66% 50%;
  }

  .scene-image--pangolin {
    object-position: 43% 50%;
  }

  .scene-image--barry {
    object-position: 73% 50%;
  }

  .scene-image--finale {
    object-position: 50% 50%;
  }

  .earth-scene::after {
    background: linear-gradient(0deg, rgb(11 14 27 / 82%) 0%, transparent 70%);
  }

  .earth-system {
    top: 50%;
    left: 50%;
    width: 116vmin;
    transform:
      translate(-50%, calc(-50% - var(--local-progress) * 22vh))
      scale(calc(1.04 - var(--local-progress) * 0.2))
      rotateX(var(--earth-tilt-x))
      rotateY(var(--earth-tilt-y));
  }

  .life-signal {
    min-width: 3rem;
    min-height: 3rem;
    font-size: 0.6rem;
  }

  .earth-copy {
    top: auto;
    right: 1.2rem;
    bottom: max(4.4rem, env(safe-area-inset-bottom));
    left: 1.2rem;
    width: auto;
    transform: none;
  }

  .earth-copy h1 {
    max-width: none;
    font-size: clamp(2.65rem, 10.2vw, 3.7rem);
    line-height: 1.06;
  }

  .earth-copy h2 {
    font-size: clamp(2.1rem, 8.6vw, 3.2rem);
  }

  .earth-copy p {
    font-size: 0.94rem;
    line-height: 1.75;
  }

  .has-js .earth-copy--beat-one,
  .has-js .earth-copy--beat-two,
  .has-js .earth-copy--beat-three,
  .has-js .earth-copy--beat-four {
    transform: translateY(0);
  }

  .earth-scroll-invite {
    width: 90vw;
    text-align: center;
  }

  .earth-book-match__halo {
    left: 50%;
    width: 92vmin;
  }

  .transition-book {
    left: 50%;
    width: min(66vw, 20rem);
  }

  .transition-book strong {
    font-size: clamp(2.7rem, 14vw, 4rem);
  }

  .earth-book-match > p {
    right: 1.4rem;
    bottom: 7vh;
    left: 1.4rem;
    width: auto;
    font-size: 0.9rem;
    text-align: center;
  }

  .book--chapter {
    width: min(55vw, 15rem);
  }

  .book--chapter.is-open {
    width: 48vw;
    transform: translateX(49%) rotateX(0deg) rotateY(0deg);
  }

  .book-stage--chapter {
    transform: translateX(-19vw);
  }

  .book-chapter.has-open-book .book-stage--chapter {
    transform: translateX(0);
  }

  .book-companion-art {
    top: 46%;
    right: 3vw;
    width: 34vw;
  }

  .book-companion-art figcaption {
    display: none;
  }

  .book-page-copy {
    inset: 10% 10% 8% 15%;
  }

  .book-page-copy h2 {
    font-size: 2.25rem;
  }

  .book-page-copy p {
    font-size: 0.75rem;
    line-height: 1.65;
  }

  .book-page-copy a {
    margin-top: 1rem;
    font-size: 0.68rem;
  }

  .scene-veil--opening {
    background:
      linear-gradient(0deg, rgb(15 17 31 / 72%) 0%, rgb(20 22 40 / 12%) 66%),
      linear-gradient(90deg, rgb(20 22 40 / 18%), transparent 70%);
  }

  .scene-image-veil--coco {
    background:
      linear-gradient(0deg, rgb(12 15 29 / 82%) 0%, rgb(20 24 43 / 22%) 62%, transparent 82%),
      linear-gradient(90deg, rgb(17 21 39 / 18%), transparent 60%);
  }

  .scene-image-veil--turtle {
    background:
      linear-gradient(0deg, rgb(13 19 32 / 86%) 0%, rgb(23 34 52 / 26%) 60%, transparent 82%),
      linear-gradient(90deg, rgb(14 21 35 / 12%), transparent 64%);
  }

  .scene-image-veil--pangolin {
    background:
      linear-gradient(0deg, rgb(12 18 27 / 88%) 0%, rgb(21 30 40 / 28%) 60%, transparent 82%),
      linear-gradient(90deg, rgb(12 18 26 / 12%), transparent 64%);
  }

  .scene-image-veil--barry {
    background:
      linear-gradient(0deg, rgb(30 29 35 / 88%) 0%, rgb(54 49 52 / 24%) 60%, transparent 82%),
      linear-gradient(90deg, rgb(26 26 34 / 12%), transparent 64%);
  }

  .scene-image-veil--finale {
    background:
      linear-gradient(0deg, rgb(24 27 42 / 94%) 0%, rgb(35 39 55 / 72%) 52%, transparent 80%),
      linear-gradient(90deg, rgb(25 28 43 / 12%), transparent 65%);
  }

  .finale-town-light {
    top: 47%;
    left: 44%;
  }

  .finale-breath-glow {
    top: 42%;
    left: 61%;
  }

  .story-copy,
  .story-copy--left,
  .story-copy--right,
  .story-copy--hero {
    top: auto;
    right: 1.2rem;
    bottom: max(4.2rem, env(safe-area-inset-bottom));
    left: 1.2rem;
    width: auto;
    transform: none;
  }

  .has-js .story-copy:not(.story-copy--hero) {
    transform: translateY(calc((1 - min(var(--local-progress), 1)) * 1.2rem));
  }

  .story-copy--center {
    left: 1.2rem;
    width: auto;
    text-align: left;
  }

  .story-copy--hero {
    opacity: 1;
    transform: none;
  }

  .story-copy--center .eyebrow {
    justify-content: flex-start;
  }

  .story-copy--center h2,
  .story-copy--center p {
    margin-right: 0;
    margin-left: 0;
  }

  h1 {
    font-size: clamp(3.8rem, 20vw, 5.6rem);
  }

  h2 {
    max-width: 11ch;
    font-size: clamp(2.2rem, 9.8vw, 3.5rem);
  }

  .display-line,
  .copy-line {
    width: auto;
    white-space: normal;
  }

  #poaching .story-copy,
  .story-copy--truth {
    width: auto;
  }

  #poaching .story-copy h2,
  .story-copy--truth h2 {
    font-size: clamp(2.2rem, 9.4vw, 3.4rem);
  }

  .scene-image--poaching {
    object-position: 38% 50%;
  }

  .scene-image--truth {
    object-position: 50% 48%;
  }

  .scene-image-veil--poaching,
  .scene-image-veil--truth {
    background: linear-gradient(0deg, rgb(14 17 29 / 96%) 0%, rgb(18 21 35 / 66%) 48%, rgb(18 21 35 / 20%) 78%);
  }

  .story-copy p {
    font-size: 0.95rem;
    line-height: 1.75;
  }

  .hero-intro {
    max-width: 21rem !important;
  }

  .continue-cue {
    margin-top: 1.3rem;
  }

  .media-slot,
  .source-note,
  blockquote {
    display: none;
  }

  .action-list {
    grid-template-columns: 1fr;
    max-height: 48svh;
    overflow-y: auto;
  }

  .action-list li {
    padding: 0.72rem;
  }

  .action-list p {
    font-size: 0.76rem;
  }

  .story-copy--finale {
    bottom: max(3.2rem, env(safe-area-inset-bottom));
  }

  .has-js .story-copy.story-copy--finale {
    opacity: clamp(
      0,
      calc(
        var(--local-progress) + var(--local-progress) + var(--local-progress) + var(--local-progress) - 0.48
      ),
      1
    );
    transform: translateY(calc((1 - min(var(--local-progress), 1)) * 2rem));
  }

  .story-copy--finale p {
    font-size: 0.84rem;
    line-height: 1.6;
  }

  .finale-track-button {
    margin-top: 0.7rem;
    padding: 0.62rem 0.8rem;
    font-size: 0.68rem;
  }

  .story-copy--finale .finale-wish {
    margin-top: 0.8rem;
    font-size: 0.9rem;
  }

  .story-copy--finale .restart-link {
    margin-top: 0.9rem;
  }

  .site-footer {
    display: grid;
    gap: 0.6rem;
    padding: 1.5rem 1.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .scene-visual,
  .story-copy,
  .story-copy--center,
  .earth-system,
  .earth-copy {
    transform: none;
  }

  .earth-system {
    top: 50%;
    right: 8vw;
  }

  .intro-gate.is-opening {
    opacity: 0;
  }

  .intro-gate.is-opening .book,
  .intro-gate.is-opening .book__cover,
  .intro-gate.is-opening .intro-prologue {
    transform: none;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .earth-system {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 760px) {
  html:not(.has-js) .story-section--earth {
    min-height: auto;
    padding: 6rem 1.2rem 3rem;
  }

  html:not(.has-js) .story-section--earth .scene-stage {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  html:not(.has-js) .earth-copy {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    margin-bottom: 3rem;
    opacity: 1;
    transform: none;
  }

  html:not(.has-js) .story-section--book {
    min-height: 42rem;
  }

  html:not(.has-js) .book--chapter {
    width: min(52vw, 14rem);
    transform: translateX(49%) rotateX(0deg) rotateY(0deg) scale(0.82);
  }
}