:root {
  --night-soil: #120711;
  --parchment: #FFE8B5;
  --orange: #FF6A2A;
  --fuchsia: #FF2E88;
  --acid: #B6FF3B;
  --chlorophyll: #103D25;
  --honey: #FFC83D;
  --violet: #4B1D6B;
  --display: "Fraunces", Georgia, serif;
  --decor: "Climate Crisis", Impact, fantasy;
  --body: "DM Sans", Inter, system-ui, sans-serif;
  --hero-size: clamp(5rem, 19vw, 19rem);
  --mx: 50vw;
  --my: 50vh;
}

* { box-sizing: border-box; }

html {
  height: 100%;
  scroll-snap-type: y mandatory;
  background: var(--night-soil);
}

body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  color: var(--parchment);
  font-family: var(--body);
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255, 200, 61, 0.24), transparent 11rem),
    radial-gradient(circle at 10% 20%, rgba(255, 46, 136, 0.16), transparent 28rem),
    radial-gradient(circle at 80% 15%, rgba(182, 255, 59, 0.11), transparent 20rem),
    linear-gradient(135deg, var(--night-soil), #21091b 48%, #070306);
}

.garden { position: relative; }

.chapter {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  scroll-snap-align: start;
  isolation: isolate;
}

.hero-chapter {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 51% 48%, rgba(255, 232, 181, 0.14), transparent 21rem),
    radial-gradient(circle at 40% 60%, rgba(75, 29, 107, 0.62), transparent 28rem),
    repeating-radial-gradient(circle at 50% 48%, rgba(255, 200, 61, 0.11) 0 2px, transparent 2px 42px);
}

.soil-glow {
  position: absolute;
  inset: 9%;
  border-radius: 48% 52% 44% 56%;
  background: radial-gradient(circle, rgba(255, 106, 42, 0.26), rgba(255, 46, 136, 0.08) 42%, transparent 68%);
  filter: blur(16px);
  animation: soilBreath 7s ease-in-out infinite;
  z-index: -2;
}

.greenhouse-frame {
  position: absolute;
  background: repeating-linear-gradient(90deg, rgba(255,232,181,.34) 0 2px, transparent 2px 25px);
  opacity: .48;
  mix-blend-mode: screen;
}
.frame-top, .frame-bottom { left: 3vw; right: 3vw; height: 13px; border-radius: 999px; }
.frame-top { top: 3vh; }
.frame-bottom { bottom: 3vh; }
.frame-left, .frame-right { top: 5vh; bottom: 5vh; width: 13px; background: repeating-linear-gradient(0deg, rgba(255,232,181,.34) 0 2px, transparent 2px 25px); }
.frame-left { left: 3vw; }
.frame-right { right: 3vw; }

.halo {
  position: absolute;
  left: 50%; top: 50%;
  border: 1px solid rgba(255, 200, 61, .38);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 38px rgba(255, 200, 61, .16);
  animation: haloPulse 4.8s ease-in-out infinite;
}
.halo-one { width: 42vmin; height: 42vmin; }
.halo-two { width: 65vmin; height: 65vmin; animation-delay: -1.6s; border-color: rgba(255, 46, 136, .28); }
.halo-three { width: 86vmin; height: 86vmin; animation-delay: -3.2s; border-color: rgba(182, 255, 59, .20); }

.wordmark-wrap {
  position: relative;
  width: min(94vw, 1500px);
  text-align: center;
  transform: translate(-2vw, -1vh);
  z-index: 5;
}

.wordmark {
  margin: 0;
  color: var(--parchment);
  font-family: var(--display);
  font-size: var(--hero-size);
  font-variation-settings: "opsz" 144, "wght" 900, "SOFT" 80, "WONK" 1;
  letter-spacing: -.085em;
  line-height: .76;
  text-shadow:
    0 0 12px rgba(255, 232, 181, .36),
    0 0 45px rgba(255, 46, 136, .25),
    0 16px 0 rgba(75, 29, 107, .42);
  filter: drop-shadow(0 23px 42px rgba(0,0,0,.45));
}

.seed-dot {
  display: inline-block;
  color: var(--honey);
  text-shadow: 0 0 12px var(--honey), 0 0 42px var(--orange), 0 0 85px var(--fuchsia);
  animation: seedPulse 1.85s ease-in-out infinite;
  transform-origin: center 70%;
}

