:root {
  --imperial-void: #070814;
  --observatory-indigo: #14133A;
  --royal-ultramarine: #25206B;
  --orchid-plasma: #B85CFF;
  --bioluminescent-cyan: #49F2D2;
  --botanical-emerald: #0F6B4F;
  --antique-gold: #D6B15A;
  --moonlit-vellum: #F4EBD2;
  --display: "Cormorant Garamond", serif;
  --body: "Source Serif 4", serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--moonlit-vellum);
  background: var(--imperial-void);
  font-family: var(--body);
  overflow-x: hidden;
}

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 82% 14%, rgba(184, 92, 255, 0.28), transparent 32%),
    radial-gradient(circle at 8% 92%, rgba(15, 107, 79, 0.45), transparent 35%),
    radial-gradient(circle at 72% 88%, rgba(73, 242, 210, 0.16), transparent 25%),
    linear-gradient(135deg, #070814 0%, #14133A 38%, #25206B 62%, #0F6B4F 100%);
}

.grain {
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(244, 235, 210, .12) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(115deg, rgba(214, 177, 90, .06) 0 1px, transparent 1px 9px);
  mix-blend-mode: screen;
}

.spectral-bloom {
  position: absolute;
  width: 22vw;
  height: 22vw;
  border-radius: 50%;
  filter: blur(34px);
  opacity: .33;
  animation: drift 18s ease-in-out infinite alternate;
}

