:root {
  --ochre: #C98A1F;
  --citron: #D7FF00;
  --cream: #FFF1C7;
  --charcoal: #111111;
  --cyan: #00E5FF;
  --coral: #FF3D7F;
  --red: #F23822;
  --green: #2EE66B;
  --shadow: #3A2B20;
  --display: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;
  --label: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --body: "Nunito Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--body);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .24;
  mix-blend-mode: multiply;
  background:
    radial-gradient(circle at 12% 19%, rgba(58,43,32,.22) 0 1px, transparent 1.5px),
    radial-gradient(circle at 67% 71%, rgba(17,17,17,.18) 0 1px, transparent 1.8px),
    linear-gradient(90deg, rgba(201,138,31,.08), transparent 25%, rgba(0,229,255,.06) 70%, transparent);
  background-size: 17px 17px, 23px 23px, 100% 100%;
}

.scroll-meter {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--red), var(--coral), var(--citron), var(--cyan));
  z-index: 60;
  box-shadow: 0 0 18px rgba(215,255,0,.6);
}

.poster {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 72px);
  isolation: isolate;
}

.poster::after {
  content: attr(data-act);
  position: absolute;
  right: clamp(20px, 4vw, 60px);
  bottom: clamp(16px, 3vw, 44px);
  font-family: var(--display);
  font-size: clamp(5rem, 18vw, 18rem);
  line-height: .7;
  color: rgba(58,43,32,.08);
  z-index: -1;
}

.chapter-tab, .table-tag {
  font-family: var(--body);
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: clamp(.7rem, 1vw, .9rem);
}

.poster-door {
  background: var(--cream);
}

.carbon-orb {
  position: absolute;
  width: min(92vw, 880px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--charcoal);
  left: -18vw;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: inset -35px 0 0 rgba(58,43,32,.75), 0 20px 60px rgba(17,17,17,.26);
  transition: transform .9s cubic-bezier(.2,.8,.2,1), left .9s cubic-bezier(.2,.8,.2,1);
}

.poster-door.is-active .carbon-orb { transform: translateY(-50%) rotate(-6deg); }
.poster-door.has-passed .carbon-orb { left: -48vw; transform: translateY(-50%) rotate(-18deg); }

.wordmark {
  position: absolute;
  left: clamp(38px, 10vw, 155px);
  top: 50%;
  transform: translateY(-50%) rotate(-5deg);
  width: clamp(230px, 31vw, 440px);
  aspect-ratio: 1;
  border: 10px solid var(--cream);
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  color: var(--cream);
  background: rgba(17,17,17,.12);
  box-shadow: 0 0 0 4px var(--charcoal), 14px 14px 0 rgba(242,56,34,.75);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}

.wordmark.is-pressed { transform: translateY(-48%) rotate(-5deg) scale(.94); }
.wordmark span { font-family: var(--display); font-size: clamp(2.1rem, 5vw, 4.8rem); line-height: .82; }
.wordmark small { display: block; margin-top: .8rem; font-family: var(--label); font-size: clamp(.82rem, 1.2vw, 1.1rem); color: var(--citron); }

.label-card {
  position: absolute;
  right: 8vw;
  bottom: 16vh;
  width: min(330px, 72vw);
  padding: 18px 20px;
  background: var(--cream);
  border: 3px solid var(--charcoal);
  box-shadow: 10px 10px 0 var(--ochre);
  font-family: var(--label);
  font-size: 1.05rem;
  transform: translateY(18px);
  opacity: 0;
  transition: .65s cubic-bezier(.2,.8,.2,1);
}

.poster.is-active .label-card { transform: translateY(0); opacity: 1; }
.label-card b { display: block; font-family: var(--body); letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; }

.dot-field i {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--citron);
  transform: scale(0);
  transition: transform .45s cubic-bezier(.35,1.8,.45,1);
}
.dot-field i:nth-child(1) { right: 18vw; top: 18vh; background: var(--cyan); }
.dot-field i:nth-child(2) { right: 34vw; top: 32vh; background: var(--red); transition-delay: .08s; }
.dot-field i:nth-child(3) { right: 10vw; top: 48vh; transition-delay: .16s; }
.dot-field i:nth-child(4) { right: 44vw; bottom: 18vh; background: var(--green); transition-delay: .22s; }
.dot-field i:nth-child(5) { right: 23vw; bottom: 10vh; background: var(--coral); transition-delay: .28s; }
.poster.is-active .dot-field i { transform: scale(1); }

.poster-table {
  background: var(--cream);
  display: grid;
  grid-template-columns: 34vw 1fr;
  align-items: end;
}

.chapter-word {
  font-family: var(--display);
  font-size: clamp(4rem, 13vw, 14rem);
  line-height: .78;
  letter-spacing: -.06em;
  color: var(--charcoal);
  z-index: 3;
}