.label, .vertical-tag, .pane-label {
  font-family: var(--decor);
  color: var(--acid);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.label-north {
  position: absolute;
  top: -5rem;
  left: 17%;
  margin: 0;
  font-size: clamp(.7rem, 1.2vw, 1.5rem);
  transform: rotate(-4deg);
  text-shadow: 0 0 12px rgba(182,255,59,.6);
}

.hero-note {
  position: absolute;
  max-width: 18rem;
  margin: 0;
  padding: .95rem 1rem;
  border: 1px solid rgba(255, 232, 181, .42);
  border-radius: 999px 999px 999px 18px;
  background: rgba(18, 7, 17, .68);
  box-shadow: inset 0 0 24px rgba(255,232,181,.07), 0 0 26px rgba(255,106,42,.18);
  font-size: clamp(.82rem, 1.2vw, 1rem);
  line-height: 1.25;
}
.note-left { left: 4%; bottom: -5.5rem; transform: rotate(6deg); }
.note-right { right: 2%; top: -4.5rem; border-radius: 999px 22px 999px 999px; transform: rotate(-7deg); }

.botanical-layer { position: absolute; inset: 0; pointer-events: none; }
.botanical-layer span { position: absolute; display: block; transition: transform .55s ease, filter .55s ease, opacity .55s ease; }
.garden.pointer-active .botanical-layer span { filter: saturate(1.35) brightness(1.14); }

.petal {
  width: clamp(9rem, 20vw, 24rem);
  height: clamp(12rem, 25vw, 30rem);
  background: radial-gradient(circle at 42% 28%, var(--parchment), var(--fuchsia) 30%, var(--orange) 68%, rgba(255,106,42,.25));
  border-radius: 72% 28% 64% 36% / 65% 36% 64% 35%;
  mix-blend-mode: screen;
  opacity: .88;
  animation: unfurl 1.6s cubic-bezier(.18,.9,.22,1) both, petalFloat 8s ease-in-out infinite;
}
.petal-a { left: -5vw; top: 9vh; transform: rotate(44deg); }
.petal-b { right: -4vw; top: 6vh; transform: rotate(-54deg); animation-delay: .12s, -2s; }
.petal-c { left: 8vw; bottom: -9vh; transform: rotate(118deg); animation-delay: .25s, -4s; }
.petal-d { right: 12vw; bottom: -12vh; transform: rotate(-126deg); animation-delay: .38s, -1s; }

.leaf {
  background: linear-gradient(135deg, var(--chlorophyll), var(--acid));
  box-shadow: inset 22px -10px 0 rgba(18,7,17,.36), 0 0 30px rgba(182,255,59,.25);
}
.split-leaf { width: 19rem; height: 10rem; border-radius: 95% 0 95% 0; clip-path: polygon(0 50%, 38% 0, 52% 42%, 72% 5%, 100% 50%, 72% 95%, 52% 58%, 38% 100%); opacity: .72; }
.lacquer-leaf { width: 24rem; height: 13rem; border-radius: 100% 0 100% 0; opacity: .86; }
.leaf-a { left: 3vw; top: 18vh; transform: rotate(-28deg); animation: driftLeaf 11s ease-in-out infinite; }
.leaf-b { right: 6vw; bottom: 18vh; transform: rotate(152deg); animation: driftLeaf 12s ease-in-out infinite reverse; }
.leaf-c { left: -8vw; bottom: 12vh; transform: rotate(28deg); }
.leaf-d { right: -8vw; top: 32vh; transform: rotate(205deg); }

.moonflower { width: 15rem; height: 15rem; border-radius: 50%; background: radial-gradient(circle, var(--parchment) 0 13%, var(--honey) 14% 19%, rgba(255,46,136,.72) 20% 50%, transparent 51%); mix-blend-mode: screen; opacity: .55; }
.moonflower-a { left: 12vw; top: 8vh; animation: slowSpin 26s linear infinite; }
.moonflower-b { right: 14vw; bottom: 9vh; animation: slowSpin 31s linear infinite reverse; }
.pod { width: 6rem; height: 17rem; border-radius: 50% 50% 44% 44%; background: linear-gradient(var(--honey), var(--orange), var(--violet)); box-shadow: 0 0 28px rgba(255,200,61,.36); opacity: .78; }
.pod-a { top: 55vh; left: 16vw; transform: rotate(-21deg); animation: podBob 9s ease-in-out infinite; }
.pod-b { top: 15vh; right: 22vw; transform: rotate(36deg); animation: podBob 10s ease-in-out infinite reverse; }

.tendril, .curl-vine {
  width: 16rem; height: 16rem; border: .5rem solid var(--acid); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; opacity: .58; filter: drop-shadow(0 0 12px rgba(182,255,59,.55));
}
.tendril-a { left: 24vw; bottom: 8vh; transform: rotate(28deg); animation: tendrilCurl 7s ease-in-out infinite; }
.tendril-b { right: 27vw; top: 6vh; transform: rotate(210deg); animation: tendrilCurl 8s ease-in-out infinite reverse; }
.dew { width: 4.4rem; height: 4.4rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--parchment), rgba(255,200,61,.6) 34%, rgba(255,46,136,.32) 70%); box-shadow: 0 0 25px rgba(255,232,181,.42); }
.dew-a { left: 28vw; top: 28vh; animation: dewPulse 3s ease-in-out infinite; }
.dew-b { right: 34vw; bottom: 22vh; animation: dewPulse 3.4s ease-in-out infinite .5s; }
.thorn-arch { width: 30rem; height: 30rem; border: 1.1rem solid rgba(255, 106, 42, .65); border-bottom-color: transparent; border-left-color: transparent; border-radius: 50%; right: 2vw; bottom: -18vh; transform: rotate(-30deg); }

