:root {
  --night-soil: #0B0711;
  --black-violet: #1A0F2E;
  --emerald: #00B86B;
  --amethyst: #7B2FF7;
  --garnet: #9B123F;
  --sapphire: #1E4DFF;
  --firefly: #F6D35B;
  --dew: #E9FFF7;
  --display: "Bowlby One SC", Impact, Haettenschweiler, "Arial Black", sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --body: "DM Sans", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--night-soil);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--dew);
  font-family: var(--body);
  background:
    radial-gradient(circle at 15% 12%, rgba(123, 47, 247, 0.28), transparent 34vw),
    radial-gradient(circle at 87% 23%, rgba(30, 77, 255, 0.22), transparent 31vw),
    radial-gradient(circle at 48% 90%, rgba(155, 18, 63, 0.22), transparent 40vw),
    linear-gradient(180deg, var(--night-soil) 0%, var(--black-violet) 46%, #050309 100%);
}

#sporefield,
.noise,
.moon-haze {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

#sporefield { z-index: 9; mix-blend-mode: screen; }

.noise {
  z-index: 2;
  opacity: .16;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(233,255,247,.5) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 80%, rgba(246,211,91,.45) 0 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 44%, rgba(255,255,255,.035) 45% 46%, transparent 47% 100%);
  background-size: 73px 81px, 97px 101px, 13px 13px;
}

.moon-haze {
  z-index: 1;
  background:
    radial-gradient(circle at 76% 8%, rgba(233,255,247,.25) 0 0.8rem, rgba(246,211,91,.12) 0.85rem 1.8rem, transparent 1.9rem),
    radial-gradient(circle at 77% 9%, rgba(30,77,255,.28), transparent 19rem);
  filter: blur(.2px);
}

.trail-nav {
  position: fixed;
  z-index: 20;
  top: 1rem;
  right: 1rem;
  display: grid;
  gap: .55rem;
}

.trail-marker,
.carved-tag {
  color: var(--dew);
  text-decoration: none;
  font: 700 .72rem/1 var(--body);
  letter-spacing: .18em;
  text-transform: uppercase;
  background: linear-gradient(135deg, rgba(26,15,46,.9), rgba(11,7,17,.72));
  border: 1px solid rgba(246,211,91,.48);
  box-shadow: 0 0 22px rgba(246,211,91,.12), inset 0 0 18px rgba(123,47,247,.18);
  padding: .75rem .9rem;
  clip-path: polygon(8% 0, 100% 8%, 92% 100%, 0 88%);
  transition: transform .35s ease, border-color .35s ease, color .35s ease;
}

.trail-marker:hover,
.carved-tag:hover {
  transform: scale(1.08) rotate(-1deg);
  color: var(--firefly);
  border-color: var(--emerald);
}

.scene {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 5rem);
}

.scene::before {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: -2;
  background:
    radial-gradient(circle at 35% 22%, rgba(0,184,107,.13), transparent 23rem),
    radial-gradient(circle at 70% 70%, rgba(155,18,63,.20), transparent 28rem);
  transform: translateY(calc(var(--scroll-shift, 0) * -18px));
}

.scene-hero {
  align-content: end;
  background: radial-gradient(ellipse at bottom, rgba(0,184,107,.12), transparent 56%), linear-gradient(180deg, rgba(11,7,17,.4), rgba(11,7,17,.98));
}

.giant-cap {
  position: absolute;
  top: 6vh;
  left: 50%;
  width: min(94vw, 1180px);
  height: min(42vh, 390px);
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  padding: 3rem;
  background:
    radial-gradient(ellipse at 45% 18%, rgba(246,211,91,.33), transparent 12%),
    radial-gradient(ellipse at 20% 65%, rgba(0,184,107,.28), transparent 22%),
    linear-gradient(135deg, rgba(123,47,247,.96), rgba(155,18,63,.94) 62%, rgba(26,15,46,.98));
  border: 1px solid rgba(233,255,247,.22);
  border-radius: 50% 50% 11% 11% / 82% 82% 18% 18%;
  box-shadow: 0 0 90px rgba(123,47,247,.35), inset 0 -30px 50px rgba(11,7,17,.48);
  overflow: hidden;
  animation: capInk 5s ease-in-out infinite alternate;
}