.vertical-bar {
  position: absolute;
  left: 38vw;
  top: 0;
  width: clamp(38px, 6vw, 84px);
  height: 100%;
  background: var(--red);
  transform: translateY(-100%);
  transition: transform .75s cubic-bezier(.2,.8,.2,1);
  mix-blend-mode: multiply;
}
.poster.is-active .vertical-bar { transform: translateY(0); }

.specimen-table {
  position: relative;
  min-height: 76vh;
  grid-column: 2;
}

.table-tag {
  position: absolute;
  right: 9vw;
  top: 6vh;
  padding: 9px 13px;
  border: 2px solid var(--charcoal);
  background: var(--citron);
  transform: translateX(45px);
  opacity: 0;
  transition: .55s .15s cubic-bezier(.2,.8,.2,1);
  z-index: 4;
}
.poster.is-active .table-tag { transform: translateX(0); opacity: 1; }

.plant-svg { overflow: visible; }
.ginkgo {
  position: absolute;
  right: 8vw;
  bottom: 21vh;
  width: min(46vw, 520px);
  transform: rotate(7deg) translateY(28px);
  transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .8s;
  opacity: .12;
}
.poster.is-active .ginkgo { transform: rotate(-3deg) translateY(0); opacity: 1; }

.line {
  fill: none;
  stroke: var(--charcoal);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.thin { stroke-width: 4; }
.cream-line { stroke: var(--cream); }
.neon-vein {
  fill: none;
  stroke: var(--citron);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  transition: stroke-dashoffset 1.25s .3s cubic-bezier(.55,0,.1,1);
  mix-blend-mode: multiply;
}
.neon-vein.cyan { stroke: var(--cyan); mix-blend-mode: screen; }
.poster.is-active .neon-vein { stroke-dashoffset: 0; }

.table-plinth {
  position: absolute;
  right: 3vw;
  bottom: 12vh;
  width: min(63vw, 780px);
  height: clamp(84px, 15vh, 145px);
  background: var(--ochre);
  border: 5px solid var(--charcoal);
  box-shadow: -18px 18px 0 var(--cyan);
}

.caption-stack {
  position: absolute;
  left: clamp(24px, 5vw, 72px);
  bottom: 8vh;
  width: min(370px, 80vw);
  display: grid;
  gap: 10px;
}
.caption-stack p {
  margin: 0;
  padding: 12px 14px;
  background: rgba(255,241,199,.86);
  border-left: 12px solid var(--charcoal);
  box-shadow: 5px 5px 0 rgba(58,43,32,.18);
  font-family: var(--label);
  transform: translateX(-38px);
  opacity: 0;
  transition: .55s cubic-bezier(.2,.8,.2,1);
}
.caption-stack p:nth-child(2) { transition-delay: .11s; }
.caption-stack p:nth-child(3) { transition-delay: .22s; }
.poster.is-active .caption-stack p { transform: translateX(0); opacity: 1; }
.caption-stack span { display: block; font: 900 .67rem var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--red); }

.snap-shape { position: absolute; transform: scaleX(0); transform-origin: left; transition: transform .45s .25s steps(2, jump-none); }
.cyan-block { width: 170px; height: 44px; right: 24vw; top: 19vh; background: var(--cyan); mix-blend-mode: multiply; }
.red-dot { width: 72px; height: 72px; border-radius: 50%; right: 12vw; top: 35vh; background: var(--red); transform-origin: center; }
.poster.is-active .snap-shape { transform: scaleX(1); }
.poster.is-active .red-dot { transform: scale(1); }

