:root {
  /* Design typography tokens: Space Grotesk` in weights 500–700. Use it large */
  --charcoal: #10110E;
  --paper: #F7F3E8;
  --green: #31D06D;
  --blue: #7DCBFF;
  --violet: #6D5DF2;
  --brown: #6B3F24;
  --display: "Space Grotesk", sans-serif;
  --body: "DM Sans", sans-serif;
  --accent: "Archivo", sans-serif;
  --ease-paper: cubic-bezier(.18,.82,.22,1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--charcoal);
  color: var(--paper);
  font-family: var(--body);
  overflow-x: hidden;
}

.observatory { position: relative; }

.chapter {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.panel {
  position: relative;
  min-height: 100vh;
  padding: clamp(2rem, 5vw, 5.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.panel-carbon { background: var(--charcoal); }
.panel-life { background: var(--paper); color: var(--charcoal); }
.paper-side { background: var(--paper); color: var(--charcoal); }

.center-seam {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, var(--green) 15%, var(--green) 85%, transparent);
  box-shadow: 0 0 0 1px rgba(247,243,232,.12), 0 0 26px rgba(49,208,109,.22);
}

.center-seam::before {
  content: "";
  position: absolute;
  inset: 0 -18px;
  background: radial-gradient(circle at 50% var(--cursor-y, 50%), rgba(49,208,109,.24), transparent 18%);
  opacity: var(--seam-glow, .35);
  transition: opacity 700ms var(--ease-paper);
}

.center-seam i {
  position: absolute;
  left: 50%;
  width: 11px;
  height: 11px;
  transform: translate(-50%, -50%) scale(var(--sprout, 1));
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 7px rgba(49,208,109,.1);
  transition: transform 900ms var(--ease-paper), border-radius 900ms var(--ease-paper);
}

.center-seam i:nth-child(1) { top: 16%; }
.center-seam i:nth-child(2) { top: 32%; background: var(--paper); }
.center-seam i:nth-child(3) { top: 50%; }
.center-seam i:nth-child(4) { top: 68%; background: var(--blue); }
.center-seam i:nth-child(5) { top: 84%; }

.chapter.seam-awake .center-seam i { border-radius: 60% 45% 65% 35%; --sprout: 1.65; }
.seam-brown { background: linear-gradient(to bottom, transparent, var(--brown), transparent); }
.violet-seam { background: linear-gradient(to bottom, transparent, var(--violet), var(--green), transparent); }

.seed-nav {
  position: fixed;
  z-index: 30;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  opacity: .72;
  transition: opacity 600ms var(--ease-paper);
}

.seed-nav:hover { opacity: 1; }
.seed-link { position: relative; width: 18px; height: 18px; display: grid; place-items: center; text-decoration: none; }
.seed-link span { width: 7px; height: 7px; border-radius: 50%; background: var(--paper); border: 1px solid var(--green); transition: 500ms var(--ease-paper); }
.seed-link.active span, .seed-link:hover span { width: 14px; height: 14px; background: var(--green); }
.seed-link::after {
  content: attr(data-label);
  position: absolute;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%) translateX(-8px);
  color: var(--paper);
  background: var(--charcoal);
  border: 1px solid rgba(247,243,232,.25);
  padding: .25rem .45rem;
  font: 700 .62rem/1 var(--accent);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: 420ms var(--ease-paper);
}
.seed-link:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

.specimen {
  margin: 0 0 1.4rem;
  color: var(--green);
  font: 700 .72rem/1 var(--accent);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.specimen.dark { color: var(--brown); }

h1, h2 {
  font-family: var(--display);
  margin: 0;
  letter-spacing: -.055em;
  line-height: .88;
}

h1 {
  font-size: clamp(5.7rem, 18vw, 17rem);
  transform: translateX(-.08em);
}

h2 { font-size: clamp(3.4rem, 8vw, 8.3rem); max-width: 9ch; }

.fragment, .life-note, .annotation {
  max-width: 34rem;
  font-size: clamp(1.05rem, 1.5vw, 1.45rem);
  line-height: 1.45;
  color: rgba(247,243,232,.82);
}
.fragment.dark, .life-note.dark, .annotation { color: rgba(16,17,14,.72); }

.equation {
  margin-top: 3.5rem;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.5vw, 2.6rem);
  color: var(--paper);
}
.equation span { color: var(--green); margin: 0 .45rem; }

.charcoal-rub {
  position: absolute;
  inset: 8% 10% auto auto;
  width: 44%;
  height: 42%;
  opacity: .22;
  background:
    repeating-linear-gradient(100deg, rgba(247,243,232,.18) 0 2px, transparent 2px 8px),
    radial-gradient(ellipse, rgba(247,243,232,.35), transparent 68%);
  clip-path: polygon(10% 8%, 90% 0, 100% 72%, 42% 100%, 0 62%);
}

.wash-orb, .watercolor, .center-bloom {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 35%, rgba(247,243,232,.54) 0 8%, transparent 9%),
    radial-gradient(circle at 52% 48%, rgba(49,208,109,.62), transparent 34%),
    radial-gradient(circle at 66% 58%, rgba(125,203,255,.56), transparent 42%),
    radial-gradient(circle at 44% 64%, rgba(109,93,242,.28), transparent 39%);
  filter: blur(.2px);
  box-shadow: inset 0 0 34px rgba(247,243,232,.35);
}