.giant-cap::before {
  content: "";
  position: absolute;
  inset: 18% -10% auto;
  height: 115%;
  background: repeating-radial-gradient(ellipse at 50% -15%, transparent 0 28px, rgba(233,255,247,.14) 30px 33px, transparent 35px 58px);
  opacity: .5;
}

.ink-kicker,
.timestamp {
  margin: 0;
  color: var(--firefly);
  font: 700 .78rem/1 var(--body);
  letter-spacing: .22em;
  text-transform: uppercase;
}

.masthead {
  position: relative;
  z-index: 1;
  margin: 0;
  width: 100%;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(3rem, 10vw, 8.5rem);
  line-height: .82;
  letter-spacing: -.06em;
  color: var(--dew);
  text-shadow: 0 0 12px rgba(233,255,247,.58), 0 0 34px rgba(0,184,107,.42), 0 7px 0 rgba(11,7,17,.45);
  mix-blend-mode: screen;
}

.cap-rim {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 10%;
  height: 24%;
  border-radius: 50%;
  background: repeating-linear-gradient(90deg, rgba(246,211,91,.28) 0 4px, transparent 4px 18px), linear-gradient(180deg, rgba(155,18,63,.08), rgba(11,7,17,.62));
}

.leaf-label,
.gill-dispatch,
.root-note,
.moon-cap,
.dew-lens {
  position: relative;
  z-index: 3;
  background: linear-gradient(135deg, rgba(11,7,17,.74), rgba(26,15,46,.74));
  border: 1px solid rgba(0,184,107,.32);
  box-shadow: 0 20px 80px rgba(0,0,0,.45), inset 0 0 30px rgba(123,47,247,.14);
  backdrop-filter: blur(10px);
}

.hero-copy {
  justify-self: start;
  align-self: end;
  width: min(27rem, 75vw);
  margin-bottom: 17vh;
  padding: 1.35rem;
  clip-path: polygon(4% 0, 100% 14%, 91% 100%, 0 84%);
}

.hero-copy span {
  color: var(--emerald);
  font: 900 1.1rem/1.1 var(--serif);
}

.hero-copy p,
.gill-dispatch p,
.root-note p,
.moon-cap p {
  color: rgba(233,255,247,.82);
  line-height: 1.65;
}

.carved-tag {
  position: absolute;
  z-index: 10;
  bottom: 8vh;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
}

.carved-tag:hover { transform: translateX(-50%) scale(1.08) rotate(-1deg); }

.mushroom-bed {
  position: absolute;
  inset: auto 0 0;
  height: 48vh;
  z-index: 4;
}

.mushroom {
  position: absolute;
  bottom: -3vh;
  width: 16rem;
  height: 22rem;
  transform-origin: 50% 100%;
  transition: transform .55s cubic-bezier(.18,.89,.22,1.35), filter .55s ease;
  cursor: pointer;
}

.mushroom::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 22%;
  height: 72%;
  transform: translateX(-50%);
  border-radius: 48% 42% 10% 12%;
  background: linear-gradient(90deg, #09050e, var(--black-violet), #050309);
  box-shadow: inset 12px 0 12px rgba(233,255,247,.04);
}

.mushroom span {
  position: absolute;
  left: 50%;
  top: 2%;
  width: 100%;
  height: 42%;
  transform: translateX(-50%);
  border-radius: 55% 55% 14% 14% / 82% 82% 18% 18%;
  background: radial-gradient(circle at 34% 25%, rgba(246,211,91,.65) 0 5%, transparent 6%), linear-gradient(135deg, var(--amethyst), var(--garnet) 70%, var(--black-violet));
  box-shadow: 0 0 55px rgba(123,47,247,.35), inset 0 -20px 18px rgba(11,7,17,.48);
}

.mushroom span::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 3%;
  height: 30%;
  border-radius: 50%;
  background: repeating-linear-gradient(90deg, rgba(246,211,91,.42) 0 3px, transparent 3px 13px);
  opacity: 0;
  transition: opacity .45s ease;
}

.mushroom:hover {
  transform: scale(1.055) translateY(-1.2vh);
  filter: drop-shadow(0 0 24px rgba(0,184,107,.45));
}

