:root {
  /* Compliance note: Cormorant Garamond, Source Serif 4**, IBM Plex Sans** from Google Fonts for specimen tags, narrative explanations, and short conversational paragraphs. It should feel calm. */
  --deep-genome-black: #07080F;
  --nocturne-violet: #24163A;
  --chlorophyll-ember: #B7F26B;
  --antique-petal-cream: #F3E8D2;
  --bruised-orchid: #8D5CFF;
  --moss-glass: #2F6B4F;
  --rust-pollen: #D98B3A;
  --display: "Cormorant Garamond", Cormorant, Garamond, Georgia, serif;
  --body: "Source Serif 4", Lora, Georgia, serif;
  --label: "IBM Plex Sans", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--deep-genome-black);
  color: var(--antique-petal-cream);
  font-family: var(--body);
  overflow: hidden;
}

.scroll-world {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  background:
    radial-gradient(circle at 18% 14%, rgba(141, 92, 255, 0.18), transparent 34%),
    radial-gradient(circle at 82% 74%, rgba(183, 242, 107, 0.12), transparent 32%),
    linear-gradient(135deg, var(--deep-genome-black), #0b0916 52%, var(--deep-genome-black));
}

.scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
  padding: clamp(24px, 5vw, 76px);
  isolation: isolate;
}

.scene::before {
  content: "";
  position: absolute;
  inset: 4vh 4vw;
  border: 1px solid rgba(243, 232, 210, 0.13);
  border-radius: 2px;
  background:
    linear-gradient(135deg, rgba(36, 22, 58, 0.28), transparent 40%, rgba(47, 107, 79, 0.08)),
    radial-gradient(circle at 50% 50%, transparent 40%, rgba(7, 8, 15, 0.5));
  box-shadow: inset 0 0 80px rgba(36, 22, 58, 0.5), 0 0 90px rgba(7, 8, 15, 0.7);
  z-index: -1;
}

.scene::after {
  content: "✦";
  position: absolute;
  right: 7vw;
  top: 8vh;
  color: var(--rust-pollen);
  opacity: 0.65;
  font-size: 13px;
  text-shadow: 0 0 18px rgba(217, 139, 58, 0.8);
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: 0.23;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(243, 232, 210, 0.24) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(183, 242, 107, 0.18) 0 1px, transparent 1px),
    radial-gradient(circle at 40% 80%, rgba(141, 92, 255, 0.18) 0 1px, transparent 1px);
  background-size: 41px 43px, 67px 71px, 97px 89px;
  mix-blend-mode: screen;
}

.mist {
  position: fixed;
  width: 42vmax;
  height: 42vmax;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(60px);
  z-index: 1;
  opacity: 0.23;
}

.mist-one { left: -18vmax; top: 12vh; background: var(--bruised-orchid); }
.mist-two { right: -18vmax; bottom: -14vh; background: var(--moss-glass); }

.pollen-field { position: fixed; inset: 0; pointer-events: none; z-index: 35; }
.pollen {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--rust-pollen);
  box-shadow: 0 0 12px currentColor;
  opacity: 0.45;
  animation: drift var(--speed) linear infinite;
}

@keyframes drift {
  from { transform: translate3d(0, 105vh, 0) scale(0.75); }
  to { transform: translate3d(var(--sway), -10vh, 0) scale(1.15); }
}

.specimen-nav {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: grid;
  gap: 16px;
}

.nav-dot {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(243, 232, 210, 0.22);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(243, 232, 210, 0.58);
  text-decoration: none;
  font: 10px/1 var(--label);
  letter-spacing: 0.12em;
  background: rgba(7, 8, 15, 0.62);
  transition: 400ms ease;
}

.nav-dot.active, .nav-dot:hover {
  color: var(--deep-genome-black);
  background: var(--chlorophyll-ember);
  box-shadow: 0 0 28px rgba(183, 242, 107, 0.54);
  border-color: var(--chlorophyll-ember);
}

.corner-mark, .kicker, .annotation, .manuscript-panel, .data-fragment, .next-cue, .ledger-labels, .repair-glyph, .final-note {
  font-family: var(--label);
  letter-spacing: 0.11em;
}

.corner-mark {
  position: absolute;
  top: 6vh;
  left: 6vw;
  font-size: 12px;
  color: rgba(243, 232, 210, 0.52);
  text-transform: uppercase;
}

