:root {
  /* Design typography tokens: IBM Plex Sans** for longer explanatory copy; Space Grotesk** for large headlines and chapter titles. */
  --orbital-black: #07100F;
  --chlorophyll: #7CFFB2;
  --signal-cyan: #6BE4FF;
  --moon-fog: #D8F6EA;
  --shadow-kelp: #12332D;
  --alert-amber: #FFC857;
  --glow: 0.72;
  --scene-progress: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--orbital-black);
  color: var(--moon-fog);
  font-family: "IBM Plex Sans", sans-serif;
  overflow-x: hidden;
}

.observatory {
  position: relative;
  min-height: 400vh;
  background:
    radial-gradient(circle at 73% 16%, rgba(107, 228, 255, 0.11), transparent 28vw),
    radial-gradient(circle at 28% 70%, rgba(124, 255, 178, 0.12), transparent 30vw),
    linear-gradient(180deg, #07100F 0%, #07100F 48%, #0a1916 100%);
}

.star-dust {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.66;
}

.dust-dot {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--moon-fog);
  opacity: var(--dot-opacity);
  transform: translate3d(0, 0, 0);
}

.scan-shadow {
  position: fixed;
  inset: -20% 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, transparent 43%, rgba(216, 246, 234, 0.045) 50%, transparent 57%, transparent 100%);
  animation: scanMoonlight 14s linear infinite;
  mix-blend-mode: screen;
}

.ecosystem-map {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
  overflow: visible;
}

.horizon,
.contour {
  fill: none;
  stroke: var(--moon-fog);
  stroke-width: 1;
  opacity: 0.2;
}

.contour { stroke: var(--shadow-kelp); opacity: 0.72; stroke-dasharray: 8 16; }
.contour-two { opacity: 0.45; }