.mushroom:hover span::after { opacity: .85; }
.mushroom.huge { left: -2rem; width: 28rem; height: 35rem; }
.mushroom.tall { left: 42%; width: 15rem; height: 30rem; }
.mushroom.small { left: 68%; width: 10rem; height: 16rem; opacity: .75; }
.mushroom.bent { right: 3rem; width: 19rem; height: 26rem; transform: rotate(5deg); }
.mushroom.bent:hover { transform: rotate(3deg) scale(1.055) translateY(-1.2vh); }

.grass {
  position: absolute;
  inset: auto 0 0;
  height: 19vh;
  z-index: 8;
  background: repeating-linear-gradient(102deg, transparent 0 16px, rgba(5,3,9,.96) 17px 24px, transparent 25px 46px);
  clip-path: polygon(0 100%, 0 40%, 3% 100%, 6% 28%, 9% 100%, 12% 36%, 15% 100%, 18% 22%, 21% 100%, 25% 35%, 28% 100%, 32% 18%, 36% 100%, 40% 30%, 44% 100%, 49% 26%, 54% 100%, 58% 34%, 63% 100%, 68% 18%, 73% 100%, 78% 34%, 84% 100%, 89% 24%, 94% 100%, 100% 31%, 100% 100%);
}

.thorn-frame {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12vw;
  z-index: 5;
  opacity: .75;
  background: repeating-linear-gradient(74deg, transparent 0 34px, rgba(5,3,9,.9) 35px 43px, transparent 44px 80px);
}
.thorn-left { left: 0; clip-path: polygon(0 0, 80% 20%, 25% 42%, 90% 70%, 0 100%); }
.thorn-right { right: 0; transform: scaleX(-1); clip-path: polygon(0 0, 80% 20%, 25% 42%, 90% 70%, 0 100%); }