.scene-copy {
  position: absolute;
  z-index: 12;
  max-width: 580px;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1100ms ease, transform 1100ms ease;
}

.scene.is-visible .scene-copy { opacity: 1; transform: translateY(0); }

.copy-upper-left { left: clamp(32px, 8vw, 112px); top: clamp(86px, 15vh, 150px); }
.copy-right { right: clamp(42px, 8vw, 122px); top: clamp(104px, 18vh, 170px); max-width: 500px; }
.narrow { max-width: 505px; }

.kicker {
  margin: 0 0 18px;
  color: var(--rust-pollen);
  font-size: 11px;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  line-height: 0.92;
  color: var(--antique-petal-cream);
  text-shadow: 0 0 30px rgba(243, 232, 210, 0.12);
}

h1 { font-size: clamp(66px, 11vw, 150px); font-style: italic; }
h2 { font-size: clamp(48px, 7.5vw, 104px); }

.scene-copy p:not(.kicker) {
  max-width: 430px;
  margin: 24px 0 0;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.55;
  color: rgba(243, 232, 210, 0.78);
}

.vine {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  overflow: visible;
}

.vine-path, .vine-shadow, .broken-stem, .reticle, .garden path, .calyx path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vine-shadow {
  stroke: rgba(141, 92, 255, 0.17);
  stroke-width: 15;
  filter: blur(16px);
}

.vine-path {
  stroke: var(--chlorophyll-ember);
  stroke-width: 2.2;
  filter: drop-shadow(0 0 10px rgba(183, 242, 107, 0.85));
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
}

.scene.is-visible .vine-path { animation: drawVine 2600ms cubic-bezier(.35,.02,.12,1) forwards; }

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

.leaf-cluster ellipse, .garden ellipse {
  fill: rgba(47, 107, 79, 0.82);
  stroke: var(--chlorophyll-ember);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 9px rgba(183, 242, 107, 0.35));
}

.leaf-cluster { opacity: 0; transition: opacity 800ms ease 1300ms; }
.scene.is-visible .leaf-cluster { opacity: 1; }

.cap, .calyx circle {
  fill: var(--deep-genome-black);
  stroke: var(--chlorophyll-ember);
  stroke-width: 2;
  filter: drop-shadow(0 0 18px rgba(183, 242, 107, 0.9));
  cursor: pointer;
}

.cap.dim { stroke: var(--rust-pollen); filter: drop-shadow(0 0 14px rgba(217, 139, 58, 0.7)); }
.seed { fill: var(--bruised-orchid); filter: drop-shadow(0 0 10px rgba(141, 92, 255, 0.9)); }
.seed.rust { fill: var(--rust-pollen); }

.annotation {
  position: absolute;
  z-index: 14;
  padding: 10px 13px;
  border: 1px solid rgba(243, 232, 210, 0.2);
  background: rgba(7, 8, 15, 0.66);
  color: rgba(243, 232, 210, 0.72);
  font-size: 11px;
  text-transform: uppercase;
  transform: translateX(-18px);
  opacity: 0;
  transition: 900ms ease 900ms;
}

.scene.is-visible .annotation { opacity: 1; transform: translateX(0); }
.tag-one { left: 39vw; top: 32vh; border-left-color: var(--bruised-orchid); }
.tag-two { right: 8vw; top: 57vh; border-left-color: var(--chlorophyll-ember); }
.tag-three { left: 13vw; bottom: 18vh; border-left-color: var(--chlorophyll-ember); }

.next-cue {
  position: absolute;
  left: 8vw;
  bottom: 8vh;
  color: rgba(243, 232, 210, 0.52);
  font-size: 11px;
  text-transform: uppercase;
}

.broken-stem { stroke: var(--rust-pollen); stroke-width: 2; stroke-dasharray: 8 11; filter: drop-shadow(0 0 8px rgba(217, 139, 58, 0.5)); }
.falling-glyphs text { fill: rgba(243, 232, 210, 0.46); font: 18px var(--label); letter-spacing: .18em; animation: glyphFall 5s ease-in-out infinite alternate; }
@keyframes glyphFall { to { transform: translateY(18px) rotate(6deg); opacity: .3; } }

.manuscript-panel {
  position: absolute;
  right: 9vw;
  bottom: 19vh;
  z-index: 14;
  width: min(330px, 72vw);
  padding: 22px;
  background: rgba(243, 232, 210, 0.08);
  border: 1px solid rgba(243, 232, 210, 0.22);
  box-shadow: 0 30px 80px rgba(0,0,0,.28);
}