.hero-orb {
  width: min(68vw, 44rem);
  height: min(68vw, 44rem);
  left: -8rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: .9;
  animation: breathe 8s ease-in-out infinite;
}

.botanical { position: absolute; right: 8%; bottom: -3%; width: min(35vw, 22rem); height: 78vh; overflow: visible; }
.botanical path { fill: none; stroke: var(--green); stroke-width: 5; stroke-linecap: round; opacity: .82; }
.botanical .fronds path { stroke-width: 4; stroke: rgba(49,208,109,.68); }
.life-note { position: relative; align-self: flex-end; margin-top: auto; color: rgba(16,17,14,.66); }

.leaf-curtain {
  position: absolute;
  background:
    radial-gradient(ellipse at 45% 45%, rgba(49,208,109,.55), transparent 42%),
    radial-gradient(ellipse at 62% 58%, rgba(125,203,255,.38), transparent 45%),
    rgba(49,208,109,.12);
  border: 1px solid rgba(49,208,109,.18);
  clip-path: ellipse(38% 50% at 50% 50%);
  transform-origin: 12% 50%;
}
.curtain-one { width: 24rem; height: 34rem; right: -7rem; top: 5rem; transform: rotate(-18deg); opacity: .75; }

.slide-paper {
  transform: translateX(-16%);
  opacity: 0;
  transition: transform 1300ms var(--ease-paper), opacity 1300ms var(--ease-paper);
}
.in-view .slide-paper { transform: translateX(0); opacity: 1; }
.carbon-chain { position: absolute; right: 8%; bottom: 14%; display: flex; gap: 1.1rem; align-items: center; }
.carbon-chain span { width: 18px; height: 18px; background: var(--charcoal); border-radius: 50%; transform: translateY(28px); opacity: .25; transition: 1000ms var(--ease-paper); }
.carbon-chain span:nth-child(even) { background: var(--green); }
.in-view .carbon-chain span { transform: translateY(0); opacity: 1; }
.carbon-chain span:nth-child(2) { transition-delay: 120ms; }.carbon-chain span:nth-child(3) { transition-delay: 240ms; }.carbon-chain span:nth-child(4) { transition-delay: 360ms; }.carbon-chain span:nth-child(5) { transition-delay: 480ms; }.carbon-chain span:nth-child(6) { transition-delay: 600ms; }

.root-field { justify-content: flex-end; }
.roots { position: absolute; inset: auto 0 0 0; width: 100%; height: 92%; }
.roots path { fill: none; stroke: var(--brown); stroke-width: 3; stroke-linecap: round; opacity: .68; stroke-dasharray: 780; stroke-dashoffset: 780; transition: stroke-dashoffset 1800ms var(--ease-paper); }
.in-view .roots path { stroke-dashoffset: 0; }
.pool { width: 26rem; height: 18rem; right: 8%; top: 12%; opacity: .45; }
.annotation { position: relative; max-width: 21rem; align-self: flex-end; margin-bottom: 3rem; }