.scene-gills { background: linear-gradient(180deg, rgba(11,7,17,.92), rgba(26,15,46,.96)); }
.scene-roots { background: radial-gradient(circle at 50% 64%, rgba(0,184,107,.16), transparent 30rem), linear-gradient(180deg, #0a0610, #050309); }
.scene-editor { background: radial-gradient(circle at 50% 30%, rgba(30,77,255,.25), transparent 30rem), linear-gradient(180deg, #050309, var(--night-soil)); }

.act-title {
  position: absolute;
  top: 8vh;
  left: clamp(1rem, 5vw, 5rem);
  font-family: var(--display);
  font-size: clamp(2.5rem, 8vw, 8rem);
  line-height: .82;
  letter-spacing: -.05em;
  color: rgba(233,255,247,.08);
  -webkit-text-stroke: 1px rgba(246,211,91,.36);
}

.gill-map,
.root-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.gill-map path {
  fill: none;
  stroke: url(#none);
  stroke: rgba(246,211,91,.36);
  stroke-width: 2.5;
  stroke-dasharray: 8 22;
  filter: drop-shadow(0 0 10px rgba(246,211,91,.35));
  animation: dashDrift 18s linear infinite;
}

.gill-dispatch,
.root-note,
.moon-cap {
  width: min(46rem, 86vw);
  padding: clamp(1.6rem, 4vw, 3rem);
  border-radius: 46% 54% 14% 12% / 13% 17% 12% 16%;
  transition: transform .55s cubic-bezier(.18,.89,.22,1.35), box-shadow .55s ease;
}

.gill-dispatch:hover,
.root-note:hover,
.moon-cap:hover {
  transform: scale(1.035);
  box-shadow: 0 20px 100px rgba(0,184,107,.22), inset 0 0 45px rgba(246,211,91,.1);
}

h2 {
  margin: .7rem 0 0;
  font-family: var(--serif);
  font-size: clamp(2.1rem, 5vw, 5.8rem);
  line-height: .93;
  color: var(--dew);
}

.dew-lens {
  position: absolute;
  right: 8vw;
  bottom: 18vh;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background: radial-gradient(circle at 36% 30%, rgba(233,255,247,.7), rgba(30,77,255,.18) 36%, rgba(11,7,17,.42) 65%);
  border-color: rgba(233,255,247,.45);
}

.dew-lens span { color: var(--firefly); text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; }
.dew-lens strong { font-family: var(--serif); font-size: 1.35rem; }

.moth-bracket {
  position: absolute;
  width: 18vw;
  height: 30vh;
  opacity: .18;
  background: radial-gradient(ellipse at center, var(--dew), transparent 64%);
  filter: blur(1px);
}
.left-wing { left: 8vw; top: 30vh; border-radius: 80% 12% 80% 20%; transform: rotate(-20deg); }
.right-wing { right: 8vw; top: 22vh; border-radius: 12% 80% 20% 80%; transform: rotate(25deg); }

.root-network path {
  fill: none;
  stroke: rgba(0,184,107,.48);
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 12px rgba(0,184,107,.38));
  stroke-dasharray: 18 18;
  animation: dashDrift 16s linear infinite reverse;
}
.root-network .primary { stroke: rgba(30,77,255,.68); stroke-width: 5; }

.archive-tags {
  position: absolute;
  bottom: 10vh;
  left: 8vw;
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
}

.archive-tags span {
  color: var(--firefly);
  border: 1px solid rgba(246,211,91,.35);
  padding: .7rem .9rem;
  background: rgba(11,7,17,.6);
  clip-path: polygon(6% 0, 100% 12%, 94% 100%, 0 88%);
}

.moon-cap {
  text-align: center;
  border-radius: 50% 50% 18% 18% / 30% 30% 12% 12%;
  background: radial-gradient(ellipse at top, rgba(233,255,247,.12), transparent 45%), linear-gradient(135deg, rgba(123,47,247,.78), rgba(11,7,17,.82));
}

.final-ring {
  position: absolute;
  inset: auto 0 5vh;
  height: 22vh;
  z-index: 2;
}

.final-ring i {
  position: absolute;
  left: calc(50% + var(--x, 0px));
  bottom: var(--b, 0);
  width: 5rem;
  height: 7rem;
  border-radius: 50% 50% 10% 10% / 70% 70% 15% 15%;
  background: linear-gradient(135deg, var(--amethyst), var(--garnet));
  box-shadow: 0 0 26px rgba(123,47,247,.32);
}
.final-ring i:nth-child(1) { --x: -25rem; --b: 0; transform: scale(.75); }
.final-ring i:nth-child(2) { --x: -17rem; --b: 3rem; transform: scale(.55); }
.final-ring i:nth-child(3) { --x: -9rem; --b: 1rem; transform: scale(.82); }
.final-ring i:nth-child(4) { --x: 1rem; --b: 4rem; transform: scale(.5); }
.final-ring i:nth-child(5) { --x: 9rem; --b: 1rem; transform: scale(.8); }
.final-ring i:nth-child(6) { --x: 16rem; --b: 3rem; transform: scale(.58); }
.final-ring i:nth-child(7) { --x: 23rem; --b: 0; transform: scale(.75); }
.final-ring i:nth-child(8) { --x: 30rem; --b: 2rem; transform: scale(.45); }

.dispatch-chip {
  position: fixed;
  z-index: 30;
  left: 0;
  top: 0;
  max-width: 18rem;
  pointer-events: none;
  color: var(--night-soil);
  background: linear-gradient(135deg, var(--firefly), var(--emerald));
  padding: .65rem .8rem;
  font: 700 .76rem/1.25 var(--body);
  letter-spacing: .08em;
  text-transform: uppercase;
  clip-path: polygon(5% 0, 100% 11%, 94% 100%, 0 88%);
  box-shadow: 0 0 28px rgba(246,211,91,.45);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.6);
  transition: opacity .28s ease, transform .45s cubic-bezier(.18,.89,.22,1.35);
}
.dispatch-chip.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

@keyframes capInk {
  from { filter: saturate(1) brightness(.88); }
  to { filter: saturate(1.25) brightness(1.08); }
}

@keyframes dashDrift { to { stroke-dashoffset: -240; } }

@media (max-width: 760px) {
  .trail-nav { grid-template-columns: repeat(4, auto); right: .5rem; left: .5rem; justify-content: center; }
  .trail-marker { padding: .62rem .58rem; font-size: .62rem; }
  .giant-cap { top: 10vh; height: 34vh; padding: 1.3rem; }
  .masthead { font-size: clamp(2.2rem, 15vw, 4.3rem); overflow-wrap: anywhere; }
  .hero-copy { width: 86vw; margin-bottom: 24vh; }
  .mushroom.huge { left: -8rem; }
  .mushroom.tall { left: 36%; }
  .mushroom.bent { right: -5rem; }
  .dew-lens { display: none; }
  .archive-tags { left: 1rem; right: 1rem; bottom: 5vh; }
  .final-ring { transform: scale(.65); transform-origin: 50% 100%; }
}