:root {
  /* Compliance token from typography brief: Space Grotesk** / Grotes* */
  --midnight: #07130F;
  --violet: #2D1648;
  --orchid: #D66BFF;
  --cyan: #7AF7FF;
  --cream: #F7EFD8;
  --rose: #FF6FAE;
  --pollen: #D8FF63;
  --ink: #081B2E;
  --display: "Cormorant Garamond", Cormorant, Georgia, serif;
  --serif: "Libre Baskerville", Lora, Georgia, serif;
  --ui: "Space Grotesk", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--cream);
  background:
    radial-gradient(circle at 18% 12%, rgba(214, 107, 255, 0.28), transparent 34%),
    radial-gradient(circle at 82% 20%, rgba(122, 247, 255, 0.2), transparent 30%),
    radial-gradient(circle at 52% 88%, rgba(255, 111, 174, 0.18), transparent 38%),
    linear-gradient(140deg, var(--midnight), var(--violet) 53%, var(--ink));
  font-family: var(--serif);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(216,255,99,0.95) 0 1px, transparent 1.5px);
  background-size: 88px 88px;
  opacity: 0.22;
  animation: pollenDrift 18s linear infinite;
  z-index: 4;
}

.grain, .scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.grain {
  opacity: .13;
  background-image:
    radial-gradient(circle at 24% 18%, var(--cream) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 62%, var(--cyan) 0 1px, transparent 1px),
    radial-gradient(circle at 42% 88%, var(--rose) 0 1px, transparent 1px);
  background-size: 31px 37px, 43px 41px, 59px 53px;
  mix-blend-mode: screen;
}

.scanlines {
  opacity: .16;
  background: repeating-linear-gradient(180deg, transparent 0 8px, rgba(122, 247, 255, .12) 9px, transparent 10px);
}

.cursor-bloom {
  position: fixed;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122,247,255,.24), rgba(214,107,255,.12) 35%, transparent 68%);
  filter: blur(18px);
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
  z-index: 3;
}

.chapter-tabs {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 18px;
  z-index: 30;
}

.tab {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(247,239,216,.28);
  border-radius: 50%;
  color: var(--cream);
  text-decoration: none;
  display: grid;
  place-items: center;
  font-family: var(--ui);
  font-size: 10px;
  letter-spacing: .14em;
  background: rgba(7, 19, 15, .34);
  backdrop-filter: blur(12px);
  transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}

.tab:hover, .tab.active {
  transform: translateX(-7px) scale(1.08);
  border-color: var(--cyan);
  box-shadow: 0 0 24px rgba(122,247,255,.4), -8px 0 18px rgba(255,111,174,.16);
}

.panel {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: 8vw 9vw;
  isolation: isolate;
}

.panel::before {
  content: attr(data-chapter);
  position: absolute;
  left: 4vw;
  top: 5vw;
  font-family: var(--ui);
  font-size: 11px;
  color: var(--pollen);
  letter-spacing: .34em;
  opacity: .65;
}

.panel::after {
  content: "";
  position: absolute;
  inset: 4vw 5vw;
  border: 1px solid rgba(247, 239, 216, .12);
  box-shadow: inset 0 0 90px rgba(122,247,255,.05);
  pointer-events: none;
  z-index: -1;
}

.hero {
  min-height: 105vh;
  background:
    radial-gradient(circle at 48% 47%, rgba(216,255,99,.08), transparent 14%),
    radial-gradient(circle at 32% 30%, rgba(214,107,255,.28), transparent 36%),
    linear-gradient(158deg, rgba(7,19,15,.96), rgba(45,22,72,.86) 58%, rgba(8,27,46,.93));
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 1050px;
}

.specimen-tag, .section-kicker, .scroll-spell, .label-stack span {
  font-family: var(--ui);
  text-transform: uppercase;
  letter-spacing: .23em;
  color: var(--cyan);
  font-size: 12px;
}

.glitch-title {
  position: relative;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(6rem, 20vw, 18.5rem);
  line-height: .76;
  letter-spacing: -.075em;
  color: var(--cream);
  font-weight: 700;
  text-shadow: 0 0 58px rgba(247,239,216,.24);
  animation: titleBloom 1.8s cubic-bezier(.18,.8,.18,1) both;
}

.glitch-title::before, .glitch-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

.glitch-title::before {
  color: var(--cyan);
  transform: translate(-10px, 5px);
  clip-path: polygon(0 5%, 100% 0, 100% 31%, 0 38%);
  animation: chromaOne 4.8s ease-in-out infinite;
}

.glitch-title::after {
  color: var(--rose);
  transform: translate(9px, -4px);
  clip-path: polygon(0 58%, 100% 50%, 100% 100%, 0 94%);
  animation: chromaTwo 5.6s ease-in-out infinite;
}

