:root {
  /* Intersecting IntersectionObserver IntersectionObserver with `threshold: 0.15`. Stagger child elements within each clearing by 100ms using `transition-delay` on nth-child selectors. The overall effect should be organic — like mushrooms emerging from soil IntersectionObserver. Some have small Kalam-font labels beneath them (e.g. IntersectionObserver((entries SourceGraphic" in2="noise" operator="in"/> */
  --deep-earth: #1a1510;
  --forest-floor: #2d2418;
  --bark: #5c4a3a;
  --moss: #4a6741;
  --lichen: #c4a349;
  --spore: #e8dcc8;
  --cap: #8b4513;
  --mycelium: #f0e8d8;
  --purple: #6b5b73;
  --beetle: #0d110a;
}

* { box-sizing: border-box; }
html { background: var(--beetle); scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--spore);
  font-family: "Alegreya", Georgia, serif;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.7;
  letter-spacing: 0.01em;
  background: var(--forest-floor);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: 0.12;
  background-image: radial-gradient(circle at 20% 30%, rgba(196,163,73,.18), transparent 18%), radial-gradient(circle at 75% 60%, rgba(74,103,65,.16), transparent 20%), repeating-linear-gradient(0deg, rgba(240,232,216,.025) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}

.filter-bank { position: absolute; width: 0; height: 0; }
.stratum { position: relative; min-height: 100vh; padding: 14vh 6vw; overflow: hidden; }
h1, h2 { font-family: "Caveat", cursive; line-height: 1.1; letter-spacing: 0.02em; color: var(--mycelium); margin: 0 0 1rem; }
h1 { font-size: clamp(3rem, 8vw, 7rem); text-shadow: 0 .08em 0 rgba(13,17,10,.6); }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
p { max-width: 65ch; margin: 0 0 1rem; }
code { font-family: "Victor Mono", monospace; color: var(--lichen); font-size: .92em; }
.annotation { display: block; font-family: "Kalam", cursive; font-size: clamp(.75rem, 1.2vw, .9rem); color: var(--cap); transform: rotate(-2deg); opacity: .95; }

