:root {
  /* DESIGN FONT TOKENS: Mono** Mon* Grotesk** Grotesk* */
  --cream: #FFF4D6;
  --plum: #241326;
  --marigold: #FFB000;
  --dusk: #3E4BFF;
  --meadow: #355E3B;
  --rose: #E9A1A8;
  --smoke: #8E858B;
  --fraunces: "Fraunces", Georgia, serif;
  --cormorant: "Cormorant Garamond", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --space: "Space Grotesk", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

.story-shell { position: relative; }

.scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.cream-scene { background: var(--cream); color: var(--plum); }
.plum-scene { background: var(--plum); color: var(--cream); }

.margin-nav {
  position: fixed;
  z-index: 20;
  top: 2.1rem;
  left: 2rem;
  display: flex;
  gap: 1.15rem;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
}

.draw-link {
  color: currentColor;
  text-decoration: none;
  position: relative;
  background: transparent;
  border: 0;
  padding: 0 .1rem .2rem;
  font: inherit;
  cursor: pointer;
}

.draw-link::after {
  content: "";
  position: absolute;
  left: -.08rem;
  right: -.22rem;
  bottom: -.08rem;
  height: 2px;
  background: var(--marigold);
  transform-origin: left;
  transform: scaleX(0) rotate(-1deg);
  transition: transform .8s cubic-bezier(.2,.9,.1,1);
  box-shadow: 6px 3px 0 -1px var(--rose), 10px -2px 0 -1px var(--dusk);
}

.draw-link:hover::after, .draw-link.is-lit::after { transform: scaleX(1.08) rotate(-1deg); }

.wordmark {
  position: absolute;
  left: clamp(2rem, 8vw, 8rem);
  bottom: clamp(2rem, 8vh, 6rem);
  margin: 0;
  font-family: var(--fraunces);
  font-weight: 500;
  font-size: clamp(4rem, 15vw, 13rem);
  letter-spacing: -.075em;
  line-height: .82;
  font-variation-settings: "SOFT" 80, "WONK" 1;
}

.pastoral {
  font-family: var(--cormorant);
  font-size: clamp(1.25rem, 2.2vw, 2.1rem);
  line-height: 1.45;
  font-style: italic;
}

.whisper {
  position: absolute;
  width: min(22rem, 54vw);
  right: 9vw;
  bottom: 15vh;
  color: var(--smoke);
}

.coord, .micro-heading {
  position: absolute;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--smoke);
}

.coord-a { top: 18vh; left: 18vw; }
.coord-b { right: 8vw; bottom: 9vh; }

.wick-stage {
  position: absolute;
  inset: 5vh 7vw 12vh 40vw;
}

.wick-svg { width: 100%; height: 100%; overflow: visible; }

.draw-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--path-length, 1000);
  stroke-dashoffset: var(--path-length, 1000);
}

.wick-path { stroke: var(--plum); stroke-width: 2.1; animation: drawPath 3.8s 1s cubic-bezier(.4,0,.1,1) forwards; }
.wax-shoulder { fill: none; stroke: var(--smoke); stroke-width: 1.2; opacity: .75; }
.smoke-thread { fill: none; stroke: var(--rose); stroke-width: 1.1; opacity: .45; }

.flame {
  width: 2.8rem;
  height: 4rem;
  border-radius: 55% 45% 50% 50%;
  background: var(--marigold);
  filter: drop-shadow(-12px 10px 13px rgba(62,75,255,.36));
  transform: rotate(8deg) scale(.2);
  opacity: 0;
  transition: opacity 1.4s ease, transform 1.8s cubic-bezier(.2,.9,.15,1);
  animation: flicker 2.6s infinite ease-in-out;
}

.flame span {
  position: absolute;
  left: 32%;
  top: 24%;
  width: 38%;
  height: 46%;
  background: var(--rose);
  border-radius: 60% 40% 55% 45%;
}