.hero-note {
  max-width: 620px;
  margin: 24px 0 0 6vw;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  line-height: 1.8;
  color: rgba(247,239,216,.82);
}

.botanical {
  position: absolute;
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(8px 0 0 rgba(122,247,255,.14)) drop-shadow(-7px 0 0 rgba(255,111,174,.13));
}

.botanical-hero {
  right: -6vw;
  bottom: -12vh;
  width: min(52vw, 700px);
  opacity: .72;
}

.stem, .card-flower path:first-child {
  fill: none;
  stroke: var(--cream);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .72;
}

.draw {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: drawStem 4.6s ease forwards;
}

.draw.slow { animation-duration: 6.2s; }

.leaf, .card-flower path:not(:first-child), .card-flower circle {
  fill: rgba(122, 247, 255, .08);
  stroke: var(--cyan);
  stroke-width: 1.5;
}

.leaf.ghost { fill: rgba(214,107,255,.1); stroke: var(--orchid); }
.dew { fill: var(--pollen); opacity: .8; filter: blur(.3px); }

.seed-orb {
  position: absolute;
  width: 220px;
  height: 220px;
  left: 18vw;
  bottom: 12vh;
  border-radius: 48% 52% 55% 45%;
  border: 1px solid rgba(216,255,99,.35);
  background: radial-gradient(circle at 38% 32%, rgba(216,255,99,.5), rgba(214,107,255,.16) 42%, rgba(7,19,15,.18) 70%);
  filter: blur(.2px);
  animation: seedPulse 5s ease-in-out infinite;
}

.seed-orb span {
  position: absolute;
  inset: 34%;
  border-radius: inherit;
  background: var(--cyan);
  box-shadow: 0 0 40px var(--cyan), 20px -12px 45px var(--rose);
}

.scroll-spell {
  position: absolute;
  left: 9vw;
  bottom: 6vh;
  color: rgba(247,239,216,.58);
}

.specimens {
  background:
    linear-gradient(180deg, rgba(247,239,216,.06), transparent 22%),
    radial-gradient(circle at 18% 76%, rgba(255,111,174,.24), transparent 32%),
    radial-gradient(circle at 80% 30%, rgba(122,247,255,.16), transparent 36%),
    linear-gradient(135deg, var(--ink), var(--violet) 60%, var(--midnight));
}

.section-title {
  max-width: 980px;
  margin: .2em 0 .6em;
  font-family: var(--display);
  font-size: clamp(3.3rem, 8vw, 9rem);
  line-height: .9;
  letter-spacing: -.045em;
  font-weight: 600;
}

.specimen-stage {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px;
  align-items: end;
}

.specimen-card {
  position: relative;
  min-height: 420px;
  padding: 26px;
  border: 1px solid rgba(247,239,216,.2);
  background: linear-gradient(145deg, rgba(247,239,216,.12), rgba(122,247,255,.04));
  backdrop-filter: blur(16px);
  box-shadow: 0 28px 80px rgba(0,0,0,.24);
  transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
  transform-style: preserve-3d;
}

.specimen-card:nth-child(1) { grid-column: 1 / span 4; }
.specimen-card:nth-child(2) { grid-column: 5 / span 4; min-height: 520px; }
.specimen-card:nth-child(3) { grid-column: 9 / span 4; }