.leaf-text { z-index: 2; }
.stamp { margin-top: 2rem; color: var(--charcoal); background: var(--green); align-self: flex-start; padding: .45rem .7rem; font: 700 .7rem/1 var(--accent); letter-spacing: .16em; text-transform: uppercase; }
.leaf-stage { align-items: center; }
.giant-leaf {
  width: min(68vw, 42rem);
  height: min(84vh, 48rem);
  left: 8%;
  top: 7%;
  opacity: .86;
  transform: translateX(0) rotate(var(--leaf-tilt, -7deg));
  transition: transform 1200ms var(--ease-paper);
}
.in-view .giant-leaf { transform: translateX(28%) rotate(var(--leaf-tilt, 5deg)); }
.leaf-reveal-text { max-width: 18rem; font-family: var(--display); font-size: clamp(1.7rem, 3vw, 3rem); line-height: 1; color: var(--charcoal); }
.pigment { position: absolute; border-radius: 50%; background: rgba(109,93,242,.25); animation: drift 7s ease-in-out infinite; }
.p1 { width: 5rem; height: 5rem; left: 22%; bottom: 18%; }.p2 { width: 3rem; height: 3rem; right: 18%; top: 22%; animation-delay: -2s; background: rgba(125,203,255,.33); }.p3 { width: 2rem; height: 2rem; right: 34%; bottom: 28%; animation-delay: -4s; background: rgba(49,208,109,.3); }

.cycle-left { background: var(--paper); color: var(--charcoal); }
.breath-rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.breath-rings span { position: absolute; width: 18rem; height: 18rem; border: 2px solid rgba(125,203,255,.52); border-radius: 50%; animation: ring 6s ease-out infinite; }
.breath-rings span:nth-child(2) { animation-delay: 2s; }.breath-rings span:nth-child(3) { animation-delay: 4s; }
.cycle-left h2, .cycle-left .specimen { position: relative; z-index: 2; }
.cycle-right { background: var(--charcoal); color: var(--paper); }
.cycle-orbit { position: relative; width: min(35rem, 80vw); height: min(35rem, 80vw); border: 1px solid rgba(247,243,232,.28); border-radius: 50%; margin-bottom: 3rem; animation: slowturn 28s linear infinite; }
.cycle-orbit::before { content: ""; position: absolute; inset: 22%; border: 1px solid rgba(49,208,109,.35); border-radius: 50%; }
.cycle-orbit span { position: absolute; color: var(--green); font: 700 .72rem/1 var(--accent); letter-spacing: .18em; text-transform: uppercase; }
.cycle-orbit span:nth-child(1) { left: 46%; top: -.4rem; }.cycle-orbit span:nth-child(2) { right: -1rem; top: 48%; }.cycle-orbit span:nth-child(3) { left: 44%; bottom: -.4rem; }.cycle-orbit span:nth-child(4) { left: -1.4rem; top: 48%; }

.final-carbon h2 { max-width: 10ch; }
.final-life { align-items: center; justify-content: center; }
.center-bloom { width: min(50vw, 30rem); height: min(50vw, 30rem); opacity: .9; animation: breathe 9s ease-in-out infinite; }
.seed-row { position: relative; width: 80%; max-width: 34rem; margin-top: -5rem; overflow: visible; }
.seed-row path { fill: none; stroke: var(--brown); stroke-width: 4; stroke-linecap: round; }
.seed-row circle { fill: var(--green); stroke: var(--charcoal); stroke-width: 2; }

@keyframes breathe { 0%,100% { transform: translateY(-50%) scale(.96); border-radius: 48% 52% 44% 56%; } 50% { transform: translateY(-50%) scale(1.04); border-radius: 56% 44% 54% 46%; } }
@keyframes drift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(18px,-22px); } }
@keyframes ring { 0% { transform: scale(.35); opacity: .85; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes slowturn { to { transform: rotate(360deg); } }

@media (max-width: 820px) {
  .chapter { grid-template-columns: 1fr; min-height: 200vh; }
  .panel { min-height: 100vh; padding: 2rem; }
  .center-seam, .seed-nav { left: auto; right: 1.25rem; }
  .seed-nav { transform: translateY(-50%); }
  .seed-link::after { left: auto; right: 1.5rem; }
  h1 { font-size: clamp(5rem, 31vw, 9rem); }
  h2 { font-size: clamp(3rem, 15vw, 6rem); }
  .botanical { width: 70vw; right: -4%; }
  .hero-orb { left: -40%; width: 120vw; height: 120vw; }
  .giant-leaf { width: 105vw; left: -18%; }
  .in-view .giant-leaf { transform: translateX(18%) rotate(var(--leaf-tilt, 5deg)); }
}