.pollen-field { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.pollen {
  position: absolute;
  left: 50%; top: 50%;
  width: .45rem; height: .45rem;
  border-radius: 50%;
  background: var(--honey);
  box-shadow: 0 0 12px var(--honey), 0 0 22px var(--orange);
  animation: pollenDrift var(--duration, 9s) linear infinite;
  transform: rotate(var(--angle)) translateX(var(--distance)) scale(var(--scale));
  opacity: .78;
}

.specimen-card {
  position: absolute;
  z-index: 8;
  width: 13rem;
  padding: 1rem;
  border: 1px solid rgba(255,232,181,.44);
  border-radius: 45% 55% 50% 50% / 18% 22% 78% 82%;
  color: var(--night-soil);
  background: linear-gradient(145deg, rgba(255,232,181,.94), rgba(255,200,61,.78));
  box-shadow: 0 16px 40px rgba(0,0,0,.34), inset 0 0 24px rgba(255,255,255,.25);
  transform: rotate(-5deg);
}
.specimen-card span { font-family: var(--decor); color: var(--fuchsia); font-size: .85rem; }
.specimen-card strong { display: block; font-family: var(--display); font-size: 1.35rem; color: var(--violet); }
.specimen-card em { display: block; font-style: normal; font-size: .86rem; line-height: 1.18; }
.specimen-arrival { right: 8vw; bottom: 11vh; }
.specimen-inspection { left: 8vw; bottom: 9vh; transform: rotate(7deg); }
.specimen-final { right: 9vw; top: 12vh; transform: rotate(6deg); }

.vertical-tag {
  position: absolute;
  z-index: 9;
  writing-mode: vertical-rl;
  font-size: clamp(.85rem, 1.7vw, 2rem);
  text-shadow: 0 0 18px rgba(182,255,59,.55);
}
.tag-right { right: 4.5vw; top: 26vh; }
.tag-left { left: 4.5vw; bottom: 18vh; transform: rotate(180deg); }

.inspection-chapter {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 70% 38%, rgba(182,255,59,.18), transparent 20rem),
    radial-gradient(circle at 25% 65%, rgba(255,106,42,.25), transparent 24rem),
    linear-gradient(160deg, #1c0818, var(--chlorophyll));
}
.chapter-orbit { position: absolute; width: 82vmin; height: 82vmin; border-radius: 50%; border: 1px dashed rgba(255,232,181,.38); animation: slowSpin 55s linear infinite; }
.glass-pane {
  position: relative;
  z-index: 3;
  width: min(72vw, 760px);
  padding: clamp(2rem, 6vw, 5rem);
  border: 1px solid rgba(255,232,181,.45);
  border-radius: 3rem 7rem 4rem 2rem;
  background: linear-gradient(140deg, rgba(255,232,181,.14), rgba(255,46,136,.15), rgba(75,29,107,.35));
  box-shadow: 0 24px 80px rgba(0,0,0,.35), inset 0 0 50px rgba(255,232,181,.08);
  backdrop-filter: blur(8px);
}
.glass-pane h2 { margin: .45rem 0 1rem; font-family: var(--display); font-size: clamp(2.5rem, 7vw, 6.7rem); line-height: .86; letter-spacing: -.06em; color: var(--parchment); }
.glass-pane p { max-width: 38rem; margin: 0; font-size: clamp(1rem, 1.6vw, 1.28rem); line-height: 1.45; }
.pane-label { font-size: clamp(.8rem, 1vw, 1rem); }
.annotation-ribbon {
  position: absolute;
  z-index: 4;
  top: 17vh; right: 7vw;
  max-width: 24rem;
  padding: 1rem 1.2rem;
  border-radius: 999px;
  color: var(--night-soil);
  background: var(--acid);
  font-weight: 700;
  transform: rotate(9deg);
  box-shadow: 0 0 28px rgba(182,255,59,.34);
}
.inspection-shapes span { position: absolute; display: block; }
.big-disc { width: 26rem; height: 26rem; left: -5rem; top: 7rem; border-radius: 50%; background: radial-gradient(circle, var(--honey), var(--fuchsia) 45%, transparent 46%); opacity: .5; mix-blend-mode: screen; animation: slowSpin 22s linear infinite; }
.crescent-seed { width: 18rem; height: 18rem; right: 9vw; bottom: 11vh; border-radius: 50%; box-shadow: -3.4rem 1.4rem 0 var(--orange); filter: drop-shadow(0 0 20px rgba(255,106,42,.55)); animation: podBob 8s ease-in-out infinite; }
.curl-vine { left: 12vw; bottom: 18vh; transform: rotate(120deg); }
.fruit-orb { border-radius: 50%; background: radial-gradient(circle at 35% 28%, var(--parchment), var(--fuchsia) 36%, var(--violet)); box-shadow: 0 0 30px rgba(255,46,136,.35); }
.orb-one { width: 8rem; height: 8rem; right: 18vw; top: 17vh; }
.orb-two { width: 5rem; height: 5rem; left: 22vw; bottom: 12vh; background: radial-gradient(circle at 35% 28%, var(--parchment), var(--honey) 36%, var(--orange)); }
.mini-petal { width: 7rem; height: 12rem; border-radius: 75% 25% 70% 30%; background: var(--fuchsia); mix-blend-mode: screen; opacity: .68; }
.mini-one { left: 70vw; top: 44vh; transform: rotate(38deg); }
.mini-two { left: 18vw; top: 24vh; transform: rotate(-70deg); background: var(--acid); }

.tableau-chapter {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,200,61,.2), transparent 18rem),
    radial-gradient(circle at 50% 50%, rgba(255,46,136,.12), transparent 36rem),
    linear-gradient(180deg, #070306, var(--night-soil));
}
.final-name { position: relative; z-index: 5; font-family: var(--display); font-size: clamp(4.2rem, 15vw, 15rem); font-variation-settings: "opsz" 144, "wght" 900, "SOFT" 80, "WONK" 1; letter-spacing: -.08em; line-height: .8; text-shadow: 0 0 34px rgba(255,232,181,.34); }
.final-name b { color: var(--honey); font-weight: 900; text-shadow: 0 0 14px var(--honey), 0 0 65px var(--orange); animation: seedPulse 1.85s ease-in-out infinite; }
.final-note { position: absolute; z-index: 6; bottom: 14vh; width: min(28rem, 78vw); margin: 0; text-align: center; color: var(--night-soil); background: var(--parchment); border-radius: 999px 999px 40px 999px; padding: 1rem 1.35rem; font-weight: 700; box-shadow: 0 0 36px rgba(255,232,181,.28); }
.constellation span { position: absolute; left: 50%; top: 50%; width: .7rem; height: .7rem; border-radius: 50%; background: var(--honey); box-shadow: 0 0 18px var(--honey); transform: rotate(calc(var(--i, 1) * 30deg)) translateX(34vmin); animation: starBreathe 3s ease-in-out infinite; }
.constellation span:nth-child(1) { --i: 1; background: var(--fuchsia); }
.constellation span:nth-child(2) { --i: 2; }
.constellation span:nth-child(3) { --i: 3; background: var(--acid); }
.constellation span:nth-child(4) { --i: 4; }
.constellation span:nth-child(5) { --i: 5; background: var(--orange); }
.constellation span:nth-child(6) { --i: 6; }
.constellation span:nth-child(7) { --i: 7; background: var(--fuchsia); }
.constellation span:nth-child(8) { --i: 8; }
.constellation span:nth-child(9) { --i: 9; background: var(--acid); }
.constellation span:nth-child(10) { --i: 10; }
.constellation span:nth-child(11) { --i: 11; background: var(--orange); }
.constellation span:nth-child(12) { --i: 12; }
.wreath { position: absolute; width: 76vmin; height: 76vmin; border-radius: 50%; animation: slowSpin 44s linear infinite; }
.wreath-leaf { position: absolute; left: 50%; top: 50%; width: 12vmin; height: 24vmin; border-radius: 90% 10% 90% 10%; background: linear-gradient(145deg, var(--chlorophyll), var(--acid)); transform-origin: 0 38vmin; opacity: .84; box-shadow: 0 0 22px rgba(182,255,59,.25); }
.wl-1 { transform: rotate(0deg) translateY(-38vmin) rotate(20deg); }
.wl-2 { transform: rotate(60deg) translateY(-38vmin) rotate(20deg); background: linear-gradient(145deg, var(--fuchsia), var(--orange)); }
.wl-3 { transform: rotate(120deg) translateY(-38vmin) rotate(20deg); }
.wl-4 { transform: rotate(180deg) translateY(-38vmin) rotate(20deg); background: linear-gradient(145deg, var(--honey), var(--orange)); }
.wl-5 { transform: rotate(240deg) translateY(-38vmin) rotate(20deg); }
.wl-6 { transform: rotate(300deg) translateY(-38vmin) rotate(20deg); background: linear-gradient(145deg, var(--fuchsia), var(--violet)); }

