:root {
  /* compliance tokens from DESIGN.md: briefly: `[SIGNAL ERR]`. `// (Google Interactive elements Interruptions:** IntersectionObserver IntersectionObserver` `requestAnimationFrame` listeners thread. Interval` adds random noise control points */
  --abyss: #0b1a0f;
  --canopy: #1a3a2a;
  --moss: #2d6b4f;
  --sage: #6b8f71;
  --lichen: #a8c4a2;
  --spore: #39ff14;
  --wound: #8b1a1a;
  --ash: #3a3d3c;
  --black: #000000;
  --column: min(680px, 88vw);
  --left: clamp(6vw, 12vw, 18vw);
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--abyss);
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
}

body {
  margin: 0;
  min-height: 100%;
  color: var(--sage);
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  line-height: 1.72;
  letter-spacing: 0.005em;
  background: linear-gradient(180deg, var(--abyss) 0%, var(--abyss) 84%, var(--black) 100%);
  overflow-x: hidden;
  transition: box-shadow 120ms linear;
}

body.glitching { box-shadow: inset 0 0 100px rgba(57, 255, 20, 0.1); }

.forest {
  position: fixed;
  inset: 0;
  z-index: -3;
  background: var(--abyss);
  overflow: hidden;
  transform: translate3d(0, var(--forest-shift, 0px), 0);
}

.forest::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(168,196,162,0.018) 0 1px, transparent 1px 5px), radial-gradient(circle at 70% 15%, rgba(26,58,42,0.28), transparent 45%);
  mix-blend-mode: screen;
}

.bokeh {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45,107,79,0.25) 0%, rgba(45,107,79,0.12) 38%, rgba(45,107,79,0) 70%);
  filter: blur(40px);
  opacity: 0;
  animation: bokehAwaken 1.2s forwards, bokehDrift 18s ease-in-out infinite alternate;
}

.b1{width:24vw;height:24vw;left:4vw;top:8vh;animation-delay:0ms,1s}.b2{width:12vw;height:12vw;left:42vw;top:12vh;animation-delay:80ms,0s}.b3{width:19vw;height:19vw;left:76vw;top:4vh;animation-delay:160ms,2s}.b4{width:8vw;height:8vw;left:18vw;top:39vh;animation-delay:240ms,3s}.b5{width:22vw;height:22vw;left:58vw;top:48vh;animation-delay:320ms,1s}.b6{width:14vw;height:14vw;left:86vw;top:62vh;animation-delay:400ms,2s}.b7{width:18vw;height:18vw;left:-5vw;top:72vh;animation-delay:480ms,0s}.b8{width:9vw;height:9vw;left:33vw;top:82vh;animation-delay:560ms,3s}.b9{width:25vw;height:25vw;left:65vw;top:102vh;animation-delay:640ms,1s}.b10{width:11vw;height:11vw;left:12vw;top:122vh;animation-delay:720ms,2s}.b11{width:17vw;height:17vw;left:47vw;top:145vh;animation-delay:800ms,0s}.b12{width:13vw;height:13vw;left:82vw;top:166vh;animation-delay:880ms,1s}.b13{width:21vw;height:21vw;left:2vw;top:188vh;animation-delay:960ms,2s}.b14{width:10vw;height:10vw;left:36vw;top:214vh;animation-delay:1040ms,3s}.b15{width:18vw;height:18vw;left:70vw;top:236vh;animation-delay:1120ms,0s}.b16{width:15vw;height:15vw;left:24vw;top:255vh;animation-delay:1200ms,2s}

@keyframes bokehAwaken { to { opacity: 1; } }
@keyframes bokehDrift { to { transform: translate3d(2vw, -2vh, 0) scale(1.08); } }

.leaf-field {
  position: fixed;
  inset: 0 auto 0 0;
  width: clamp(70px, 10vw, 150px);
  z-index: -1;
  pointer-events: none;
  transform: translate3d(0, var(--leaf-shift, 0px), 0);
}

.leaf { position: absolute; width: 90px; fill: rgba(26,58,42,0.65); transform-origin: 50% 50%; transition: filter 120ms, transform 180ms; }
.leaf-a { left: 2vw; top: 40vh; }
.leaf-b { left: 6vw; top: 150vh; width: 118px; opacity: .7; }
.leaf-c { left: 1vw; top: 270vh; width: 76px; opacity: .58; }
.leaf.scramble { filter: drop-shadow(4px 0 0 var(--spore)); transform: skewX(12deg) translateX(18px); }

main { position: relative; z-index: 1; }
.snap { scroll-snap-align: start; }

.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}

.hero-inner { text-align: center; }

