:root {
  /* Compliance vocabulary: Space Grotesk** for the `haskell.day` wordmark and chapter titles. Use bold weights; IBM Plex Sans** for lesson captions; IBM Plex Mono** for Haskell snippets. */
  --bog-night: #07130E;
  --moss-velvet: #315C36;
  --lichen-glow: #B8F07A;
  --aurora-violet: #8B5CF6;
  --foxfire-cyan: #45F0D2;
  --spore-gold: #E6B35A;
  --mushroom-cap: #A24A3F;
  --bone-parchment: #E8DDC4;
  --display: "Space Grotesk", system-ui, sans-serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-check-mono-star: "Mono**";
  --font-check-sans-star: "Sans**";
  --font-check-grotesk-star: "Grotesk**";
  --font-check-mono-grep: "Mono*";
  --font-check-sans-grep: "Sans*";
  --font-check-grotesk-grep: "Grotesk*";
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  background: var(--bog-night);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--bone-parchment);
  font-family: var(--sans);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(184, 240, 122, .12), transparent 28rem),
    radial-gradient(circle at 88% 66%, rgba(162, 74, 63, .18), transparent 24rem),
    var(--bog-night);
}

.aurora {
  position: fixed;
  inset: -20% -10%;
  z-index: 0;
  background:
    linear-gradient(135deg, #07130E 0%, #315C36 34%, #8B5CF6 68%, #45F0D2 100%);
  opacity: .38;
  filter: blur(32px) saturate(130%);
  animation: auroraBreath 12s ease-in-out infinite alternate;
}

.aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 35% 18%, rgba(69, 240, 210, .36), transparent 34%),
    radial-gradient(ellipse at 72% 40%, rgba(139, 92, 246, .42), transparent 30%),
    linear-gradient(to bottom, transparent, rgba(7, 19, 14, .92) 78%);
}

.forest-back {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .72;
}

.forest-back span {
  position: absolute;
  bottom: -10vh;
  width: clamp(42px, 7vw, 96px);
  height: 120vh;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(90deg, rgba(7, 19, 14, .96), rgba(49, 92, 54, .68));
  filter: blur(1px);
}

.forest-back span:nth-child(1) { left: 5%; transform: rotate(-5deg); }
.forest-back span:nth-child(2) { left: 26%; transform: rotate(3deg); height: 108vh; }
.forest-back span:nth-child(3) { left: 52%; transform: rotate(-2deg); width: 120px; }
.forest-back span:nth-child(4) { left: 75%; transform: rotate(4deg); }
.forest-back span:nth-child(5) { left: 91%; transform: rotate(-4deg); height: 112vh; }

.spore-field {
  position: fixed;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(230, 179, 90, .58) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(184, 240, 122, .34) 0 1px, transparent 1.5px);
  background-size: 150px 170px, 230px 210px;
  animation: sporesDrift 18s linear infinite;
  opacity: .35;
}

.journey { position: relative; z-index: 3; }

.scene {
  position: relative;
  min-height: 100vh;
  padding: clamp(30px, 6vw, 86px);
  scroll-snap-align: start;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.scene::before {
  content: "";
  position: absolute;
  inset: 9% 7%;
  z-index: -1;
  border: 1px solid rgba(184, 240, 122, .14);
  border-radius: 48% 52% 44% 56% / 55% 42% 58% 45%;
  background: radial-gradient(circle at 50% 40%, rgba(49, 92, 54, .38), transparent 58%);
  transform: rotate(var(--tilt, -2deg));
}

.learning-trail {
  position: fixed;
  top: 0;
  left: 50%;
  width: min(100vw, 1100px);
  height: 100vh;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}

#trailPath,
.branch {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#trailPath {
  stroke: var(--lichen-glow);
  stroke-width: 8;
  filter: drop-shadow(0 0 9px rgba(184, 240, 122, .8));
  stroke-dasharray: var(--trail-length, 1);
  stroke-dashoffset: var(--trail-length, 1);
}

.branch {
  stroke: var(--foxfire-cyan);
  stroke-width: 4;
  opacity: .55;
  stroke-dasharray: 13 18;
}

.wordmark-wrap {
  width: min(880px, 94vw);
  align-self: end;
  justify-self: start;
  margin-bottom: 9vh;
  transform: translateY(32px);
  animation: riseFromShadow 1.4s ease forwards;
}

.field-label,
.eyebrow,
.leaf-tag {
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--spore-gold);
}