.poster-herbarium {
  background: var(--charcoal);
  color: var(--cream);
}
.matchbox-frame {
  position: absolute;
  inset: clamp(28px, 4vw, 58px);
  border: 4px solid var(--cream);
  box-shadow: inset 0 0 0 14px var(--red), inset 0 0 0 20px var(--cream);
  opacity: .95;
}
.neon-title {
  position: absolute;
  left: 6vw;
  top: 10vh;
  color: var(--cream);
  text-shadow: 8px 8px 0 var(--coral), -6px 12px 0 rgba(0,229,255,.75);
  max-width: 50vw;
}
.specimen-ring {
  position: absolute;
  right: 8vw;
  bottom: 6vh;
  width: min(48vw, 600px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 22px solid var(--citron);
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(46,230,107,.18), transparent 62%);
  transform: rotate(10deg) scale(.92);
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.poster.is-active .specimen-ring { transform: rotate(-4deg) scale(1); }
.fern { width: 78%; }
.overprint {
  position: absolute;
  mix-blend-mode: screen;
  opacity: .74;
  transform: translateY(50px);
  transition: transform .7s .15s cubic-bezier(.2,.8,.2,1);
}
.overprint.citron { width: 34vw; height: 24vh; left: 48vw; top: 14vh; background: var(--citron); clip-path: polygon(0 0, 100% 23%, 81% 100%, 10% 72%); }
.overprint.coral { width: 22vw; height: 22vw; left: 35vw; bottom: 12vh; border-radius: 50%; background: var(--coral); }
.poster.is-active .overprint { transform: translateY(0); }
.seed-packet {
  position: absolute;
  left: 11vw;
  bottom: 16vh;
  width: min(310px, 72vw);
  padding: 24px;
  background: var(--cream);
  color: var(--charcoal);
  border: 5px solid var(--charcoal);
  box-shadow: 13px 13px 0 var(--cyan);
  font-family: var(--label);
  transform: rotate(4deg);
}
.seed-packet b { display: block; font: 900 .75rem var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.geometry-confetti i { position: absolute; display: block; }
.triangle { right: 36vw; top: 12vh; width: 0; height: 0; border-left: 32px solid transparent; border-right: 32px solid transparent; border-bottom: 58px solid var(--cyan); }
.square { right: 12vw; top: 17vh; width: 48px; height: 48px; background: var(--green); }
.circle { left: 42vw; bottom: 20vh; width: 38px; height: 38px; border-radius: 50%; background: var(--citron); }
.bar { left: 54vw; top: 48vh; width: 160px; height: 24px; background: var(--red); }

.poster-afterglow {
  background: var(--cream);
  color: var(--charcoal);
}
.low-plinth {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 22vh;
  background: var(--shadow);
}
.membership-mark {
  position: absolute;
  left: 7vw;
  top: 12vh;
  width: min(48vw, 560px);
  aspect-ratio: 1;
  filter: drop-shadow(16px 18px 0 rgba(201,138,31,.38));
}
.membership-mark svg { width: 100%; height: 100%; animation: slow-spin 26s linear infinite; }
.seal-outer { fill: var(--citron); stroke: var(--charcoal); stroke-width: 10; }
.seal-inner { fill: var(--cream); stroke: var(--red); stroke-width: 8; stroke-dasharray: 14 12; }
.seal-text { font: 700 26px var(--display); fill: var(--charcoal); letter-spacing: .09em; }
.seal-sprout { fill: none; stroke: var(--green); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.seal-dot { fill: var(--coral); stroke: var(--charcoal); stroke-width: 5; }
@keyframes slow-spin { to { transform: rotate(360deg); } }

.afterglow-copy {
  position: absolute;
  right: 7vw;
  top: 17vh;
  width: min(43vw, 610px);
}
.afterglow-copy h2 {
  font-family: var(--display);
  font-size: clamp(3.2rem, 6vw, 7rem);
  line-height: .85;
  letter-spacing: -.05em;
  margin: 2vh 0 3vh;
}
.afterglow-copy p {
  font-family: var(--label);
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  line-height: 1.15;
}
.club-ledger {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}
.club-ledger span {
  width: fit-content;
  padding: 8px 13px;
  border: 3px solid var(--charcoal);
  background: var(--cyan);
  font: 700 1rem var(--label);
  box-shadow: 7px 7px 0 var(--red);
}
.club-ledger span:nth-child(2) { margin-left: 38px; background: var(--green); box-shadow-color: var(--ochre); }
.club-ledger span:nth-child(3) { margin-left: 76px; background: var(--citron); box-shadow-color: var(--coral); }

.act-nav {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 70;
  display: grid;
  gap: 9px;
}
.act-nav a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-decoration: none;
  font: 900 .78rem var(--body);
  color: var(--charcoal);
  background: var(--cream);
  border: 3px solid var(--charcoal);
  transition: transform .2s, background .2s;
}
.act-nav a.is-active { background: var(--citron); transform: translateX(-8px) rotate(-8deg); }

@media (max-width: 760px) {
  .poster { min-height: 100svh; padding: 24px; }
  .carbon-orb { width: 118vw; left: -58vw; top: 38%; }
  .wordmark { left: 11vw; top: 38%; width: 72vw; }
  .door-note { right: 8vw; bottom: 10vh; }
  .poster-table { display: block; }
  .chapter-word { font-size: clamp(4.5rem, 25vw, 8rem); }
  .vertical-bar { left: auto; right: 10vw; }
  .ginkgo { width: 78vw; right: 3vw; bottom: 28vh; }
  .table-plinth { width: 86vw; right: 4vw; bottom: 17vh; }
  .caption-stack { bottom: 4vh; }
  .neon-title { max-width: 88vw; left: 8vw; top: 12vh; }
  .specimen-ring { width: 76vw; right: 8vw; bottom: 9vh; }
  .seed-packet { left: 8vw; bottom: 7vh; }
  .membership-mark { width: 72vw; left: 14vw; top: 7vh; }
  .afterglow-copy { width: 86vw; left: 7vw; right: auto; top: 50vh; }
  .afterglow-copy h2 { font-size: clamp(3rem, 13vw, 5rem); }
  .act-nav { right: 10px; }
  .act-nav a { width: 34px; height: 34px; }
}