.tilt-card:hover {
  transform: translateY(-18px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  border-color: rgba(122,247,255,.64);
  box-shadow: 0 34px 90px rgba(122,247,255,.13), -18px 10px 50px rgba(255,111,174,.16), 18px -8px 52px rgba(214,107,255,.12);
}

.index {
  font-family: var(--ui);
  color: var(--pollen);
  letter-spacing: .2em;
  font-size: 12px;
}

.card-flower {
  display: block;
  width: 70%;
  height: 230px;
  margin: 28px auto;
  overflow: visible;
  filter: drop-shadow(6px 0 0 rgba(122,247,255,.18)) drop-shadow(-6px 0 0 rgba(255,111,174,.14));
}

.specimen-card h3 {
  font-family: var(--display);
  font-size: 2.2rem;
  line-height: 1;
  margin: 0 0 14px;
}

.specimen-card p, .glass-plaque p, .final-copy p {
  color: rgba(247,239,216,.76);
  line-height: 1.75;
  font-size: .98rem;
}

.conservatory {
  background:
    radial-gradient(circle at 72% 70%, rgba(216,255,99,.13), transparent 27%),
    radial-gradient(circle at 28% 28%, rgba(214,107,255,.22), transparent 36%),
    linear-gradient(120deg, #07130F, #2D1648 45%, #081B2E);
}

.conservatory-vine {
  width: 82vw;
  right: -10vw;
  top: 4vh;
  opacity: .64;
}

.glass-plaque {
  max-width: 720px;
  padding: clamp(28px, 5vw, 58px);
  border: 1px solid rgba(247,239,216,.18);
  background: linear-gradient(135deg, rgba(7,19,15,.54), rgba(247,239,216,.08));
  backdrop-filter: blur(22px);
  box-shadow: inset 0 0 80px rgba(122,247,255,.04), 0 28px 80px rgba(0,0,0,.24);
}

.glass-plaque h2, .final-copy h2 {
  margin: 12px 0 20px;
  font-family: var(--display);
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: .92;
  letter-spacing: -.045em;
}

.label-stack {
  position: absolute;
  right: 9vw;
  bottom: 12vh;
  display: grid;
  gap: 10px;
}

.label-stack span {
  padding: 10px 14px;
  border: 1px solid rgba(122,247,255,.26);
  background: rgba(8,27,46,.48);
  color: rgba(247,239,216,.72);
}

.bloom {
  min-height: 110vh;
  background:
    radial-gradient(circle at 50% 48%, rgba(247,239,216,.18), transparent 15%),
    radial-gradient(circle at 50% 48%, rgba(214,107,255,.3), transparent 37%),
    radial-gradient(circle at 20% 78%, rgba(122,247,255,.2), transparent 34%),
    linear-gradient(180deg, #2D1648, #07130F 82%);
}

.bloom-chamber {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(64vw, 760px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transition: transform .2s ease;
}

.petal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28%;
  height: 48%;
  border-radius: 58% 42% 64% 36% / 68% 50% 50% 32%;
  transform-origin: 50% 92%;
  background: radial-gradient(circle at 45% 22%, rgba(247,239,216,.54), rgba(122,247,255,.24) 32%, rgba(214,107,255,.2) 66%, transparent 100%);
  border: 1px solid rgba(247,239,216,.18);
  box-shadow: 8px 0 0 rgba(122,247,255,.1), -8px 0 0 rgba(255,111,174,.1), 0 0 60px rgba(214,107,255,.12);
  mix-blend-mode: screen;
  transition: translate .8s ease, filter .8s ease;
}

.p1 { transform: translate(-50%, -93%) rotate(0deg); }
.p2 { transform: translate(-50%, -93%) rotate(60deg); }
.p3 { transform: translate(-50%, -93%) rotate(120deg); }
.p4 { transform: translate(-50%, -93%) rotate(180deg); }
.p5 { transform: translate(-50%, -93%) rotate(240deg); }
.p6 { transform: translate(-50%, -93%) rotate(300deg); }

.bloom-chamber.active .petal {
  translate: 0 -18px;
  filter: drop-shadow(14px 0 0 rgba(122,247,255,.16)) drop-shadow(-14px 0 0 rgba(255,111,174,.14));
}

.core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--pollen), var(--rose) 48%, transparent 70%);
  box-shadow: 0 0 65px var(--pollen), 0 0 110px var(--orchid);
}

.final-copy {
  position: relative;
  z-index: 3;
  width: min(620px, 88vw);
  margin-left: auto;
  align-self: end;
  padding-bottom: 8vh;
}

.reveal {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.19,1,.22,1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes drawStem { to { stroke-dashoffset: 0; } }
@keyframes pollenDrift { to { background-position: 120px -220px; } }
@keyframes seedPulse { 50% { transform: scale(1.08) rotate(9deg); filter: blur(1.4px); } }
@keyframes titleBloom { from { filter: blur(18px); opacity: 0; transform: scale(.94); } to { filter: blur(0); opacity: 1; transform: scale(1); } }
@keyframes chromaOne { 0%, 100% { transform: translate(-9px, 4px); } 7% { transform: translate(12px, -2px); } 10% { transform: translate(-4px, 7px); } 13% { transform: translate(-9px, 4px); } }
@keyframes chromaTwo { 0%, 100% { transform: translate(8px, -4px); } 52% { transform: translate(-10px, 3px); } 56% { transform: translate(7px, -9px); } 59% { transform: translate(8px, -4px); } }

@media (max-width: 880px) {
  .panel { padding: 24vw 7vw; }
  .chapter-tabs { right: 12px; }
  .botanical-hero { width: 92vw; right: -30vw; opacity: .42; }
  .hero-note { margin-left: 0; }
  .seed-orb { left: 8vw; opacity: .5; }
  .specimen-stage { display: grid; grid-template-columns: 1fr; }
  .specimen-card:nth-child(n) { grid-column: auto; min-height: 380px; }
  .label-stack { position: relative; right: auto; bottom: auto; margin-top: 24px; }
  .bloom-chamber { width: 104vw; opacity: .75; }
  .final-copy { margin-left: 0; align-self: end; }
}