:root {
  --canopy: #0B3D2E;
  --fern: #1F8A4C;
  --spring: #C7F7D4;
  --mint: #72FFD2;
  --cream: #FFF6C8;
  --orchid: #D966FF;
  --moss: #031A13;
  --display: "Jost", "Futura", system-ui, sans-serif;
  --body: "Nunito Sans", "Inter", system-ui, sans-serif;
  --mono: "Space Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--spring);
  font-family: var(--body);
  background:
    radial-gradient(circle at 86% 14%, rgba(114, 255, 210, 0.2), transparent 31rem),
    radial-gradient(circle at 76% 62%, rgba(217, 102, 255, 0.11), transparent 27rem),
    linear-gradient(135deg, var(--moss), var(--canopy) 46%, #08271e);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(199, 247, 212, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199, 247, 212, 0.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, black, transparent 82%);
  z-index: 1;
}

.aurora-field {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.ribbon {
  position: absolute;
  width: 86vw;
  height: 24vh;
  right: -18vw;
  border-radius: 999px;
  filter: blur(21px);
  opacity: 0.46;
  transform: rotate(-11deg);
  mix-blend-mode: screen;
  animation: driftRibbon 18s ease-in-out infinite alternate;
}

.ribbon-one { top: 4vh; background: linear-gradient(90deg, transparent, #72FFD2, transparent); }
.ribbon-two { top: 17vh; background: linear-gradient(90deg, transparent, #C7F7D4, #D966FF, transparent); animation-duration: 24s; }
.ribbon-three { top: 48vh; background: linear-gradient(90deg, transparent, rgba(114,255,210,0.55), rgba(217,102,255,0.4), transparent); animation-duration: 28s; }

@keyframes driftRibbon {
  from { transform: translate3d(-4vw, -2vh, 0) rotate(-13deg) scaleX(0.95); }
  to { transform: translate3d(8vw, 5vh, 0) rotate(-7deg) scaleX(1.12); }
}

.root-spine {
  position: fixed;
  left: clamp(16px, 3.6vw, 54px);
  top: 8vh;
  bottom: 7vh;
  width: 190px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.spine-line {
  position: absolute;
  left: 17px;
  top: 0;
  bottom: 0;
  width: 18px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 12%, #72FFD2, transparent 8%),
    linear-gradient(180deg, #0B3D2E, #1F8A4C 48%, #031A13);
  box-shadow: inset 0 0 18px rgba(199,247,212,0.18), 0 0 24px rgba(114,255,210,0.16);
}

.spine-node {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 46px;
  text-decoration: none;
  color: var(--spring);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: -0.04em;
}

.node-dot {
  width: 34px;
  height: 34px;
  margin-right: 12px;
  border-radius: 999px 999px 999px 42%;
  background: var(--canopy);
  border: 2px solid rgba(199, 247, 212, 0.42);
  box-shadow: inset 0 0 11px rgba(3,26,19,0.9);
  transition: 0.35s ease;
}

.node-label {
  display: inline-flex;
  padding: 0.52rem 0.78rem;
  border-radius: 999px;
  background: rgba(3, 26, 19, 0.62);
  border: 1px solid rgba(199, 247, 212, 0.2);
  transform: translateX(-8px);
  opacity: 0.58;
  transition: 0.35s ease;
}

.spine-node.active .node-dot {
  background: radial-gradient(circle at 35% 30%, #FFF6C8, #72FFD2 45%, #1F8A4C 80%);
  border-color: #72FFD2;
  box-shadow: 0 0 22px rgba(114,255,210,0.8), 0 0 0 8px rgba(114,255,210,0.09);
}

.spine-node.active .node-label {
  opacity: 1;
  color: var(--moss);
  background: var(--cream);
  transform: translateX(0);
}

.spine-node::after {
  content: "";
  position: absolute;
  left: 35px;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, #72FFD2, transparent);
  transition: width 0.35s ease;
}

.spine-node.active::after { width: 70px; }

.greenhouse-tour { position: relative; z-index: 2; }

.theory-chamber {
  min-height: 100vh;
  padding: clamp(28px, 5vw, 70px) clamp(20px, 5vw, 76px) clamp(28px, 5vw, 70px) clamp(250px, 23vw, 360px);
  display: flex;
  align-items: center;
}

.chamber-shell {
  position: relative;
  width: min(1120px, 100%);
  min-height: 72vh;
  padding: clamp(26px, 4vw, 58px);
  border: 1px solid rgba(199, 247, 212, 0.25);
  border-radius: 58px 120px 72px 96px / 72px 60px 122px 70px;
  background:
    radial-gradient(circle at 16% 19%, rgba(255,246,200,0.2), transparent 19rem),
    radial-gradient(circle at 78% 24%, rgba(114,255,210,0.18), transparent 24rem),
    linear-gradient(135deg, rgba(11,61,46,0.86), rgba(31,138,76,0.28));
  box-shadow: inset 0 0 48px rgba(199,247,212,0.08), 0 38px 100px rgba(3,26,19,0.48);
  overflow: hidden;
  isolation: isolate;
}

.chamber-shell::before,
.chamber-shell::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

.chamber-shell::before {
  width: 50%;
  height: 62%;
  right: -13%;
  top: 8%;
  background: radial-gradient(circle, rgba(199,247,212,0.18), rgba(114,255,210,0.04) 54%, transparent 68%);
  border: 1px solid rgba(199,247,212,0.13);
}

.chamber-shell::after {
  width: 520px;
  height: 220px;
  right: 5%;
  bottom: 8%;
  background: repeating-radial-gradient(ellipse at center, rgba(199,247,212,0.16) 0 1px, transparent 2px 18px);
  opacity: 0.5;
  transform: rotate(-12deg);
}

.hero-shell {
  min-height: 82vh;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: clamp(22px, 4vh, 36px);
}

.top-band,
.middle-band,
.text-band,
.artifact-stream {
  position: relative;
  z-index: 2;
}

.top-band,
.text-band {
  max-width: 790px;
  border-radius: 999px 64px 64px 999px / 90px 56px 56px 90px;
  background: linear-gradient(90deg, rgba(255,246,200,0.92), rgba(199,247,212,0.72), rgba(199,247,212,0.06));
  color: var(--moss);
  padding: clamp(24px, 4vw, 46px);
  box-shadow: 0 16px 44px rgba(3,26,19,0.22), inset 0 0 0 1px rgba(255,255,255,0.35);
}

.middle-band {
  width: min(690px, 76%);
  min-height: 190px;
  border-radius: 42px 92px 70px 40px;
  background: rgba(3, 26, 19, 0.42);
  border: 1px solid rgba(114,255,210,0.32);
  box-shadow: inset 0 0 31px rgba(114,255,210,0.11), 0 0 38px rgba(114,255,210,0.12);
  padding: 16px;
}

.mono-tag {
  margin: 0 0 0.8rem;
  font-family: var(--mono);
  font-size: clamp(0.68rem, 1vw, 0.82rem);
  color: var(--fern);
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.07em;
}

h1 { font-size: clamp(4.6rem, 15vw, 12.2rem); }
h2 { font-size: clamp(3.2rem, 8vw, 7.8rem); }

.thesis,
.text-band p:not(.mono-tag) {
  max-width: 690px;
  margin: 1.2rem 0 0;
  font-size: clamp(1.05rem, 1.7vw, 1.55rem);
  line-height: 1.45;
  color: rgba(3, 26, 19, 0.88);
  font-weight: 700;
}

.diagram-band svg { width: 100%; height: 100%; min-height: 150px; }
.svg-membrane { fill: rgba(199,247,212,0.14); stroke: #72FFD2; stroke-width: 3; }
.svg-root { fill: none; stroke: #C7F7D4; stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(114,255,210,0.65)); }
.svg-root.thin { stroke: #1F8A4C; stroke-width: 3; }
.svg-node { fill: #72FFD2; stroke: #FFF6C8; stroke-width: 4; }
.svg-node.orchid { fill: #D966FF; }

.diagram-note {
  position: absolute;
  right: 24px;
  bottom: 14px;
}

.torn-label,
.artifact {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: -0.04em;
  color: var(--moss);
  background: var(--cream);
  box-shadow: 0 12px 28px rgba(3,26,19,0.25);
}

.torn-label { padding: 0.7rem 1rem; transform: rotate(-2deg); }

.artifact-stream {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px;
  max-width: 760px;
  margin-bottom: clamp(22px, 4vh, 42px);
}

.hero-artifacts { align-self: end; }

.artifact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.7rem 1rem;
  border-radius: 18px 28px 16px 32px;
  border: 1px solid rgba(3,26,19,0.12);
  animation: floatArtifact 7s ease-in-out infinite alternate;
}

.artifact:nth-child(2n) { animation-duration: 9s; transform: translateY(10px) rotate(3deg); }
.artifact:nth-child(3n) { animation-duration: 11s; }
.artifact.pod { width: 72px; height: 72px; border-radius: 44% 58% 50% 61%; background: radial-gradient(circle at 30% 25%, #FFF6C8, #72FFD2 58%, #1F8A4C); font-size: 1.8rem; }
.artifact.scan { background: repeating-linear-gradient(135deg, #FFF6C8 0 9px, #C7F7D4 10px 16px); }
.artifact.leaf { background: linear-gradient(135deg, rgba(199,247,212,0.86), rgba(114,255,210,0.54)); }
.artifact.diagram { background: #C7F7D4; border-radius: 999px; }
.orchid-tape { background: #D966FF; color: #031A13; }
.glitch-strip { position: relative; background: #031A13; color: #72FFD2; overflow: visible; }
.glitch-strip::before { content: ""; position: absolute; inset: 35% -8px auto 8px; height: 10px; background: #D966FF; opacity: 0.75; transform: translateX(8px); z-index: -1; }

@keyframes floatArtifact {
  from { translate: 0 0; }
  to { translate: 0 -14px; }
}

.text-band { margin-top: 8vh; }
.text-band.shorter { max-width: 700px; }

.air-pocket {
  position: absolute;
  right: 7%;
  top: 24%;
  width: min(330px, 32vw);
  aspect-ratio: 1.05;
  border-radius: 45% 55% 62% 38% / 42% 43% 57% 58%;
  background: radial-gradient(circle at 38% 29%, rgba(255,246,200,0.72), rgba(114,255,210,0.18) 45%, rgba(11,61,46,0.18));
  border: 1px solid rgba(199,247,212,0.28);
  display: grid;
  place-content: center;
  gap: 0.55rem;
  font-family: var(--mono);
  color: var(--cream);
  text-transform: uppercase;
  box-shadow: inset 0 0 34px rgba(255,246,200,0.12);
}

.air-pocket span:nth-child(2) { margin-left: 4rem; color: var(--mint); }
.air-pocket span:nth-child(3) { margin-left: 1.6rem; color: var(--orchid); }

.proof-shell { border-radius: 104px 52px 132px 56px / 70px 108px 56px 100px; }
.proof-rings { position: absolute; right: 9%; bottom: 12%; width: 320px; height: 240px; opacity: 0.75; }
.proof-rings i { position: absolute; inset: calc(var(--i, 0) * 22px); border: 2px solid rgba(114,255,210,0.38); border-radius: 44% 56% 52% 48%; }
.proof-rings i:nth-child(1) { --i: 0; }
.proof-rings i:nth-child(2) { --i: 1; border-color: rgba(199,247,212,0.34); }
.proof-rings i:nth-child(3) { --i: 2; border-color: rgba(31,138,76,0.6); }
.proof-rings i:nth-child(4) { --i: 3; border-color: rgba(217,102,255,0.32); }

.graft-shell { background: radial-gradient(circle at 75% 20%, rgba(217,102,255,0.19), transparent 20rem), linear-gradient(135deg, rgba(11,61,46,0.9), rgba(3,26,19,0.56)); }
.graft-window { position: absolute; right: 8%; top: 27%; width: 340px; height: 300px; border-radius: 55px; overflow: hidden; border: 1px solid rgba(217,102,255,0.38); background: rgba(3,26,19,0.45); }
.graft-window span { position: absolute; left: 10%; right: 10%; height: 38px; background: linear-gradient(90deg, #72FFD2, #D966FF, transparent); opacity: 0.7; filter: blur(1px); }
.graft-window span:nth-child(1) { top: 42px; transform: translateX(9px); }
.graft-window span:nth-child(2) { top: 102px; transform: translateX(-12px); }
.graft-window span:nth-child(3) { top: 164px; transform: translateX(18px); }
.graft-window span:nth-child(4) { top: 222px; transform: translateX(-5px); }

.final-shell { background: radial-gradient(circle at 14% 22%, rgba(255,246,200,0.18), transparent 23rem), linear-gradient(145deg, rgba(3,26,19,0.93), rgba(11,61,46,0.74)); }
.final-band { background: linear-gradient(90deg, rgba(255,246,200,0.96), rgba(199,247,212,0.84), rgba(114,255,210,0.18)); }
.specimen-door { display: inline-flex; margin-top: 1.4rem; padding: 0.85rem 1.1rem; border-radius: 999px; background: var(--moss); color: var(--mint); text-decoration: none; font-family: var(--mono); box-shadow: 0 0 28px rgba(114,255,210,0.28); }

.glitch-title { position: relative; }
.glitch-title::before,
.glitch-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.glitch-title::before { color: var(--mint); transform: translateX(-8px); }
.glitch-title::after { color: var(--orchid); transform: translateX(10px); }
.is-glitching .glitch-title::before,
.is-glitching .glitch-title::after { opacity: 0.62; animation: glitchSettle 520ms steps(3, end) both; }

@keyframes glitchSettle {
  0% { clip-path: inset(0 0 72% 0); }
  35% { clip-path: inset(42% 0 35% 0); }
  70% { clip-path: inset(76% 0 2% 0); }
  100% { opacity: 0; clip-path: inset(0 0 0 0); }
}

@media (max-width: 900px) {
  .root-spine { left: 12px; width: 52px; }
  .node-label { display: none; }
  .spine-node.active::after { width: 26px; }
  .theory-chamber { padding-left: 82px; padding-right: 16px; }
  .chamber-shell { border-radius: 42px; min-height: 78vh; }
  .middle-band { width: 100%; }
  .air-pocket, .graft-window, .proof-rings { position: relative; right: auto; top: auto; bottom: auto; margin: 2rem 0 0 auto; width: min(300px, 100%); }
  .top-band, .text-band { border-radius: 38px; }
}