.domain-title {
  margin: 0;
  color: var(--lichen);
  font-family: "Jost", "Futura", sans-serif;
  font-size: clamp(2.4rem, 5.5vw, 4.8rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.domain-title span {
  display: inline-block;
  opacity: 0;
  transform: translate(var(--dx), var(--dy));
  animation: letterSnap 120ms forwards;
  animation-delay: calc(1.8s + var(--i) * 60ms);
}

@keyframes letterSnap { 50% { color: var(--spore); } to { opacity: 1; transform: translate(0,0); color: var(--lichen); } }

.translation {
  margin: 1.1rem 0 0;
  color: rgba(107,143,113,0.4);
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(0.7rem, 1.2vw, 0.82rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  animation: fadeIn 1.2s 3s forwards;
}

.leaf-chevron { margin-top: 18vh; color: var(--moss); font-size: 2.3rem; opacity: 0; animation: fadeIn .8s 4.2s forwards, pulseLeaf 1.8s 4.2s infinite; }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes pulseLeaf { 50% { transform: translateY(10px); opacity: .42; } }

.narrative {
  width: var(--column);
  margin-left: var(--left);
  padding: clamp(6rem, 12vh, 14rem) 0;
}

.content-block, .rupture {
  position: relative;
  margin: 0 0 clamp(6rem, 12vh, 14rem);
  padding: clamp(1.6rem, 4vw, 3rem);
  background: linear-gradient(180deg, rgba(26,58,42,0.52), rgba(11,26,15,0.74));
  border: 1px solid rgba(58,61,60,0.78);
  box-shadow: 0 24px 100px rgba(0,0,0,0.36);
}

.reveal {
  transform: scaleY(0.015);
  transform-origin: top left;
  opacity: .55;
  overflow: hidden;
  min-height: 2px;
  will-change: transform, opacity;
  transition: transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 600ms ease;
}

.reveal.is-visible { transform: scaleY(1); opacity: 1; }

.content-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(57,255,20,0.035) 22px 23px);
  opacity: 0;
  transition: opacity 180ms;
}

.content-block:hover::before { opacity: 1; }

.meta, .glitch-message, .ending {
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(0.7rem, 1.2vw, 0.82rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage);
}

h2 {
  margin: 0.35rem 0 1.4rem;
  color: var(--lichen);
  font-family: "Jost", "Futura", sans-serif;
  font-size: clamp(2.4rem, 5.5vw, 4.8rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

p { margin: 0 0 1.2rem; }
p:last-child { margin-bottom: 0; }

.hanja-zone::after {
  content: attr(data-hanja);
  position: absolute;
  z-index: -1;
  right: -22vw;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(26,58,42,0.08);
  font-family: "Jost", sans-serif;
  font-size: 40vw;
  font-weight: 700;
  line-height: 1;
  text-shadow: 14px 0 0 rgba(57,255,20,0.025), -9px 0 0 rgba(139,26,26,0.025);
}

.root-divider { height: 90px; margin: calc(clamp(6rem, 12vh, 14rem) * -0.45) 0 clamp(6rem, 12vh, 14rem); }
.root-divider svg { width: 100%; height: 100%; overflow: visible; }
.root-divider path { fill: none; stroke: rgba(45,107,79,0.4); stroke-width: 1.4; stroke-dasharray: 920; stroke-dashoffset: 920; transition: stroke-dashoffset 1.25s ease-out; }
.root-divider.is-visible path { stroke-dashoffset: 0; }

.rupture {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-color: rgba(57,255,20,0.28);
  background: linear-gradient(180deg, rgba(11,26,15,0.2), rgba(26,58,42,0.34));
  overflow: hidden;
}

.rupture h2 { text-shadow: 4px 0 0 rgba(57,255,20,0.35), -5px 0 0 rgba(139,26,26,0.25); }
.rupture.active { animation: ruptureJolt 420ms steps(4); }
@keyframes ruptureJolt { 20% { transform: translateX(36px) skewX(-4deg); } 40% { transform: translateX(-52px) skewX(5deg); } 60% { transform: translateX(18px); } 80% { transform: translateX(-12px); } }

.spores span {
  position: absolute;
  bottom: -10px;
  width: var(--s);
  height: var(--s);
  left: var(--x);
  border-radius: 50%;
  background: var(--spore);
  opacity: 0;
  animation: sporeRise 1.6s ease-out forwards;
  animation-delay: var(--d);
}

@keyframes sporeRise { 10% { opacity: .9; } to { opacity: 0; transform: translate(var(--w), -110vh); } }

.glitch-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  background: repeating-linear-gradient(180deg, rgba(57,255,20,0.16) 0 2px, transparent 2px 47px);
  mix-blend-mode: screen;
}

.glitch-overlay.active { opacity: 1; }
.glitch-message { position: absolute; left: var(--left); top: 45vh; color: var(--spore); text-shadow: 0 0 18px var(--spore); }

.ghost-zone {
  position: relative;
  min-height: 120vh;
  padding: 16vh 0 28vh;
  background: linear-gradient(180deg, rgba(11,26,15,0), rgba(0,0,0,0.72) 76%, var(--black));
  overflow: hidden;
}

.ghost-text {
  width: min(480px, 70vw);
  margin-left: var(--left);
  color: var(--lichen);
  font-family: "Jost", "Futura", sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: -0.015em;
  opacity: var(--ghost-opacity, 1);
}

.ghost-hanja {
  position: absolute;
  left: 18vw;
  top: 4vh;
  color: rgba(26,58,42,0.12);
  font-family: "Jost", sans-serif;
  font-size: 40vw;
  font-weight: 700;
  line-height: 1;
}

.ending { display: block; margin-top: 20vh; color: rgba(107,143,113,0.3); font-size: .75rem; letter-spacing: .08em; }

@media (max-width: 768px) {
  :root { --column: min(680px, 88vw); --left: auto; }
  .narrative, .ghost-text { margin-left: auto; margin-right: auto; }
  .b9,.b10,.b11,.b12,.b13,.b14,.b15,.b16 { display: none; }
  .leaf-field { opacity: .35; }
  .glitch-message { left: 6vw; }
}