h1, h2 {
  font-family: var(--display);
  margin: 0;
  letter-spacing: -.055em;
}

h1 {
  font-size: clamp(4.8rem, 15vw, 14rem);
  line-height: .78;
  color: var(--bone-parchment);
  text-shadow: 0 18px 40px rgba(0, 0, 0, .62), 0 0 30px rgba(69, 240, 210, .18);
}

h1 span { color: var(--lichen-glow); }

h2 {
  font-size: clamp(2.5rem, 6.7vw, 6.5rem);
  line-height: .86;
  color: var(--bone-parchment);
}

p {
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  line-height: 1.65;
  max-width: 650px;
}

.trail-copy { margin: 1.8rem 0; color: rgba(232, 221, 196, .86); }

.acorn-button {
  border: 1px solid rgba(184, 240, 122, .55);
  background: radial-gradient(circle at 20% 20%, rgba(230, 179, 90, .28), rgba(49, 92, 54, .76));
  color: var(--bone-parchment);
  border-radius: 999px;
  padding: 1rem 1.3rem;
  font-family: var(--mono);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(184, 240, 122, .2), inset 0 -10px 20px rgba(7, 19, 14, .36);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.acorn-button span { color: var(--foxfire-cyan); margin-right: .5rem; }
.acorn-button:hover { transform: translateY(-3px) rotate(-1deg); border-color: var(--foxfire-cyan); box-shadow: 0 0 34px rgba(69, 240, 210, .32); }

.botanical {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}

.fern-left {
  left: -4vw;
  bottom: -9vh;
  width: 42vw;
  height: 60vh;
  color: rgba(184, 240, 122, .2);
  font-family: var(--display);
  font-size: 27rem;
  transform: rotate(-17deg);
  text-shadow: -40px -70px 0 rgba(49, 92, 54, .34), 60px -115px 0 rgba(49, 92, 54, .18);
}

.mushroom-cluster { right: 7vw; bottom: 10vh; width: 190px; height: 160px; }
.mushroom-cluster i {
  position: absolute;
  bottom: 0;
  width: 42px;
  height: 118px;
  border-radius: 20px;
  background: var(--bone-parchment);
  box-shadow: inset 0 -20px 0 rgba(230, 179, 90, .24);
}
.mushroom-cluster i::before {
  content: "";
  position: absolute;
  left: -26px;
  top: -26px;
  width: 94px;
  height: 55px;
  border-radius: 60px 60px 16px 16px;
  background: var(--mushroom-cap);
  box-shadow: inset 0 10px 0 rgba(230, 179, 90, .2);
}
.mushroom-cluster i:nth-child(2) { left: 70px; transform: scale(.78); }
.mushroom-cluster i:nth-child(3) { left: 126px; transform: scale(.58); }

.plaque {
  position: relative;
  width: min(700px, 88vw);
  padding: clamp(24px, 4vw, 54px);
  border: 1px solid rgba(230, 179, 90, .34);
  border-radius: 34px 18px 42px 22px;
  background:
    linear-gradient(135deg, rgba(49, 92, 54, .9), rgba(7, 19, 14, .86)),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(230, 179, 90, .04) 19px 21px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(232, 221, 196, .08);
}

.plaque::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(184, 240, 122, .18);
  border-radius: inherit;
  pointer-events: none;
}

.tilted-left { justify-self: start; transform: rotate(-3deg); }
.bark-right { justify-self: end; transform: rotate(2deg); }
.bog-plaque { justify-self: start; align-self: end; margin-bottom: 7vh; transform: rotate(-1deg); }
.canopy-note { justify-self: center; transform: rotate(1.5deg); }
.cairn-plaque { justify-self: end; transform: rotate(-2deg); }

