:root {
  /* Design typography trace: Inter** crisp readability plaques small inscriptions. */
  --palace: #090014;
  --orchid: #2A064F;
  --cyan: #00F5FF;
  --leaf: #78FF4D;
  --magenta: #FF2EC4;
  --mist: #F3EDFF;
  --gold: #FFD166;
  --display: Jost, Poppins, "Avenir Next", Futura, "Century Gothic", sans-serif;
  --label: "League Spartan", Poppins, "Avenir Next", Futura, sans-serif;
  --body: Inter, "SF Pro Text", "Segoe UI", Arial, sans-serif;
  --scroll: 0;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--palace);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--mist);
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 46, 196, .23), transparent 34vw),
    radial-gradient(circle at 78% 12%, rgba(0, 245, 255, .18), transparent 38vw),
    linear-gradient(145deg, var(--palace) 0%, #100024 42%, var(--orchid) 100%);
  font-family: var(--body);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

body::before {
  background-image:
    radial-gradient(circle at 10% 20%, rgba(243, 237, 255, .22) 0 1px, transparent 1.8px),
    radial-gradient(circle at 70% 60%, rgba(120, 255, 77, .18) 0 1px, transparent 1.7px),
    radial-gradient(circle at 35% 85%, rgba(255, 46, 196, .16) 0 1px, transparent 1.9px);
  background-size: 17px 19px, 23px 29px, 31px 37px;
  mix-blend-mode: screen;
  opacity: .28;
}

body::after {
  background: linear-gradient(90deg, rgba(9, 0, 20, .68), transparent 20%, transparent 78%, rgba(9, 0, 20, .78));
}

button {
  font: inherit;
}

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

.grain {
  position: absolute;
  inset: -20%;
  background:
    repeating-radial-gradient(circle at 17% 31%, rgba(243, 237, 255, .09) 0 1px, transparent 1px 4px),
    repeating-radial-gradient(circle at 77% 11%, rgba(42, 6, 79, .4) 0 1px, transparent 1px 5px);
  filter: contrast(170%);
  opacity: .38;
  transform: translate3d(calc(var(--scroll) * -10px), calc(var(--scroll) * -18px), 0);
}

.halo {
  position: absolute;
  width: 58vw;
  height: 58vw;
  border-radius: 50%;
  filter: blur(30px);
  opacity: .32;
}

.halo-cyan {
  right: -18vw;
  top: 4vh;
  background: radial-gradient(circle, rgba(0, 245, 255, .55), transparent 64%);
  transform: translateY(calc(var(--scroll) * 24px));
}

.halo-magenta {
  left: -22vw;
  bottom: -13vw;
  background: radial-gradient(circle, rgba(255, 46, 196, .45), transparent 67%);
  transform: translateY(calc(var(--scroll) * -30px));
}

.pollen-field span {
  position: fixed;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px var(--gold), 0 0 24px rgba(255, 209, 102, .42);
  opacity: .7;
  transform: translate3d(var(--x), var(--y), 0) scale(var(--s));
  animation: pollenDrift var(--d) linear infinite;
}

@keyframes pollenDrift {
  0% { margin-top: 0; margin-left: 0; opacity: .12; }
  35% { opacity: .75; }
  100% { margin-top: -18vh; margin-left: 8vw; opacity: .08; }
}

.chapter-nav {
  position: fixed;
  top: 50%;
  left: 28px;
  width: 52px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  gap: 18px;
  z-index: 10;
}

.nav-label {
  position: absolute;
  left: -74px;
  top: -92px;
  width: 190px;
  transform: rotate(-90deg);
  color: rgba(243, 237, 255, .58);
  font: 700 10px/1 var(--label);
  letter-spacing: .24em;
  text-transform: uppercase;
}

.chapter-dot {
  position: relative;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(243, 237, 255, .25);
  border-radius: 55% 45% 60% 40%;
  color: var(--mist);
  background: rgba(9, 0, 20, .28);
  cursor: pointer;
  transform: rotate(-18deg);
  transition: border-color .4s, box-shadow .4s, background .4s;
}

.chapter-dot span {
  display: block;
  transform: rotate(18deg);
  font: 700 10px var(--label);
  letter-spacing: .08em;
}

.chapter-dot.active {
  border-color: var(--leaf);
  background: rgba(120, 255, 77, .12);
  box-shadow: 0 0 18px rgba(120, 255, 77, .65), inset 0 0 18px rgba(0, 245, 255, .18);
}

.progress-vine {
  position: absolute;
  top: 58px;
  bottom: 58px;
  left: 50%;
  width: 1px;
  z-index: -1;
  background: linear-gradient(to bottom, var(--leaf) calc(var(--scroll) * 100%), rgba(243, 237, 255, .16) 0);
  box-shadow: 0 0 14px rgba(120, 255, 77, .6);
}

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

.chamber::before {
  content: attr(data-chapter);
  position: absolute;
  right: 5vw;
  top: 7vh;
  color: rgba(243, 237, 255, .08);
  font: 800 clamp(6rem, 16vw, 18rem)/1 var(--display);
  letter-spacing: -.08em;
  z-index: -1;
}

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

.cyan-sweep {
  position: absolute;
  inset: -15% auto -15% -40%;
  width: 38vw;
  background: linear-gradient(90deg, transparent, rgba(0, 245, 255, .74), rgba(243, 237, 255, .72), transparent);
  filter: blur(20px);
  transform: skewX(-18deg) translateX(calc(-26vw + var(--scroll) * 120vw));
  opacity: .72;
  z-index: 3;
  mix-blend-mode: screen;
}

.hero-inscription {
  position: relative;
  z-index: 4;
  max-width: 92vw;
  transform: rotate(-2.5deg) translateY(calc(var(--scroll) * -38px));
}

.eyebrow,
.plaque-index {
  margin: 0 0 18px;
  color: var(--gold);
  font: 700 12px/1 var(--label);
  letter-spacing: .34em;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 24px;
  color: var(--mist);
  font-family: var(--display);
  font-size: clamp(4.4rem, 16vw, 15.5rem);
  line-height: .78;
  letter-spacing: -.065em;
  text-shadow: 0 0 24px rgba(0, 245, 255, .42), 0 0 64px rgba(255, 46, 196, .35);
}

.lead {
  max-width: 760px;
  color: rgba(243, 237, 255, .82);
  font-size: clamp(1.05rem, 2.1vw, 1.8rem);
  line-height: 1.45;
}

.leaf-orbit {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: rotate(calc(var(--scroll) * 30deg));
}

.leaf-shape {
  position: absolute;
  overflow: visible;
  fill: rgba(120, 255, 77, .09);
  stroke: rgba(120, 255, 77, .62);
  stroke-width: 2;
  filter: drop-shadow(0 0 24px rgba(120, 255, 77, .45));
}

.leaf-shape .leaf-cut {
  fill: none;
  stroke: rgba(0, 245, 255, .62);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 420;
  stroke-dashoffset: calc(420 - var(--scroll) * 520);
}

.leaf-one { width: 29vw; right: 8vw; top: 6vh; transform: rotate(17deg); }
.leaf-two { width: 34vw; left: 7vw; bottom: 10vh; transform: rotate(-24deg); fill: rgba(255, 46, 196, .08); stroke: rgba(255, 46, 196, .48); }
.leaf-three { width: 23vw; right: 27vw; bottom: 4vh; transform: rotate(55deg); fill: rgba(0, 245, 255, .075); stroke: rgba(0, 245, 255, .46); }

.electric-pond {
  position: absolute;
  left: 12vw;
  right: 10vw;
  bottom: 7vh;
  height: 26vh;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 245, 255, .24), rgba(255, 46, 196, .14) 43%, transparent 68%);
  filter: blur(13px);
  transform: perspective(420px) rotateX(72deg);
  z-index: 0;
}