.hero-flame { position: absolute; right: 4.6%; top: 4%; }
.hero-flame.is-visible { opacity: 1; transform: rotate(8deg) scale(1); }

.marginal-button { position: absolute; right: 7vw; top: 51vh; color: var(--plum); font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }

.scene-title {
  position: absolute;
  margin: 0;
  font-family: var(--fraunces);
  font-size: clamp(3rem, 11vw, 10rem);
  font-weight: 450;
  letter-spacing: -.06em;
}

.scene-field .scene-title { left: 10vw; top: 8vh; }
.field-caption { position: absolute; left: 13vw; top: 29vh; max-width: 32rem; color: var(--meadow); }
.grass-map { position: absolute; left: 7vw; right: 4vw; bottom: 12vh; width: 88vw; height: 50vh; overflow: visible; }
.field-path { stroke: var(--meadow); stroke-width: 2.2; }
.grass { fill: none; stroke: var(--meadow); stroke-width: 1.5; stroke-linecap: round; opacity: .88; }
.flower { stroke: var(--rose); }
.scene-field.in-view .field-path { animation: drawPath 4.8s .3s cubic-bezier(.36,0,.18,1) forwards; }

.firefly {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--marigold);
  box-shadow: 0 0 18px 4px rgba(255,176,0,.35), -8px 8px 18px rgba(62,75,255,.18);
  opacity: .55;
  transition: transform .45s ease, opacity .45s ease, box-shadow .45s ease;
}

.firefly::after { content: attr(data-note); position: absolute; left: .9rem; top: -.42rem; width: 8rem; font-family: var(--mono); font-size: .62rem; color: var(--smoke); opacity: .45; }
.firefly.is-bright { opacity: 1; transform: scale(1.9); box-shadow: 0 0 32px 10px rgba(255,176,0,.62), -12px 10px 24px rgba(62,75,255,.32); }

.scene-moth { background-image: radial-gradient(circle at 74% 18%, rgba(62,75,255,.16), transparent 27rem); }
.scene-moth .micro-heading { left: 12vw; top: 14vh; color: var(--rose); }
.moth-column { position: absolute; left: 50%; top: 50%; width: min(36rem, 74vw); height: 72vh; transform: translate(-50%, -50%); }
.moth { width: 100%; height: 100%; overflow: visible; }
.moth path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.orbit { stroke: var(--smoke); stroke-width: 1; stroke-dasharray: 7 14; opacity: .65; }
.moth-body { stroke: var(--marigold); stroke-width: 1.7; fill: rgba(255,176,0,.08); }
.wing { stroke: var(--rose); stroke-width: 1.5; fill: rgba(233,161,168,.05); transition: transform 1.2s cubic-bezier(.2,.9,.1,1), fill 1.2s ease; transform-box: fill-box; transform-origin: center; }
.bracket { stroke: var(--dusk); stroke-width: 2; opacity: .68; transition: opacity .8s ease; }
.moth-column:hover .wing-left, .moth-column.is-open .wing-left { transform: rotate(-11deg) translateX(-18px); fill: rgba(233,161,168,.16); }
.moth-column:hover .wing-right, .moth-column.is-open .wing-right { transform: rotate(11deg) translateX(18px); fill: rgba(233,161,168,.16); }
.moth-column:hover .bracket, .moth-column.is-open .bracket { opacity: 1; }
.code-note { position: absolute; left: 58%; top: 44%; padding-left: 1rem; border-left: 1px solid var(--marigold); font-family: var(--mono); font-size: .74rem; color: var(--cream); opacity: .28; transform: translateY(12px); transition: opacity .8s ease, transform .8s ease; }
.code-note span { display: block; color: var(--smoke); margin-bottom: .45rem; }
.code-note b { font-weight: 400; color: var(--rose); }
.moth-column:hover .code-note, .moth-column.is-open .code-note { opacity: 1; transform: translateY(0); }
.moth-text { position: absolute; left: 8vw; bottom: 10vh; max-width: 28rem; color: var(--cream); opacity: .78; }