@keyframes seedPulse { 0%,100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.18); filter: brightness(1.35); } }
@keyframes haloPulse { 0%,100% { opacity: .38; transform: translate(-50%, -50%) scale(.96); } 50% { opacity: .82; transform: translate(-50%, -50%) scale(1.08); } }
@keyframes soilBreath { 0%,100% { transform: scale(.98) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } }
@keyframes unfurl { from { opacity: 0; clip-path: inset(48% 48% 48% 48% round 50%); } to { opacity: .88; clip-path: inset(0 round 0); } }
@keyframes petalFloat { 0%,100% { margin-top: 0; } 50% { margin-top: -1.2rem; } }
@keyframes driftLeaf { 0%,100% { margin-left: 0; margin-top: 0; } 50% { margin-left: 1.3rem; margin-top: -.9rem; } }
@keyframes slowSpin { to { rotate: 360deg; } }
@keyframes podBob { 0%,100% { margin-top: 0; } 50% { margin-top: 1.6rem; } }
@keyframes tendrilCurl { 0%,100% { scale: .96; } 50% { scale: 1.08; } }
@keyframes dewPulse { 0%,100% { transform: scale(.9); opacity: .62; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes pollenDrift { from { rotate: 0deg; opacity: .1; } 12% { opacity: .9; } to { rotate: 360deg; opacity: .1; } }
@keyframes starBreathe { 0%,100% { scale: .75; opacity: .55; } 50% { scale: 1.45; opacity: 1; } }

@media (max-width: 800px) {
  .wordmark-wrap { transform: translate(0, -2vh); }
  .hero-note { position: relative; display: inline-block; inset: auto; margin: 1.2rem .2rem 0; max-width: 14rem; }
  .label-north { top: -3.5rem; left: 8%; }
  .specimen-card { width: 10.5rem; padding: .8rem; }
  .specimen-arrival { right: 5vw; bottom: 6vh; }
  .vertical-tag { display: none; }
  .glass-pane { width: 86vw; }
  .annotation-ribbon { top: 9vh; right: 4vw; max-width: 18rem; }
  .petal, .lacquer-leaf { scale: .72; }
}