.glassy-plaque {
  width: min(720px, 76vw);
  padding: clamp(28px, 4vw, 58px);
  border: 1px solid rgba(243, 237, 255, .22);
  border-radius: 34px;
  background: linear-gradient(135deg, rgba(243, 237, 255, .12), rgba(42, 6, 79, .34));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .42), inset 0 0 36px rgba(0, 245, 255, .08);
  backdrop-filter: blur(18px);
}

.glassy-plaque h2,
.seal-text h2 {
  margin-bottom: 22px;
  color: var(--mist);
  font: 700 clamp(2.4rem, 6vw, 6.2rem)/.92 var(--display);
  letter-spacing: -.055em;
}

.glassy-plaque p,
.seal-text p {
  margin-bottom: 0;
  color: rgba(243, 237, 255, .76);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.75;
}

.reveal-plaque {
  opacity: 0;
  transform: translateY(70px) scale(.96);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1);
}

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

.canopy-chamber {
  background: radial-gradient(circle at 76% 50%, rgba(120, 255, 77, .12), transparent 35vw);
}

.plaque-left { margin-left: 5vw; }
.plaque-right { justify-self: end; margin-right: 3vw; }
.plaque-center { justify-self: center; text-align: center; }

.monstera {
  position: absolute;
  width: 72vw;
  height: 92vh;
  left: -32vw;
  top: 4vh;
  background:
    radial-gradient(circle at 30% 27%, transparent 0 5%, rgba(120, 255, 77, .08) 5.2% 100%),
    radial-gradient(circle at 42% 47%, transparent 0 7%, rgba(120, 255, 77, .08) 7.2% 100%),
    linear-gradient(135deg, rgba(120, 255, 77, .22), rgba(0, 245, 255, .05));
  clip-path: polygon(50% 0, 62% 16%, 85% 6%, 76% 30%, 100% 42%, 72% 51%, 90% 78%, 61% 66%, 51% 100%, 40% 67%, 9% 82%, 28% 52%, 0 42%, 27% 30%, 15% 5%, 39% 17%);
  filter: drop-shadow(0 0 44px rgba(120, 255, 77, .34));
  transform: translateX(calc(var(--scroll) * 50px)) rotate(-8deg);
}