.scene-archive { background-image: radial-gradient(circle at 23% 72%, rgba(255,176,0,.13), transparent 18rem), radial-gradient(circle at 82% 22%, rgba(62,75,255,.16), transparent 22rem); }
.archive-title { right: 8vw; top: 12vh; color: var(--cream); }
.archive-coord { left: 11vw; top: 22vh; }
.slip-field { position: absolute; inset: 0; }
.archive-slip { position: absolute; width: 13rem; padding: 1rem 1.1rem; color: var(--plum); background: rgba(255,244,214,.88); border-top: 1px solid var(--marigold); box-shadow: -18px 22px 42px rgba(0,0,0,.16); font-family: var(--cormorant); animation: drift 9s ease-in-out infinite; }
.archive-slip span { display: block; font-family: var(--mono); color: var(--meadow); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .7rem; }
.archive-slip em { font-size: 1.25rem; line-height: 1.2; }
.slip-one { left: 17vw; top: 42vh; transform: rotate(-5deg); }
.slip-two { left: 43vw; top: 62vh; transform: rotate(3deg); animation-delay: -2s; }
.slip-three { left: 66vw; top: 38vh; transform: rotate(-2deg); animation-delay: -4s; }
.slip-four { left: 29vw; top: 18vh; transform: rotate(5deg); animation-delay: -6s; }
.halo { position: absolute; width: 11rem; height: 11rem; margin: -5.5rem 0 0 -5.5rem; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255,176,0,.22), rgba(233,161,168,.09) 36%, transparent 70%); opacity: 0; transition: opacity .5s ease; }
.scene-archive:hover .halo { opacity: 1; }
.hidden-marginal { position: absolute; right: 8vw; bottom: 13vh; max-width: 19rem; color: var(--rose); font-family: var(--cormorant); font-size: 1.35rem; opacity: .08; transition: opacity .6s ease; }
.scene-archive:hover .hidden-marginal { opacity: .75; }

.scene-first { display: grid; place-items: center; }
.final-note { top: 16vh; left: 14vw; color: var(--smoke); }
.final-mark { width: min(78vw, 56rem); transform: translateY(4vh); }
.final-mark h2 { margin: 0; font-family: var(--fraunces); font-size: clamp(4rem, 14vw, 12rem); font-weight: 460; letter-spacing: -.08em; line-height: .9; }
.final-underline { width: 100%; height: 5rem; overflow: visible; }
#finalLine { stroke: var(--marigold); stroke-width: 4; filter: drop-shadow(-10px 8px 0 rgba(62,75,255,.2)); }
.scene-first.in-view #finalLine { animation: drawPath 3.9s .8s cubic-bezier(.2,.8,.1,1) forwards; }
.pixel-star { position: absolute; right: 18vw; bottom: 28vh; width: 4px; height: 4px; background: var(--marigold); box-shadow: 0 0 0 2px var(--rose), 0 0 22px 8px rgba(62,75,255,.32); animation: starPulse 4s ease-in-out infinite; }

@keyframes drawPath { to { stroke-dashoffset: 0; } }
@keyframes flicker { 0%,100% { border-radius: 55% 45% 50% 50%; } 50% { border-radius: 48% 52% 44% 56%; transform: rotate(4deg) scale(1.04); } }
@keyframes drift { 0%,100% { translate: 0 0; } 50% { translate: 0 -18px; } }
@keyframes starPulse { 0%,100% { opacity: .65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.7); } }

@media (max-width: 760px) {
  .margin-nav { top: 1rem; left: 1rem; gap: .8rem; font-size: .58rem; }
  .wick-stage { inset: 9vh 4vw 26vh 16vw; }
  .whisper { right: 7vw; bottom: 25vh; width: 70vw; }
  .scene-title { font-size: clamp(3.5rem, 18vw, 7rem); }
  .archive-slip { width: 11rem; }
  .slip-three { left: 51vw; }
  .slip-two { left: 27vw; }
  .code-note { left: 40%; top: 57%; }
}