.manuscript-panel span, .data-fragment span { display: block; color: var(--rust-pollen); font-size: 10px; text-transform: uppercase; margin-bottom: 12px; }
.manuscript-panel strong { display: block; color: var(--antique-petal-cream); font-size: 13px; margin-bottom: 16px; }
.manuscript-panel em { font-family: var(--display); color: rgba(243, 232, 210, 0.78); font-size: 25px; letter-spacing: 0; }

.repair-glyph {
  position: absolute;
  left: 12vw;
  bottom: 19vh;
  z-index: 15;
  padding: 12px 16px;
  border: 1px solid var(--rust-pollen);
  color: var(--rust-pollen);
  background: rgba(7, 8, 15, 0.72);
  text-transform: uppercase;
  cursor: pointer;
}

.clipped-glyph {
  position: absolute;
  left: 12vw;
  bottom: 12vh;
  z-index: 15;
  color: rgba(243, 232, 210, 0.55);
  font: 15px var(--label);
  letter-spacing: .3em;
  transition: 600ms ease;
}

.clipped-glyph.repaired { color: var(--chlorophyll-ember); text-shadow: 0 0 18px rgba(183,242,107,.7); letter-spacing: .16em; }

.calyx path { stroke: var(--chlorophyll-ember); stroke-width: 2; filter: drop-shadow(0 0 11px rgba(183, 242, 107, 0.8)); }
.reticle { stroke: rgba(141, 92, 255, 0.42); stroke-width: 1; }

.data-fragment {
  position: absolute;
  left: 14vw;
  top: 26vh;
  z-index: 15;
  max-width: 360px;
  padding: 18px;
  border-left: 1px solid var(--bruised-orchid);
  background: linear-gradient(90deg, rgba(36,22,58,.66), transparent);
  color: rgba(243, 232, 210, 0.72);
}

.data-fragment b { font-weight: 400; color: var(--antique-petal-cream); letter-spacing: .06em; }
.data-fragment.active { box-shadow: -18px 0 44px rgba(141, 92, 255, 0.18); color: var(--chlorophyll-ember); }

.garden path { stroke: rgba(47, 107, 79, 0.9); stroke-width: 2; }
.garden ellipse { opacity: 0; transform: scale(.2); transition: 900ms ease 1500ms; }
.scene.is-visible .garden ellipse { opacity: 1; transform: scale(1); }

.ledger-labels {
  position: absolute;
  right: 9vw;
  bottom: 16vh;
  z-index: 14;
  display: grid;
  gap: 12px;
}

.ledger-labels span {
  padding: 11px 14px;
  background: rgba(7,8,15,.7);
  border: 1px solid rgba(183,242,107,.22);
  color: rgba(243,232,210,.68);
  font-size: 11px;
  text-transform: uppercase;
}

.final-note {
  position: absolute;
  left: 8vw;
  bottom: 7vh;
  z-index: 15;
  color: var(--chlorophyll-ember);
  font-size: 12px;
  text-transform: uppercase;
}

.whisper {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  padding: 10px 13px;
  background: rgba(7, 8, 15, 0.88);
  border: 1px solid rgba(183, 242, 107, 0.4);
  color: var(--antique-petal-cream);
  font: 12px var(--label);
  letter-spacing: .08em;
  opacity: 0;
  transform: translate(-50%, -130%);
  transition: opacity 180ms ease;
  box-shadow: 0 0 30px rgba(183, 242, 107, 0.18);
}

.whisper.visible { opacity: 1; }

@media (max-width: 760px) {
  body { overflow: auto; }
  .scroll-world { scroll-snap-type: y proximity; }
  .specimen-nav { right: 12px; }
  .scene { padding: 22px; }
  .scene::before { inset: 16px; }
  .copy-upper-left, .copy-right { left: 34px; right: 34px; top: 92px; }
  h1 { font-size: clamp(58px, 18vw, 92px); }
  h2 { font-size: clamp(44px, 14vw, 74px); }
  .tag-one, .tag-two, .tag-three, .manuscript-panel, .ledger-labels, .data-fragment { left: 34px; right: 34px; top: auto; bottom: 120px; width: auto; }
  .repair-glyph { left: 34px; bottom: 190px; }
  .clipped-glyph { left: 34px; bottom: 150px; }
}