.vein-map {
  position: absolute;
  inset: 10vh 4vw auto auto;
  width: 64vw;
  max-height: 76vh;
  overflow: visible;
}

.vein-line {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: calc(1200 - var(--scroll) * 1500);
  filter: drop-shadow(0 0 16px rgba(0, 245, 255, .85));
}

.vein-line.secondary {
  stroke: var(--magenta);
  stroke-width: 2;
}

.dew {
  fill: var(--leaf);
  filter: drop-shadow(0 0 14px var(--leaf));
}

.dew.gold { fill: var(--gold); filter: drop-shadow(0 0 14px var(--gold)); }

.table-chamber {
  background: radial-gradient(circle at 45% 50%, rgba(0, 245, 255, .13), transparent 42vw);
}

.solving-table {
  position: absolute;
  left: 4vw;
  top: 50%;
  width: 56vw;
  aspect-ratio: 1;
  transform: translateY(-50%) perspective(900px) rotateX(62deg) rotateZ(calc(-18deg + var(--scroll) * 12deg));
}

.table-ring {
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(255, 209, 102, .48);
  border-radius: 50%;
  box-shadow: 0 0 42px rgba(255, 209, 102, .22), inset 0 0 65px rgba(0, 245, 255, .12);
}

.membrane-piece {
  position: absolute;
  width: 28%;
  height: 34%;
  border: 1px solid rgba(243, 237, 255, .25);
  background: linear-gradient(135deg, rgba(0, 245, 255, .15), rgba(255, 46, 196, .13));
  clip-path: polygon(50% 0, 74% 18%, 100% 45%, 76% 62%, 67% 100%, 36% 82%, 0 78%, 18% 45%, 5% 13%);
  box-shadow: inset 0 0 30px rgba(243, 237, 255, .1), 0 0 26px rgba(0, 245, 255, .22);
  transition: transform .3s linear;
}

.piece-a { left: 22%; top: 12%; transform: translate(calc((1 - var(--scroll)) * -60px), calc((1 - var(--scroll)) * -32px)) rotate(22deg); }
.piece-b { right: 17%; top: 24%; transform: translate(calc((1 - var(--scroll)) * 48px), calc((1 - var(--scroll)) * -50px)) rotate(-34deg); }
.piece-c { left: 31%; bottom: 18%; transform: translate(calc((1 - var(--scroll)) * -42px), calc((1 - var(--scroll)) * 44px)) rotate(65deg); }
.piece-d { right: 31%; bottom: 23%; transform: translate(calc((1 - var(--scroll)) * 70px), calc((1 - var(--scroll)) * 30px)) rotate(12deg); }