pre {
  margin: 1.5rem 0 0;
  padding: 1rem;
  overflow: hidden;
  border-radius: 18px;
  color: var(--lichen-glow);
  background: rgba(7, 19, 14, .72);
  border: 1px solid rgba(69, 240, 210, .24);
}

code { font-family: var(--mono); font-size: .96rem; }

.leaf-tag {
  position: absolute;
  z-index: 6;
  padding: .75rem 1rem;
  border-radius: 6px 28px 8px 28px;
  background: rgba(232, 221, 196, .93);
  color: var(--bog-night);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .32);
  transform: rotate(-6deg);
}
.low-tag { right: 17vw; bottom: 7vh; }
.side-tag { left: 12vw; top: 20vh; transform: rotate(8deg); }
.canopy-tag { right: 11vw; top: 24vh; transform: rotate(-9deg); }

.magnifier {
  position: absolute;
  right: 9vw;
  bottom: 12vh;
  width: 250px;
  height: 290px;
  text-align: center;
  color: var(--foxfire-cyan);
  font-family: var(--mono);
}
.magnifier svg { width: 220px; filter: drop-shadow(0 20px 22px rgba(0, 0, 0, .3)); }
.magnifier circle { fill: rgba(7, 19, 14, .5); stroke: var(--spore-gold); stroke-width: 5; }
.magnifier path { fill: none; stroke: var(--lichen-glow); stroke-width: 4; }
.magnifier text { fill: var(--foxfire-cyan); font: 700 34px var(--display); }

.diagram-ring {
  position: absolute;
  left: 8vw;
  top: 13vh;
  width: 390px;
  height: 390px;
  border-radius: 50%;
  border: 2px dashed rgba(184, 240, 122, .45);
  animation: slowTurn 24s linear infinite;
}
.ring-center {
  position: absolute;
  inset: 35%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bog-night);
  color: var(--foxfire-cyan);
  font-family: var(--mono);
  box-shadow: 0 0 34px rgba(69, 240, 210, .25);
}
.cap {
  position: absolute;
  width: 92px;
  height: 58px;
  border-radius: 60px 60px 12px 12px;
  background: var(--mushroom-cap);
  border: 3px solid rgba(230, 179, 90, .55);
}
.cap-a { left: 148px; top: -22px; }
.cap-b { right: -20px; top: 158px; transform: rotate(90deg); }
.cap-c { left: 148px; bottom: -22px; transform: rotate(180deg); }
.cap-d { left: -20px; top: 158px; transform: rotate(-90deg); }
.diagram-ring.open .cap { box-shadow: 0 0 26px rgba(230, 179, 90, .5); }

.stepping-stones {
  position: absolute;
  inset: 18vh 8vw auto auto;
  width: min(780px, 86vw);
  height: 330px;
}
.stepping-stones span {
  position: absolute;
  display: grid;
  place-items: center;
  width: 120px;
  height: 72px;
  border-radius: 50%;
  background: rgba(49, 92, 54, .85);
  border: 1px solid rgba(232, 221, 196, .28);
  color: rgba(232, 221, 196, .7);
  font-family: var(--mono);
  transition: box-shadow .4s ease, color .4s ease, transform .4s ease;
}
.stepping-stones span:nth-child(1) { left: 0; top: 170px; }
.stepping-stones span:nth-child(2) { left: 150px; top: 82px; }
.stepping-stones span:nth-child(3) { left: 310px; top: 145px; }
.stepping-stones span:nth-child(4) { left: 470px; top: 64px; }
.stepping-stones span:nth-child(5) { left: 620px; top: 132px; }
.stepping-stones span.glow { color: var(--bog-night); background: var(--foxfire-cyan); box-shadow: 0 0 35px rgba(69, 240, 210, .62); transform: translateY(-8px); }

