:root {
  /* Compliance phrase: Interprets “stream” as an underground river; JetBrains Mono sparingly for signal labels. */
  --abyss: #05070A;
  --basalt: #12181A;
  --cyan: #5EF6D2;
  --lichen: #B7F044;
  --amber: #E6A23C;
  --violet: #3D245C;
  --umber: #4A2E1C;
  --pearl: #D8E7DD;
  --display: "Unbounded", "Arial Black", Impact, system-ui, sans-serif;
  --copy: "Alegreya Sans", "Trebuchet MS", Candara, system-ui, sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --mx: 50vw;
  --my: 50vh;
  --scroll: 0;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--pearl);
  font-family: var(--copy);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 20% calc(var(--scroll) * 12% + 8%), rgba(94, 246, 210, .12), transparent 18vw),
    radial-gradient(circle at 80% calc(var(--scroll) * 20% + 22%), rgba(61, 36, 92, .55), transparent 28vw),
    linear-gradient(180deg, var(--abyss), var(--basalt) 20%, #07090c 45%, #09060a 72%, #061412 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(circle at var(--mx) var(--my), transparent 0 72px, rgba(5, 7, 10, .22) 140px, rgba(5, 7, 10, .74) 56vw),
    repeating-linear-gradient(96deg, rgba(216, 231, 221, .025) 0 1px, transparent 1px 13px);
  mix-blend-mode: screen;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .34;
  background-image:
    radial-gradient(circle at 23% 19%, rgba(216, 231, 221, .11) 0 1px, transparent 1.5px),
    radial-gradient(circle at 71% 44%, rgba(230, 162, 60, .08) 0 1px, transparent 1.5px),
    radial-gradient(circle at 39% 78%, rgba(94, 246, 210, .08) 0 1px, transparent 1.5px);
  background-size: 41px 53px, 67px 61px, 89px 79px;
}

.lantern {
  position: fixed;
  left: var(--mx);
  top: var(--my);
  width: 22rem;
  height: 22rem;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 162, 60, .20), rgba(94, 246, 210, .09) 32%, transparent 68%);
  filter: blur(10px);
  opacity: .72;
}