.bloom-one { left: 12%; top: 18%; background: #49F2D2; }
.bloom-two { right: 12%; top: 44%; background: #B85CFF; animation-duration: 23s; }
.bloom-three { left: 48%; bottom: 8%; background: #0F6B4F; animation-duration: 28s; }

.scroll-gauge {
  position: fixed;
  top: 3vh;
  right: 2.2vw;
  width: 2px;
  height: 28vh;
  z-index: 12;
  background: rgba(244, 235, 210, .13);
  box-shadow: 0 0 0 1px rgba(214,177,90,.22);
}

.scroll-gauge span {
  display: block;
  width: 100%;
  height: 0%;
  background: linear-gradient(#D6B15A, #49F2D2, #B85CFF);
  box-shadow: 0 0 16px rgba(73,242,210,.8);
}

.palace { position: relative; }

.chamber {
  position: relative;
  min-height: 100vh;
  display: grid;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid rgba(214, 177, 90, .32);
  border-bottom: 1px solid rgba(214, 177, 90, .22);
}

.chamber::before,
.chamber::after {
  content: "";
  position: absolute;
  inset: 4vh 3vw;
  border: 1px solid rgba(214, 177, 90, .18);
  border-radius: 46% 46% 2rem 2rem / 12% 12% 2rem 2rem;
  pointer-events: none;
  transition: transform 1.2s ease, border-color 1.2s ease, opacity 1.2s ease;
}

.chamber::after {
  inset: 8vh 6vw;
  border-color: rgba(73, 242, 210, .09);
  transform: translateY(18px);
}

.chamber.is-visible::before { border-color: rgba(214, 177, 90, .52); transform: translateY(-4px); }
.chamber.is-visible::after { opacity: .8; transform: translateY(0); }

.chamber-seam {
  position: absolute;
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, transparent, #D6B15A, #49F2D2, #D6B15A, transparent);
  opacity: .42;
  filter: blur(.2px);
}
.seam-top { top: 0; }
.seam-bottom { bottom: 0; }

.mono-plate,
.annotation,
.specimen-label span,
.hero-coordinate {
  font-family: var(--mono);
  font-size: clamp(.62rem, .86vw, .78rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244, 235, 210, .72);
}

.hero-chamber { min-height: 112vh; place-items: center; }

.hero-grid {
  position: relative;
  width: min(1480px, 94vw);
  min-height: 92vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 1fr);
  align-items: center;
}

.hero-coordinate { grid-column: 2 / 6; grid-row: 1; align-self: end; color: #D6B15A; }

.dome-lottie {
  grid-column: 3 / 11;
  grid-row: 1 / 9;
  place-self: center;
  width: min(78vw, 820px);
  aspect-ratio: 1;
  filter: drop-shadow(0 0 54px rgba(184,92,255,.23));
}

.dome-svg { width: 100%; height: 100%; }
.ring-set { animation: rotateRings 32s linear infinite; transform-origin: 310px 310px; }
.ring-set ellipse,
.dome-ribs path,
.royal-wave,
.astrolabe *,
.orchid-orbits ellipse { fill: none; stroke: #D6B15A; stroke-width: 1.35; vector-effect: non-scaling-stroke; }
.dome-ribs path { stroke: rgba(214,177,90,.45); }
.royal-wave { stroke: #49F2D2; stroke-width: 2; filter: drop-shadow(0 0 10px rgba(73,242,210,.7)); }
.star-crowns circle { fill: #F4EBD2; filter: drop-shadow(0 0 8px #D6B15A); }

.hero-medallion {
  position: relative;
  grid-column: 4 / 10;
  grid-row: 3 / 7;
  min-height: 420px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: clamp(2rem, 5vw, 5rem);
  border: 1px solid rgba(214,177,90,.68);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(7,8,20,.82), rgba(20,19,58,.48) 52%, rgba(15,107,79,.16));
  box-shadow: inset 0 0 70px rgba(214,177,90,.08), 0 0 88px rgba(73,242,210,.15);
}

.medallion-ring {
  position: absolute;
  inset: -22px;
  border: 1px solid rgba(214,177,90,.5);
  border-radius: 50%;
  border-left-color: rgba(73,242,210,.6);
  border-right-color: rgba(184,92,255,.65);
  animation: spin 46s linear infinite;
}
.medallion-ring.inner { inset: 24px; animation-duration: 34s; animation-direction: reverse; }

.eyebrow { margin: 0 0 1rem; font-family: var(--mono); letter-spacing: .22em; text-transform: uppercase; font-size: .72rem; color: #D6B15A; }
h1, h2 { font-family: var(--display); font-weight: 600; line-height: .92; margin: 0; }
h1 { font-size: clamp(4.3rem, 11vw, 12.5rem); letter-spacing: -.06em; text-shadow: 0 0 30px rgba(184,92,255,.35); }
h2 { font-size: clamp(3rem, 7vw, 8.5rem); letter-spacing: -.035em; }
.hero-copy { max-width: 620px; margin: 1.4rem auto 0; font-size: clamp(1.08rem, 1.7vw, 1.52rem); color: rgba(244,235,210,.76); }
.marginal-note { position: absolute; max-width: 230px; color: rgba(244,235,210,.6); font-style: italic; font-size: 1rem; }
.note-left { left: 1%; bottom: 16%; }
.note-right { right: 1%; top: 20%; }

.section-number {
  position: absolute;
  left: 4vw;
  top: 5vh;
  z-index: -1;
  font-family: var(--display);
  font-size: clamp(8rem, 22vw, 22rem);
  color: rgba(214,177,90,.08);
  line-height: .75;
}

.vault-chamber {
  padding: 10vh 5vw;
  grid-template-rows: auto 1fr;
  gap: 4vh;
  background: linear-gradient(180deg, rgba(7,8,20,.2), rgba(20,19,58,.54));
}
.plaque { display: grid; grid-template-columns: 2fr 7fr; gap: 4vw; align-items: end; z-index: 2; }
.plaque h2 { max-width: 920px; }
.lancet-grid { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: clamp(1rem, 3vw, 3rem); align-items: center; z-index: 2; }
.lancet {
  min-height: 72vh;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  padding: 2rem;
  border: 1px solid rgba(214,177,90,.34);
  border-radius: 52% 52% 1.6rem 1.6rem / 10% 10% 1.6rem 1.6rem;
  background: linear-gradient(180deg, rgba(244,235,210,.04), rgba(73,242,210,.04));
  box-shadow: inset 0 0 48px rgba(184,92,255,.07);
  transform: translateY(42px);
  transition: transform 1.3s ease, box-shadow 1.3s ease;
}
.is-visible .lancet { transform: translateY(0); }
.is-visible .lancet:nth-child(2) { transition-delay: .18s; }
.is-visible .lancet:nth-child(3) { transition-delay: .34s; }
.lancet-tall { min-height: 80vh; }
.botanical-plate { width: min(100%, 310px); height: 100%; overflow: visible; }
.glass { fill: rgba(73,242,210,.035); stroke: rgba(244,235,210,.22); stroke-width: 1; }
.stem, .leaf, .fern, .root, .equation-wave, .final-root { fill: rgba(73,242,210,.08); stroke: #D6B15A; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.leaf, .fern { fill: rgba(73,242,210,.14); }
.root, .equation-wave { stroke: #49F2D2; fill: none; }
.orbit { fill: none; stroke: #B85CFF; stroke-width: 1.5; }
.pod { fill: rgba(184,92,255,.24); stroke: #D6B15A; stroke-width: 1.5; }
.specimen-label { width: 100%; border-top: 1px solid rgba(214,177,90,.35); padding-top: 1rem; }
.specimen-label b { display: block; font-family: var(--display); font-size: 2rem; font-weight: 600; color: #F4EBD2; }
.specimen-label span { display: block; margin-top: .25rem; color: rgba(73,242,210,.8); }

.canal-chamber {
  min-height: 105vh;
  padding: 12vh 5vw;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr auto 1fr;
  background: radial-gradient(circle at 50% 52%, rgba(73,242,210,.12), transparent 35%);
}
.canal-copy { grid-column: 2 / 8; grid-row: 1; align-self: end; z-index: 2; }
.wave-canal { grid-column: 1 / 13; grid-row: 2; height: 38vh; z-index: 1; }
.wave-canal svg { width: 100%; height: 100%; overflow: visible; }
.canal-ribbon { fill: none; stroke: #D6B15A; stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 16px rgba(214,177,90,.55)); }
.canal-ribbon.secondary { stroke: #49F2D2; stroke-width: 2; opacity: .82; transform: translateY(-35px); }
.canal-root { fill: none; stroke: #B85CFF; stroke-width: 2.2; stroke-linecap: round; }
.annotation { position: absolute; padding: .7rem .9rem; border: 1px solid rgba(214,177,90,.38); background: rgba(7,8,20,.68); color: #F4EBD2; }
.a1 { left: 8%; bottom: 18%; }
.a2 { right: 9%; top: 24%; }
.a3 { left: 48%; bottom: 10%; }

.archive-chamber {
  min-height: 110vh;
  padding: 12vh 6vw;
  place-items: center;
  background: linear-gradient(145deg, rgba(37,32,107,.44), rgba(7,8,20,.2) 54%, rgba(15,107,79,.22));
}
.archive-stack { position: relative; width: min(1180px, 88vw); height: 76vh; perspective: 1200px; }
.slab {
  position: absolute;
  border: 1px solid rgba(214,177,90,.42);
  background: linear-gradient(145deg, rgba(244,235,210,.075), rgba(73,242,210,.035));
  box-shadow: 0 36px 90px rgba(0,0,0,.32), inset 0 0 44px rgba(184,92,255,.07);
  backdrop-filter: blur(10px);
  transition: transform 1.4s ease, opacity 1.2s ease;
}
.slab-one { inset: 0 8% 28% 0; padding: 4rem; transform: translate3d(-70px, 30px, 0) rotateX(7deg); }
.slab-two { inset: 30% 0 14% 20%; padding: 3rem; transform: translate3d(80px, 45px, 0) rotateX(10deg); }
.slab-three { inset: 48% 42% 0 7%; padding: 1.5rem; display: grid; grid-template-columns: 1fr 1fr; align-items: center; transform: translate3d(-50px, 70px, 0) rotateX(12deg); }
.is-visible .slab-one { transform: translate3d(0,0,0) rotateX(0deg); }
.is-visible .slab-two { transform: translate3d(0,0,0) rotateX(0deg); transition-delay: .12s; }
.is-visible .slab-three { transform: translate3d(0,0,0) rotateX(0deg); transition-delay: .24s; }
.slab p { font-size: clamp(1.4rem, 2.4vw, 2.35rem); max-width: 640px; }
.table-lines { display: grid; gap: 1rem; margin-top: 2rem; }
.table-lines i { height: 1px; background: linear-gradient(90deg, #D6B15A, transparent); }
.astrolabe { width: min(26vw, 260px); animation: spin 38s linear infinite; }
.astrolabe circle, .astrolabe ellipse, .astrolabe path { stroke: #D6B15A; fill: none; stroke-width: 1.7; }
.astrolabe circle:last-child { fill: #49F2D2; stroke: #F4EBD2; }
.slab-three span { font-style: italic; color: rgba(244,235,210,.72); }

.conservatory-chamber {
  min-height: 112vh;
  padding: 10vh 6vw;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  background:
    radial-gradient(circle at 50% 44%, rgba(184,92,255,.2), transparent 34%),
    radial-gradient(circle at 50% 80%, rgba(15,107,79,.46), transparent 42%);
}
.orchid-lottie { grid-column: 1 / 8; width: min(760px, 58vw); justify-self: center; filter: drop-shadow(0 0 44px rgba(184,92,255,.28)); }
.orchid-lottie svg { width: 100%; overflow: visible; }
.orchid-petals path { fill: rgba(184,92,255,.14); stroke: #D6B15A; stroke-width: 1.5; transform-origin: 280px 280px; transition: transform 1.6s cubic-bezier(.2,.8,.1,1), fill 1.6s ease; }
.is-visible .orchid-petals path:nth-child(1) { transform: scale(1.08) translateY(-12px); fill: rgba(184,92,255,.26); }
.is-visible .orchid-petals path:nth-child(2) { transform: rotate(-8deg) translate(-12px,-4px); }
.is-visible .orchid-petals path:nth-child(3) { transform: rotate(8deg) translate(12px,-4px); }
.is-visible .orchid-petals path:nth-child(4) { transform: rotate(10deg) translate(-7px,12px); fill: rgba(73,242,210,.12); }
.is-visible .orchid-petals path:nth-child(5) { transform: rotate(-10deg) translate(7px,12px); fill: rgba(73,242,210,.12); }
.orchid-orbits { animation: rotateRings 26s linear infinite; transform-origin: 280px 280px; }
.orchid-orbits ellipse { stroke: rgba(73,242,210,.75); }
.orchid-lottie circle { fill: #D6B15A; filter: drop-shadow(0 0 16px #D6B15A); }
.final-plaque { grid-column: 7 / 13; padding: clamp(2rem,4vw,4rem); border-left: 1px solid rgba(214,177,90,.48); background: linear-gradient(90deg, rgba(7,8,20,.66), rgba(20,19,58,.22)); }
.final-plaque p { font-size: clamp(1.1rem, 1.65vw, 1.45rem); line-height: 1.65; color: rgba(244,235,210,.74); max-width: 650px; }

.draw-path { stroke-dasharray: var(--path-length, 900); stroke-dashoffset: var(--path-length, 900); transition: stroke-dashoffset 2.4s ease; }
.is-visible .draw-path { stroke-dashoffset: 0; }

@keyframes rotateRings { to { transform: rotate(360deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { from { transform: translate3d(-2vw, -1vh, 0) scale(.95); } to { transform: translate3d(2vw, 3vh, 0) scale(1.08); } }

@media (max-width: 900px) {
  .hero-medallion { grid-column: 2 / 12; min-height: 360px; }
  .dome-lottie { grid-column: 1 / 13; width: 115vw; }
  .marginal-note { display: none; }
  .plaque, .lancet-grid, .conservatory-chamber { grid-template-columns: 1fr; }
  .lancet-grid { gap: 1rem; }
  .lancet, .lancet-tall { min-height: 62vh; }
  .canal-copy { grid-column: 1 / 13; }
  .annotation { position: relative; inset: auto; margin: .6rem; align-self: end; }
  .archive-stack { height: 96vh; width: 94vw; }
  .slab-one, .slab-two, .slab-three { inset: auto; position: relative; margin-bottom: 1rem; transform: none; }
  .slab-three { grid-template-columns: 1fr; }
  .orchid-lottie, .final-plaque { grid-column: 1 / -1; width: 90vw; }
  .final-plaque { border-left: 0; border-top: 1px solid rgba(214,177,90,.48); }
}