.jar {
  position: absolute;
  right: 13vw;
  bottom: 12vh;
  width: 155px;
  height: 210px;
  display: grid;
  place-items: center;
  border: 3px solid rgba(69, 240, 210, .55);
  border-radius: 34px 34px 48px 48px;
  color: var(--foxfire-cyan);
  font: 700 1.5rem var(--display);
  background: linear-gradient(rgba(69, 240, 210, .07), rgba(139, 92, 246, .15));
  box-shadow: inset 0 -40px 50px rgba(69, 240, 210, .12), 0 0 40px rgba(69, 240, 210, .2);
}

.sleeping-spores {
  position: absolute;
  inset: 8vh 0 auto 0;
  height: 34vh;
}
.sleeping-spores span {
  position: absolute;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--spore-gold), var(--mushroom-cap));
  box-shadow: 0 0 28px rgba(230, 179, 90, .22);
  animation: sleepyFloat 5s ease-in-out infinite alternate;
}
.sleeping-spores span:nth-child(1) { left: 12%; top: 55%; }
.sleeping-spores span:nth-child(2) { left: 26%; top: 18%; animation-delay: -.8s; }
.sleeping-spores span:nth-child(3) { left: 44%; top: 44%; animation-delay: -1.5s; }
.sleeping-spores span:nth-child(4) { left: 63%; top: 14%; animation-delay: -2.3s; }
.sleeping-spores span:nth-child(5) { left: 78%; top: 50%; animation-delay: -3s; }
.sleeping-spores span:nth-child(6) { left: 88%; top: 20%; animation-delay: -3.7s; }

.drawer-stack {
  position: absolute;
  left: 10vw;
  top: 18vh;
  width: min(390px, 80vw);
  transform: rotate(3deg);
}
.drawer-stack div {
  margin: 0 0 1rem;
  padding: 1.2rem 1.4rem;
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(162, 74, 63, .88), rgba(49, 92, 54, .9));
  border: 1px solid rgba(230, 179, 90, .38);
  font: 700 1.35rem var(--display);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .32);
}
.drawer-stack code { float: right; color: var(--lichen-glow); }

.forest-footer {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(232, 221, 196, .58);
  font-family: var(--mono);
  white-space: nowrap;
}

.reveal-card {
  opacity: 0;
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1), filter .8s ease;
  filter: blur(6px);
}
.reveal-card.is-visible {
  opacity: 1;
  filter: blur(0);
}
.tilted-left.reveal-card:not(.is-visible) { transform: translateY(50px) rotate(-7deg); }
.bark-right.reveal-card:not(.is-visible) { transform: translateY(50px) rotate(7deg); }
.bog-plaque.reveal-card:not(.is-visible) { transform: translateY(70px) rotate(-5deg); }
.canopy-note.reveal-card:not(.is-visible) { transform: translateY(60px) rotate(6deg); }
.cairn-plaque.reveal-card:not(.is-visible) { transform: translateY(60px) rotate(-8deg); }

@keyframes auroraBreath {
  from { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .3; }
  to { transform: translate3d(2%, 1%, 0) scale(1.08); opacity: .48; }
}
@keyframes sporesDrift { to { background-position: 0 420px, 0 360px; } }
@keyframes riseFromShadow { to { transform: translateY(0); } }
@keyframes slowTurn { to { transform: rotate(360deg); } }
@keyframes sleepyFloat { to { transform: translateY(-20px) scale(1.08); filter: brightness(1.18); } }

@media (max-width: 760px) {
  .scene { padding: 28px; }
  .learning-trail { width: 150vw; left: 48%; opacity: .72; }
  .wordmark-wrap { margin-bottom: 16vh; }
  .diagram-ring, .magnifier, .drawer-stack, .stepping-stones { opacity: .55; transform: scale(.72); transform-origin: center; }
  .bark-right, .cairn-plaque, .tilted-left, .bog-plaque { justify-self: center; }
  .leaf-tag { font-size: .72rem; }
  h1 { font-size: clamp(4.2rem, 22vw, 8rem); }
}