.spores {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.spore {
  position: absolute;
  width: var(--s);
  height: var(--s);
  left: var(--x);
  top: 105vh;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 14px var(--c);
  opacity: .8;
  animation: floatSpore var(--d) linear infinite;
  animation-delay: var(--delay);
}

.understream {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 5;
  overflow: visible;
  pointer-events: none;
  filter: url(#water-shiver) drop-shadow(0 0 12px rgba(94, 246, 210, .78));
}

.stream-line,
.stream-shadow,
.stream-branch {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stream-shadow {
  stroke: rgba(94, 246, 210, .13);
  stroke-width: 9;
}

.stream-line {
  stroke: url(#streamGlow);
  stroke-width: calc(1.8px + var(--scroll) * 3.2px);
  stroke-dasharray: 900;
  stroke-dashoffset: calc(900 - var(--scroll) * 900);
}

.stream-branch {
  stroke: rgba(183, 240, 68, .58);
  stroke-width: 1.5;
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
}

.depth-map {
  position: fixed;
  right: clamp(1rem, 3vw, 2.5rem);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: .75rem;
  z-index: 9;
  font-family: var(--mono);
}

.depth-dot {
  color: rgba(216, 231, 221, .55);
  text-decoration: none;
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: .6rem;
  transition: color .35s, transform .35s;
}

.depth-dot::before {
  content: attr(data-depth);
  padding: .28rem .45rem;
  color: var(--cyan);
  border: 1px solid rgba(94, 246, 210, .33);
  background: rgba(5, 7, 10, .72);
  clip-path: polygon(8% 0, 100% 12%, 91% 100%, 0 86%);
}

.depth-dot.is-active {
  color: var(--lichen);
  transform: translateX(-.35rem);
}

.descent {
  position: relative;
  z-index: 6;
}

.chamber {
  min-height: 102vh;
  position: relative;
  overflow: hidden;
  padding: clamp(5rem, 8vw, 8rem) clamp(1.2rem, 6vw, 7rem);
  border-top: 1px solid rgba(216, 231, 221, .05);
  clip-path: polygon(0 0, 100% 2.8%, 100% 95%, 74% 100%, 45% 97%, 0 100%);
}

.chamber::before,
.chamber::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.chamber::before {
  inset: -12%;
  background:
    repeating-radial-gradient(ellipse at 12% 30%, rgba(216, 231, 221, .045) 0 1px, transparent 2px 18px),
    repeating-linear-gradient(166deg, rgba(94, 246, 210, .04) 0 1px, transparent 1px 31px);
  opacity: .34;
  transform: translateY(calc(var(--scroll) * -60px));
}

.chamber::after {
  left: -10%;
  right: -10%;
  top: -2rem;
  height: 7rem;
  background: linear-gradient(180deg, rgba(5, 7, 10, .95), rgba(5, 7, 10, 0));
  clip-path: polygon(0 0, 8% 72%, 17% 19%, 31% 68%, 44% 14%, 59% 77%, 70% 29%, 85% 62%, 100% 4%, 100% 0);
}

.scene-copy {
  position: relative;
  max-width: 35rem;
  padding: 1.35rem 1.45rem 1.5rem;
  background: linear-gradient(135deg, rgba(18, 24, 26, .78), rgba(5, 7, 10, .58));
  border: 1px solid rgba(216, 231, 221, .11);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .45), inset 0 0 30px rgba(94, 246, 210, .035);
  clip-path: polygon(3% 0, 98% 2%, 100% 86%, 94% 100%, 0 96%, 1% 12%);
}

.signal-tag {
  margin: 0 0 .85rem;
  color: var(--cyan);
  font: .72rem/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -.07em;
  line-height: .84;
  text-transform: lowercase;
  text-shadow: 0 0 22px rgba(94, 246, 210, .16), 0 5px 0 rgba(74, 46, 28, .65);
}

h1 {
  font-size: clamp(3.3rem, 12vw, 9.5rem);
}

h1 span { display: block; }
h1 span:nth-child(2) { transform: translateX(8%); color: var(--cyan); }
h1 span:nth-child(3) { transform: translateX(2%); color: var(--lichen); font-size: .72em; }

h2 {
  font-size: clamp(3.2rem, 8vw, 7rem);
  color: var(--pearl);
}

.scene-copy p:not(.signal-tag) {
  font-size: clamp(1.08rem, 2vw, 1.45rem);
  line-height: 1.35;
  margin: 1rem 0 0;
  color: rgba(216, 231, 221, .84);
}

.sinkhole {
  background:
    radial-gradient(ellipse at 26% 15%, rgba(94, 246, 210, .12), transparent 22%),
    radial-gradient(ellipse at 50% 12%, rgba(5, 7, 10, .2) 0 13%, var(--abyss) 14% 27%, transparent 28%),
    linear-gradient(180deg, #020304, var(--abyss) 55%, var(--basalt));
  display: grid;
  align-items: center;
}

.hero-copy { margin-left: clamp(1rem, 12vw, 9rem); margin-top: 6vh; }

.rock-mouth {
  position: absolute;
  left: 14%;
  top: 6%;
  width: min(70vw, 52rem);
  height: 34vh;
  border: 2px solid rgba(216, 231, 221, .11);
  border-radius: 47% 53% 55% 45% / 36% 40% 60% 64%;
  box-shadow: inset 0 0 70px #000, 0 0 55px rgba(94, 246, 210, .08);
  transform: rotate(-6deg);
}

.crack { position: absolute; width: 2px; background: rgba(94, 246, 210, .28); transform-origin: top; }
.c1 { height: 45%; left: 32%; top: 22%; transform: rotate(24deg); }
.c2 { height: 33%; left: 55%; top: 16%; transform: rotate(-38deg); }
.c3 { height: 28%; left: 72%; top: 40%; transform: rotate(51deg); }

.glyph-ring { position: absolute; right: 18%; bottom: 18%; width: 10rem; height: 10rem; border: 1px dashed rgba(230, 162, 60, .35); border-radius: 50%; animation: slowSpin 18s linear infinite; }
.glyph-ring i { position: absolute; width: .7rem; height: .7rem; background: var(--amber); border-radius: 50%; box-shadow: 0 0 16px var(--amber); }
.glyph-ring i:nth-child(1) { left: 48%; top: -.35rem; } .glyph-ring i:nth-child(2) { right: -.35rem; top: 48%; } .glyph-ring i:nth-child(3) { left: 48%; bottom: -.35rem; } .glyph-ring i:nth-child(4) { left: -.35rem; top: 48%; }

.root { background: radial-gradient(circle at 78% 22%, rgba(74, 46, 28, .82), transparent 29%), linear-gradient(155deg, var(--basalt), #08090b 58%, #0c0706); }
.root-copy { margin-left: auto; margin-right: 12vw; margin-top: 17vh; }
.root-tangle span { position: absolute; top: -10%; bottom: -10%; width: 3px; background: linear-gradient(var(--umber), var(--amber), var(--umber)); border-radius: 999px; filter: drop-shadow(0 0 7px rgba(230, 162, 60, .3)); animation: rootTwitch 4s ease-in-out infinite; }
.root-tangle span:nth-child(1) { left: 8%; transform: rotate(12deg); } .root-tangle span:nth-child(2) { left: 17%; transform: rotate(-8deg); animation-delay: -.8s; } .root-tangle span:nth-child(3) { left: 28%; transform: rotate(17deg); animation-delay: -1.4s; } .root-tangle span:nth-child(4) { right: 24%; transform: rotate(-14deg); animation-delay: -.3s; } .root-tangle span:nth-child(5) { right: 12%; transform: rotate(7deg); animation-delay: -2s; } .root-tangle span:nth-child(6) { right: 36%; transform: rotate(22deg); animation-delay: -1s; }
.rope-tag, .stone-marker { position: absolute; z-index: 2; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); padding: .8rem 1rem; background: rgba(74, 46, 28, .72); border: 1px solid rgba(230, 162, 60, .35); transform: rotate(-7deg); clip-path: polygon(0 7%, 94% 0, 100% 82%, 10% 100%); }
.rope-tag { left: 13%; top: 25%; } .marker-a { left: 8%; bottom: 13%; } .marker-b { right: 15%; bottom: 17%; color: var(--lichen); border-color: rgba(183, 240, 68, .35); }
.contour { position: absolute; width: 28rem; height: 28rem; border-radius: 44% 56% 61% 39%; border: 1px solid rgba(94, 246, 210, .12); box-shadow: inset 0 0 0 22px rgba(94, 246, 210, .025), inset 0 0 0 47px rgba(94, 246, 210, .02); }
.contour-left { left: -8rem; bottom: 7rem; }

.fungal { background: radial-gradient(circle at 25% 45%, rgba(183, 240, 68, .18), transparent 24%), radial-gradient(circle at 73% 62%, rgba(94, 246, 210, .13), transparent 24%), linear-gradient(180deg, #080a0b, #111915 60%, #07080a); }
.fungal-copy { margin: 13vh 0 0 9vw; }
.mushroom-field span { position: absolute; display: block; background: radial-gradient(ellipse at center top, var(--lichen), var(--cyan) 56%, rgba(61, 36, 92, .95) 57%); border-radius: 60% 60% 18% 18%; box-shadow: 0 0 35px rgba(183, 240, 68, .45); animation: capPulse 3.2s ease-in-out infinite; }
.mushroom-field.field-bright span { filter: brightness(1.35) saturate(1.2); box-shadow: 0 0 48px rgba(183, 240, 68, .65), 0 0 70px rgba(94, 246, 210, .24); }
.cap-1 { width: 8rem; height: 4rem; right: 12%; top: 20%; } .cap-2 { width: 5rem; height: 2.7rem; right: 28%; top: 33%; animation-delay: -.5s !important; } .cap-3 { width: 11rem; height: 5rem; right: 18%; bottom: 18%; animation-delay: -1s !important; } .cap-4 { width: 6rem; height: 3rem; left: 7%; bottom: 25%; animation-delay: -1.6s !important; } .cap-5 { width: 3.8rem; height: 2rem; left: 28%; top: 18%; animation-delay: -2.1s !important; } .cap-6 { width: 7rem; height: 3.3rem; left: 46%; bottom: 10%; animation-delay: -.9s !important; }
.gill-divider { position: absolute; inset: auto 0 0; height: 18vh; background: repeating-radial-gradient(ellipse at 50% 0, rgba(183, 240, 68, .17) 0 2px, transparent 3px 22px); opacity: .8; }

.blindfish { background: linear-gradient(90deg, #07080b, #111a1b 25%, #05070A 55%, #101313); min-height: 108vh; clip-path: polygon(0 7%, 100% 0, 100% 90%, 88% 96%, 42% 100%, 0 94%); }
.fish-copy { margin-left: auto; margin-top: 22vh; margin-right: 8vw; }
.low-tunnel { position: absolute; left: -5%; right: -5%; top: 42%; height: 19vh; background: linear-gradient(180deg, transparent, rgba(94, 246, 210, .09), transparent); border-top: 1px solid rgba(94, 246, 210, .16); border-bottom: 1px solid rgba(94, 246, 210, .12); transform: rotate(-2deg); }
.fish { position: absolute; width: 7rem; height: 1.9rem; background: var(--pearl); opacity: .34; border-radius: 70% 30% 30% 70%; filter: blur(.2px) drop-shadow(0 0 11px rgba(216, 231, 221, .3)); animation: fishPass 14s linear infinite; }
.fish::after { content: ""; position: absolute; right: -1.3rem; top: .25rem; border-left: 1.6rem solid var(--pearl); border-top: .7rem solid transparent; border-bottom: .7rem solid transparent; }
.fish-one { left: -12rem; top: 48%; } .fish-two { left: -18rem; top: 58%; transform: scale(.62); animation-delay: -5s; } .fish-three { left: -16rem; top: 36%; transform: scale(.42); animation-delay: -9s; }
.waveform { position: absolute; left: 8%; bottom: 18%; display: flex; gap: .55rem; align-items: end; height: 7rem; }
.waveform span { width: .55rem; height: var(--h, 3rem); background: var(--cyan); box-shadow: 0 0 14px var(--cyan); animation: wavePeak 1.25s ease-in-out infinite; }
.waveform span:nth-child(1) { --h: 2rem; } .waveform span:nth-child(2) { --h: 5rem; animation-delay: -.2s; } .waveform span:nth-child(3) { --h: 3.2rem; animation-delay: -.4s; } .waveform span:nth-child(4) { --h: 6.7rem; animation-delay: -.6s; } .waveform span:nth-child(5) { --h: 2.7rem; animation-delay: -.8s; } .waveform span:nth-child(6) { --h: 4.8rem; animation-delay: -1s; } .waveform span:nth-child(7) { --h: 2rem; animation-delay: -1.2s; }

.archive { background: radial-gradient(ellipse at center 62%, #000 0 18%, rgba(5, 7, 10, .5) 19% 31%, transparent 32%), linear-gradient(180deg, #08070a, #05070A 75%, #090c0c); }
.archive-copy { margin: 10vh 0 0 13vw; }
.obsidian-pool { position: absolute; left: 18%; right: 12%; bottom: 9%; height: 36vh; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(94, 246, 210, .22), rgba(61, 36, 92, .25) 36%, #000 68%); box-shadow: inset 0 0 70px #000, 0 0 80px rgba(94, 246, 210, .15); transform: rotate(-4deg); overflow: hidden; }
.obsidian-pool span { position: absolute; inset: 20% 10%; border-radius: 50%; border: 1px solid rgba(94, 246, 210, .23); animation: dripRing 4s ease-out infinite; }
.obsidian-pool span:nth-child(2) { animation-delay: -1.3s; } .obsidian-pool span:nth-child(3) { animation-delay: -2.6s; }
.shards i { position: absolute; padding: .8rem 1.1rem; background: linear-gradient(135deg, rgba(216, 231, 221, .12), rgba(94, 246, 210, .05)); border: 1px solid rgba(216, 231, 221, .15); font: .72rem var(--mono); color: var(--pearl); text-transform: uppercase; clip-path: polygon(17% 0, 100% 24%, 80% 100%, 0 67%); animation: shardFloat 6s ease-in-out infinite; }
.shards i:nth-child(1) { right: 18%; top: 18%; } .shards i:nth-child(2) { right: 32%; top: 39%; animation-delay: -1s; } .shards i:nth-child(3) { left: 18%; bottom: 22%; animation-delay: -2s; } .shards i:nth-child(4) { right: 12%; bottom: 17%; animation-delay: -3s; }

.glowbelow { min-height: 112vh; background: radial-gradient(ellipse at 50% 74%, rgba(94, 246, 210, .52), rgba(183, 240, 68, .20) 22%, rgba(61, 36, 92, .16) 44%, transparent 67%), linear-gradient(180deg, #05070A, #071211 100%); clip-path: polygon(0 0, 30% 4%, 60% 0, 100% 6%, 100% 100%, 0 100%); }
.final-copy { margin: 10vh auto 0; text-align: left; }
.cavern-arches span { position: absolute; bottom: -20%; border: 2px solid rgba(94, 246, 210, .12); border-bottom: none; border-radius: 50% 50% 0 0; box-shadow: inset 0 0 60px rgba(94, 246, 210, .04); }
.cavern-arches span:nth-child(1) { left: 10%; width: 80%; height: 88%; } .cavern-arches span:nth-child(2) { left: 23%; width: 54%; height: 66%; } .cavern-arches span:nth-child(3) { left: 36%; width: 28%; height: 46%; }
.broadcast-pool { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); width: min(88vw, 62rem); height: 18rem; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(94, 246, 210, .33), rgba(5, 7, 10, .84) 62%); box-shadow: 0 0 100px rgba(94, 246, 210, .3), inset 0 0 80px #000; overflow: hidden; }
.broadcast-pool::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 12px, rgba(216, 231, 221, .08) 13px 14px); animation: rippleSlide 3s linear infinite; }
.domain-name, .domain-reflection { position: relative; font-family: var(--display); font-weight: 900; font-size: clamp(1.7rem, 6vw, 5rem); letter-spacing: -.06em; color: var(--cyan); text-shadow: 0 0 24px rgba(94, 246, 210, .7); }
.domain-reflection { position: absolute; top: 52%; transform: scaleY(-1); opacity: .22; filter: blur(1px); color: var(--lichen); }
.lichen-compass { position: absolute; right: 10%; top: 20%; width: 9rem; height: 9rem; border: 1px solid rgba(183, 240, 68, .3); border-radius: 50%; animation: slowSpin 22s linear infinite reverse; }
.lichen-compass span { position: absolute; width: .8rem; height: .8rem; border-radius: 50%; background: var(--lichen); box-shadow: 0 0 18px var(--lichen); }
.lichen-compass span:nth-child(1) { left: 50%; top: -.4rem; } .lichen-compass span:nth-child(2) { right: -.4rem; top: 50%; } .lichen-compass span:nth-child(3) { left: 50%; bottom: -.4rem; } .lichen-compass span:nth-child(4) { left: -.4rem; top: 50%; }

.is-revealed .scene-copy { animation: chamberReveal .8s cubic-bezier(.2, .9, .1, 1) both; }

@keyframes floatSpore { from { transform: translateY(0) translateX(0); opacity: 0; } 10%, 75% { opacity: .85; } to { transform: translateY(-125vh) translateX(var(--drift)); opacity: 0; } }
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes rootTwitch { 0%, 100% { filter: drop-shadow(0 0 4px rgba(230, 162, 60, .15)); } 50% { filter: drop-shadow(0 0 14px rgba(94, 246, 210, .35)); } }
@keyframes capPulse { 0%, 100% { filter: brightness(.7); transform: translateY(0); } 50% { filter: brightness(1.45); transform: translateY(-.45rem); } }
@keyframes fishPass { to { left: 115vw; } }
@keyframes wavePeak { 0%, 100% { transform: scaleY(.55); opacity: .45; } 50% { transform: scaleY(1.08); opacity: 1; } }
@keyframes dripRing { from { transform: scale(.12); opacity: .75; } to { transform: scale(1.7); opacity: 0; } }
@keyframes shardFloat { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-1rem) rotate(5deg); } }
@keyframes rippleSlide { to { transform: translateY(28px); } }
@keyframes chamberReveal { from { opacity: .25; transform: translateY(3rem) rotate(-1deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }

@media (max-width: 760px) {
  .depth-map { display: none; }
  .chamber { padding: 5rem 1rem; min-height: 100vh; }
  .scene-copy { max-width: 92vw; }
  .hero-copy, .root-copy, .fungal-copy, .fish-copy, .archive-copy, .final-copy { margin: 14vh auto 0; }
  .understream { opacity: .72; }
  .rope-tag, .stone-marker { display: none; }
}