#spore-field { position: fixed; inset: 0; pointer-events: none; z-index: 10; overflow: hidden; }
.spore { position: absolute; bottom: -8vh; border-radius: 50%; background: radial-gradient(circle, #c4a349 0%, rgba(196,163,73,.4) 35%, transparent 72%); animation: float-up linear infinite; }
@keyframes float-up { 0% { transform: translate3d(0,0,0); } 50% { transform: translate3d(22px,-55vh,0); } 100% { transform: translate3d(-16px,-112vh,0); } }

.moth { position: fixed; top: 31vh; left: 56vw; width: 90px; height: 90px; z-index: 8; pointer-events: none; animation: orbit 8s linear infinite; transform-origin: 45px 45px; }
.moth span, .moth span::before, .moth span::after { position: absolute; content: ""; display: block; }
.moth span { width: 15px; height: 11px; left: 38px; top: 39px; background: var(--beetle); border-radius: 50%; box-shadow: 0 0 9px rgba(196,163,73,.45); }
.moth span::before, .moth span::after { width: 12px; height: 16px; top: -4px; background: rgba(232,220,200,.45); border: 1px solid rgba(196,163,73,.45); }
.moth span::before { left: -9px; border-radius: 80% 20% 70% 30%; transform: rotate(-28deg); }
.moth span::after { right: -9px; border-radius: 20% 80% 30% 70%; transform: rotate(28deg); }
@keyframes orbit { from { transform: rotate(0deg) translateX(40px) rotate(0deg); } to { transform: rotate(360deg) translateX(40px) rotate(-360deg); } }

.canopy-layer { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(180deg, #2d2418 0%, #1a1510 74%, #0d110a 100%); }
.canopy-copy { position: relative; width: min(760px, 84vw); transform: translate(-8vw, -6vh); z-index: 4; }
.subtitle { font-family: "Kalam", cursive; color: var(--lichen); font-size: clamp(1rem, 2vw, 1.45rem); max-width: 42ch; }
.twig-note { position: absolute; top: -2.2rem; left: 1rem; color: var(--moss); }
.specimen-note { margin-left: 18vw; color: var(--cap); }
.forest { position: absolute; left: -5%; right: -5%; bottom: 0; height: 55vh; background-repeat: repeat-x; background-position: bottom; opacity: .88; }
.forest-back { z-index: 1; bottom: 20vh; opacity: .25; background-image: linear-gradient(160deg, transparent 48%, #0d110a 49% 51%, transparent 52%), linear-gradient(200deg, transparent 48%, #0d110a 49% 51%, transparent 52%); background-size: 120px 330px; }
.forest-mid { z-index: 2; bottom: 7vh; opacity: .46; background-image: radial-gradient(ellipse at 50% 100%, #0d110a 0 34%, transparent 35%), linear-gradient(90deg, transparent 47%, #0d110a 48% 52%, transparent 53%); background-size: 160px 380px, 160px 380px; }
.forest-front { z-index: 3; height: 34vh; opacity: .8; background-image: radial-gradient(ellipse at 50% 100%, #4a6741 0 18%, transparent 19%), radial-gradient(ellipse at 60% 100%, #0d110a 0 20%, transparent 21%); background-size: 74px 180px, 102px 230px; }
.hero-network, .network-map, .final-roots { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.dig-cue { position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); z-index: 5; color: var(--lichen); font-family: "Kalam", cursive; text-align: center; animation: bob 2s ease-in-out infinite; }
.dig-cue b { display: block; font-size: 1.5rem; font-weight: 400; }
@keyframes bob { 50% { transform: translate(-50%, 10px); } }

.understory-layer { min-height: 210vh; background: linear-gradient(180deg, #2d2418, #1a1510 70%, #0d110a); }
.floor-layer { min-height: 170vh; background: linear-gradient(180deg, #1a1510, #2d2418 35%, #1a1510 100%); }
.mycelium-layer { min-height: 125vh; background: radial-gradient(circle at 26% 20%, rgba(74,103,65,.18), transparent 34%), linear-gradient(180deg, #1a1510, #0d110a); }
.root-layer { min-height: 55vh; display: grid; place-items: center; background: #1a1510; }

.clearing { position: relative; z-index: 4; width: min(680px, 90vw); margin: 0 0 38vh 8vw; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid rgba(196,163,73,.2); border-radius: 31px 12px 38px 17px; background: rgba(45,36,24,.72); box-shadow: 0 24px 80px rgba(13,17,10,.42), inset 0 0 50px rgba(92,74,58,.16); backdrop-filter: blur(3px); }
.clearing.right { margin-left: auto; margin-right: 8vw; transform: rotate(.7deg); }
.clearing.left { transform: rotate(-.5deg); }
.paper-clearing { color: var(--beetle); background: #f0e8d8; clip-path: polygon(0 3%, 6% 1%, 14% 4%, 24% 2%, 36% 3%, 45% 0, 57% 3%, 70% 1%, 84% 4%, 100% 2%, 98% 97%, 90% 99%, 76% 97%, 62% 100%, 50% 98%, 36% 99%, 23% 96%, 10% 99%, 1% 96%); }
.paper-clearing h2 { color: var(--beetle); }
.paper-clearing::after, pre::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06; filter: url(#paper-grain); background: #5c4a3a; }

pre { position: relative; margin: 1.5rem 0 0; padding: 1.5rem 2rem; overflow: auto; color: var(--beetle); background: var(--mycelium); font-family: "Victor Mono", monospace; font-size: clamp(.85rem, 1.4vw, .95rem); line-height: 1.6; clip-path: polygon(0 5%, 8% 2%, 18% 4%, 29% 1%, 46% 4%, 60% 2%, 78% 5%, 100% 2%, 98% 95%, 85% 98%, 69% 96%, 52% 99%, 34% 96%, 18% 98%, 1% 95%); }
pre code { color: var(--beetle); }.kw { color: var(--moss); font-weight: 700; }.str { color: var(--lichen); }.cm { color: var(--cap); font-style: italic; }

.root-divider { position: relative; z-index: 3; width: 100vw; height: 240px; margin: -16vh 0 26vh -6vw; overflow: visible; }
.draw-path { fill: none; stroke: #4a6741; stroke-width: 1.6px; stroke-linecap: round; stroke-linejoin: round; opacity: .82; }
.draw-path.thin { stroke: #5c4a3a; stroke-width: 1.2px; opacity: .72; }
.draw-path.ready { stroke-dasharray: var(--path-length); stroke-dashoffset: var(--path-length); transition: stroke-dashoffset 2s ease-in-out; }
.draw-path.drawn { stroke-dashoffset: 0; }
.hero-draw { stroke: #c4a349; opacity: .55; }
.network-node { fill: #c4a349; transform-box: fill-box; transform-origin: center; animation: pulse 3s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.3); opacity: .65; } }

.mushroom { position: absolute; width: clamp(68px, 10vw, 104px); filter: drop-shadow(0 8px 10px rgba(13,17,10,.3)); }
.mushroom path:first-child { fill: #8b4513; stroke: #c4a349; stroke-width: 2; }.mushroom circle { fill: #e8dcc8; opacity: .75; }.stem { fill: #e8dcc8; stroke: #5c4a3a; stroke-width: 2; }.ground { fill: none; stroke: #4a6741; stroke-width: 3; }.amanita { right: -2rem; top: -3rem; transform: rotate(9deg); }.morel { left: -3rem; top: -2rem; transform: rotate(-7deg); }.morel-line { fill: none !important; stroke: #c4a349 !important; stroke-width: 3 !important; opacity: .75; }
.mushroom-label, .morel-label { position: absolute; top: -1.3rem; right: 3rem; color: var(--moss); }.morel-label { left: 2rem; right: auto; color: var(--cap); }

.deep-card { position: relative; z-index: 4; width: min(610px, 88vw); margin: 12vh 0 14vh 10vw; padding: 2rem; border: 1px solid rgba(240,232,216,.18); border-radius: 20px; background: rgba(26,21,16,.56); backdrop-filter: blur(4px); box-shadow: 0 0 70px rgba(74,103,65,.14); }
.deep-card.offset { margin-left: auto; margin-right: 10vw; }
.root-copy { position: relative; z-index: 4; text-align: center; width: min(680px, 90vw); padding: 2rem; }
.root-copy p { margin-left: auto; margin-right: auto; }.footer-note { color: rgba(232,220,200,.7); font-family: "Kalam", cursive; }

.reveal { opacity: 0; translate: 0 22px; transition: opacity .8s ease, translate .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; translate: 0 0; }
a, code { transition: color .25s ease, background .25s ease; }
code:hover { color: var(--mycelium); background: linear-gradient(135deg, #4a6741, #c4a349); }

@media (max-width: 720px) {
  .stratum { padding: 11vh 5vw; }
  .canopy-copy { transform: translate(0, -4vh); }
  .clearing, .clearing.right, .deep-card, .deep-card.offset { margin-left: auto; margin-right: auto; }
  .moth { display: none; }
}