.archive-chamber {
  background: radial-gradient(circle at 20% 20%, rgba(255, 209, 102, .12), transparent 28vw), radial-gradient(circle at 80% 75%, rgba(255, 46, 196, .14), transparent 32vw);
}

.archive-garden {
  position: absolute;
  inset: 0;
}

.ginkgo {
  position: absolute;
  width: 40vw;
  height: 38vw;
  opacity: .65;
  filter: drop-shadow(0 0 28px rgba(255, 209, 102, .28));
}

.fan-one { left: -7vw; top: 8vh; transform: rotate(-24deg); }
.fan-two { right: -10vw; bottom: 2vh; transform: rotate(142deg); }

.ginkgo i {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 18%;
  height: 92%;
  transform-origin: 50% 100%;
  border-radius: 100% 100% 8% 8%;
  background: linear-gradient(to top, rgba(255, 209, 102, .02), rgba(255, 209, 102, .16), rgba(120, 255, 77, .1));
  border: 1px solid rgba(255, 209, 102, .22);
}

.ginkgo i:nth-child(1) { transform: rotate(-40deg); }
.ginkgo i:nth-child(2) { transform: rotate(-20deg); }
.ginkgo i:nth-child(3) { transform: rotate(0deg); }
.ginkgo i:nth-child(4) { transform: rotate(20deg); }
.ginkgo i:nth-child(5) { transform: rotate(40deg); }

.gold-pin {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 18px var(--gold), 0 0 60px rgba(255, 209, 102, .36);
}

.gold-pin::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
  width: 26vw;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform-origin: left;
}

.pin-a { left: 24vw; top: 31vh; }
.pin-a::after { transform: rotate(19deg); }
.pin-b { left: 62vw; top: 43vh; }
.pin-b::after { transform: rotate(148deg); }
.pin-c { left: 42vw; bottom: 21vh; }
.pin-c::after { transform: rotate(-35deg); }

.seal-chamber {
  min-height: 112vh;
  place-items: center;
  text-align: center;
  background: radial-gradient(circle at 50% 45%, rgba(120, 255, 77, .16), transparent 30vw), radial-gradient(circle at 50% 62%, rgba(0, 245, 255, .16), transparent 36vw);
}

.organic-crest {
  position: absolute;
  width: min(62vw, 720px);
  aspect-ratio: 1;
  transform: rotate(calc(var(--scroll) * 42deg));
  filter: drop-shadow(0 0 34px rgba(120, 255, 77, .5));
}

.crest-leaf,
.crest-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30%;
  height: 54%;
  transform-origin: 50% 0;
  border: 1px solid rgba(120, 255, 77, .5);
  background: linear-gradient(180deg, rgba(120, 255, 77, .18), rgba(0, 245, 255, .08));
  clip-path: polygon(50% 0, 86% 23%, 74% 66%, 50% 100%, 25% 66%, 14% 23%);
}

.crest-a { transform: translate(-50%, -3%) rotate(0deg); }
.crest-b { transform: translate(-50%, -3%) rotate(90deg); }
.crest-c { transform: translate(-50%, -3%) rotate(180deg); }
.crest-d { transform: translate(-50%, -3%) rotate(270deg); }
.crest-core {
  width: 18%;
  height: 18%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  clip-path: none;
  background: radial-gradient(circle, var(--mist), var(--cyan) 42%, rgba(255, 46, 196, .25) 70%, transparent 72%);
  box-shadow: 0 0 46px var(--cyan), 0 0 90px rgba(255, 46, 196, .44);
}

.seal-text {
  position: relative;
  z-index: 2;
  width: min(820px, 82vw);
}

@media (max-width: 800px) {
  .chapter-nav { left: 12px; transform: translateY(-50%) scale(.82); }
  .chamber { padding-left: 72px; padding-right: 26px; }
  .hero-inscription { transform: rotate(-1deg); }
  .leaf-one { width: 58vw; right: -16vw; }
  .leaf-two { width: 72vw; left: -18vw; }
  .leaf-three { width: 46vw; right: 4vw; bottom: 12vh; }
  .glassy-plaque { width: 100%; }
  .plaque-left, .plaque-right { margin: 0; justify-self: stretch; }
  .solving-table { width: 110vw; left: -34vw; opacity: .72; }
  .vein-map { width: 96vw; right: -20vw; opacity: .7; }
}