.network-path {
  fill: none;
  stroke: var(--chlorophyll);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.5;
  filter: url(#softGlow);
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: pathWake 4.8s ease forwards;
}

.network-path.primary { stroke-width: 3; opacity: 0.78; animation-duration: 5.6s; }
.network-path.route { opacity: 0.18; stroke-width: 1.6; animation-delay: 0.9s; }
.network-path.canopy { opacity: 0.13; stroke-width: 1.8; animation-delay: 1.4s; }
.network-path.cyan { stroke: var(--signal-cyan); }

body.scene-1 .route,
body.scene-3 .route { opacity: 0.58; }
body.scene-2 .stress-node { opacity: 1; }
body.scene-3 .canopy { opacity: 0.72; }
body.scene-3 .root:not(.primary) { opacity: 0.28; }
body.scene-0 .label-origin,
body.scene-1 .label-transit,
body.scene-2 .label-stress,
body.scene-3 .label-verify { opacity: 0.88; transform: translateY(0); }

.node { opacity: 0.76; transition: opacity 800ms ease, transform 900ms ease; }
.pod,
.cyan-pod,
.amber-pod { fill: var(--chlorophyll); filter: url(#softGlow); }
.cyan-pod { fill: var(--signal-cyan); }
.amber-pod { fill: var(--alert-amber); }
.dew { fill: url(#nodeGlow); opacity: 0.25; }
.ring,
.stress-ring {
  fill: none;
  stroke: var(--chlorophyll);
  stroke-width: 1.3;
  opacity: 0;
  transform-origin: center;
  animation: pulseLife 4.8s ease-out infinite;
}
.cyan-ring { stroke: var(--signal-cyan); }
.stress-ring { stroke: var(--alert-amber); animation-name: amberPulse; animation-duration: 3.2s; }
.delay { animation-delay: 1.4s; }
.late { animation-delay: 2.2s; }

.map-label {
  font-family: "Share Tech Mono", monospace;
  font-size: 17px;
  letter-spacing: 0.12em;
  fill: var(--moon-fog);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.label-stress { fill: var(--alert-amber); }
.label-verify, .label-transit { fill: var(--signal-cyan); }

.depth-rail {
  position: fixed;
  right: 34px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 7;
  display: grid;
  gap: 24px;
}

.depth-rail::before {
  content: "";
  position: absolute;
  top: -20px;
  bottom: -20px;
  left: 7px;
  width: 1px;
  background: linear-gradient(var(--chlorophyll), var(--signal-cyan));
  opacity: 0.35;
}

.depth-tick {
  position: relative;
  width: 44px;
  height: 18px;
  border: 0;
  background: transparent;
  color: rgba(216, 246, 234, 0.45);
  font-family: "Share Tech Mono", monospace;
  cursor: pointer;
}

.depth-tick::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.depth-tick span { position: absolute; left: 21px; top: 0; font-size: 11px; letter-spacing: 0.1em; }
.depth-tick.active { color: var(--chlorophyll); }
body.scene-3 .depth-tick.active { color: var(--signal-cyan); }

.story { position: relative; z-index: 5; }
.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  align-items: center;
  padding: 8vw;
}

.coordinate-strip,
.domain-mark,
.chapter-annotation span,
.readout,
.stress-codes,
.instrument-cta {
  font-family: "Share Tech Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.coordinate-strip {
  position: absolute;
  top: 34px;
  left: 8vw;
  color: rgba(216, 246, 234, 0.58);
  font-size: 12px;
}

.mission-panel {
  max-width: 650px;
  margin-top: -8vh;
  text-shadow: 0 0 22px rgba(7, 16, 15, 0.9);
}

.domain-mark {
  color: var(--chlorophyll);
  font-size: 14px;
  margin: 0 0 22px;
}

h1,
h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  letter-spacing: 0.045em;
  margin: 0;
}

h1 {
  font-size: clamp(48px, 7vw, 110px);
  line-height: 0.9;
  max-width: 880px;
}

h2 {
  font-size: clamp(34px, 4.7vw, 76px);
  line-height: 0.98;
}

.mission-copy,
.chapter-annotation p {
  color: rgba(216, 246, 234, 0.74);
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.65;
  max-width: 560px;
}

.chapter-annotation {
  position: absolute;
  max-width: 620px;
  padding: 22px 0 22px 26px;
  border-left: 1px solid rgba(124, 255, 178, 0.36);
  opacity: 0.42;
  transform: translateY(22px);
  transition: opacity 900ms ease, transform 900ms ease;
}

.scene.active .chapter-annotation { opacity: 1; transform: translateY(0); }
.chapter-annotation span { display: block; color: var(--chlorophyll); font-size: 12px; margin-bottom: 16px; }
.stress .chapter-annotation span { color: var(--alert-amber); }
.continuity .chapter-annotation span { color: var(--signal-cyan); }
.lower-left { left: 8vw; bottom: 7vh; }
.upper-right { right: 10vw; top: 18vh; }
.center-note { left: 38vw; top: 34vh; border-color: rgba(255, 200, 87, 0.45); }
.final-panel { left: 8vw; top: 22vh; border-color: rgba(107, 228, 255, 0.45); }

.readout,
.stress-codes {
  position: absolute;
  color: rgba(216, 246, 234, 0.58);
  font-size: 12px;
  line-height: 1.9;
}
.left-readout { left: 9vw; bottom: 16vh; color: rgba(107, 228, 255, 0.7); }
.final-readout { right: 12vw; bottom: 18vh; color: rgba(107, 228, 255, 0.76); }
.stress-codes { left: 8vw; top: 18vh; color: rgba(255, 200, 87, 0.72); }

.instrument-cta {
  display: inline-block;
  margin-top: 22px;
  color: var(--signal-cyan);
  text-decoration: none;
  font-size: 12px;
  padding: 12px 18px;
  border: 1px solid rgba(107, 228, 255, 0.42);
  box-shadow: inset 0 0 18px rgba(107, 228, 255, 0.08), 0 0 24px rgba(107, 228, 255, 0.08);
  transition: color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
.instrument-cta:hover { color: var(--moon-fog); border-color: var(--signal-cyan); box-shadow: 0 0 28px rgba(107, 228, 255, 0.22); }

body.scene-2 { --glow: 1; }
body.scene-2 .root.primary { stroke: var(--alert-amber); opacity: 0.54; }
body.scene-2 .map-label { opacity: 0.28; }

@keyframes pathWake {
  to { stroke-dashoffset: 0; }
}

@keyframes pulseLife {
  0% { opacity: 0; transform: scale(0.35); }
  20% { opacity: calc(0.52 * var(--glow)); }
  70% { opacity: 0; transform: scale(1.65); }
  100% { opacity: 0; transform: scale(1.65); }
}

@keyframes amberPulse {
  0% { opacity: 0; transform: scale(0.3); }
  18% { opacity: 0.85; }
  78% { opacity: 0; transform: scale(1.95); }
  100% { opacity: 0; transform: scale(1.95); }
}

@keyframes scanMoonlight {
  from { transform: translateX(-60vw); }
  to { transform: translateX(60vw); }
}

@media (max-width: 760px) {
  .scene { padding: 24px; }
  .coordinate-strip { left: 24px; right: 74px; }
  .chapter-annotation { left: 24px; right: 72px; top: auto; bottom: 8vh; max-width: none; }
  .center-note, .upper-right, .final-panel { left: 24px; right: 72px; top: auto; }
  .depth-rail { right: 16px; }
  .readout, .stress-codes { display: none; }
  h1 { font-size: clamp(42px, 13vw, 72px); }
}