:root {
  /* Internal Composition:** Within each 100vh slab */
  --bg-primary: #0a0e0a;
  --bg-secondary: #141a14;
  --parchment: #e8dcc8;
  --brass: #b89a5a;
  --moss: #2a3a2a;
  --green: #39ff85;
  --amber: #ffb833;
  --indigo: #7b5cff;
  --headline: clamp(3.5rem, 9vw, 10rem);
  --label: clamp(1rem, 2.5vw, 1.6rem);
  --body: clamp(0.95rem, 1.2vw, 1.15rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  min-width: 320px;
  overflow-x: hidden;
  background: var(--bg-primary);
  color: var(--parchment);
  font-family: "Libre Baskerville", Georgia, serif;
  line-height: 1.85;
}

.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.83' numOctaves='4' seed='31'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation: grain-shift 120ms steps(4) infinite;
}

@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate(1px, -2px); }
  75% { transform: translate(2px, 2px); }
  100% { transform: translate(0, 0); }
}

#particle-canvas {
  position: fixed;
  inset: 0;
  z-index: 14;
  width: 100%;
  height: 100vh;
  pointer-events: none;
}

.progress-indicator {
  position: fixed;
  right: 20px;
  top: 50%;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translateY(-50%);
}

.progress-segment {
  display: block;
  width: 7px;
  height: 15vh;
  max-height: 88px;
  min-height: 54px;
  border: 1px solid rgba(232, 220, 200, 0.14);
  border-radius: 999px;
  background: var(--moss);
  opacity: 0.45;
  transition: transform 420ms ease, opacity 420ms ease, box-shadow 420ms ease, background 420ms ease;
}

.progress-segment[data-section="0"] { background: var(--indigo); }
.progress-segment[data-section="1"] { background: #2f7445; }
.progress-segment[data-section="2"] { background: #7a5620; }
.progress-segment[data-section="3"] { background: var(--amber); }
.progress-segment[data-section="4"] { background: #172017; }
.progress-segment.active { opacity: 1; transform: scaleX(1.85); box-shadow: 0 0 20px currentColor; }
.progress-segment[data-section="0"].active { color: var(--indigo); }
.progress-segment[data-section="1"].active { color: var(--green); background: var(--green); }
.progress-segment[data-section="2"].active { color: var(--amber); background: var(--amber); }
.progress-segment[data-section="3"].active { color: var(--amber); }
.progress-segment[data-section="4"].active { color: var(--brass); background: var(--brass); animation: low-pulse 2.8s ease-in-out infinite; }

@keyframes low-pulse { 50% { box-shadow: 0 0 28px currentColor; opacity: .72; } }

.strata { position: relative; }

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

.canopy { background: radial-gradient(circle at 50% 42%, rgba(123, 92, 255, 0.11), transparent 36%), var(--bg-primary); }
.trunk { background: linear-gradient(90deg, rgba(42, 58, 42, .12), transparent 20% 80%, rgba(42, 58, 42, .12)), var(--bg-secondary); }
.forest-floor { background: radial-gradient(circle at 50% 82%, rgba(255, 184, 51, .08), transparent 38%), var(--bg-primary); }
.root-stratum { background: radial-gradient(circle at 50% 64%, rgba(57, 255, 133, .045), transparent 44%), #070a07; }
.deep-earth { background: #050705; }

.section-divider {
  position: relative;
  z-index: 20;
  height: 20px;
  margin: -10px 0;
  background: linear-gradient(90deg, transparent, rgba(42, 58, 42, .55), transparent);
  opacity: 0;
  transition: opacity 600ms ease;
}

.section-divider.visible { opacity: 1; }
.section-divider svg { display: block; width: 100%; height: 20px; overflow: visible; }
.divider-path { fill: none; stroke: var(--green); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; filter: drop-shadow(0 0 9px rgba(57, 255, 133, .45)); }
.section-divider.amber .divider-path { stroke: var(--amber); filter: drop-shadow(0 0 9px rgba(255, 184, 51, .45)); }
.section-divider.indigo .divider-path { stroke: var(--indigo); filter: drop-shadow(0 0 9px rgba(123, 92, 255, .45)); }

.growth-rings {
  position: absolute;
  inset: -18vmax;
  z-index: 1;
  pointer-events: none;
  transform-origin: 50% 50%;
  transition: scale 600ms ease;
  will-change: transform;
}

.ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(42, 58, 42, .52);
  border-radius: 47% 53% 51% 49% / 52% 45% 55% 48%;
  transform: translate(-50%, -50%);
  opacity: .58;
}

.tight .ring { border-color: rgba(255, 184, 51, .16); }
.fragmented .ring { border-style: dashed; border-color: rgba(255, 184, 51, .12); opacity: .42; }
.dim .ring { border-color: rgba(57, 255, 133, .10); opacity: .34; }
.minimal .ring { border-color: rgba(184, 154, 90, .08); opacity: .22; }

.watermark-glyph {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  color: var(--green);
  font-family: "Noto Serif KR", serif;
  font-size: clamp(24rem, 62vw, 70rem);
  font-weight: 900;
  line-height: .75;
  opacity: .03;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  pointer-events: none;
  will-change: transform;
}

.canopy .watermark-glyph { color: var(--indigo); left: 44%; top: 44%; }
.trunk .watermark-glyph { color: var(--green); left: 60%; }
.forest-floor .watermark-glyph { color: var(--amber); left: 34%; top: 58%; }
.root-stratum .watermark-glyph { color: var(--amber); top: 64%; }
.deep-earth .watermark-glyph { color: var(--brass); opacity: .022; }

.content {
  position: relative;
  z-index: 30;
  width: min(60ch, calc(100vw - 4rem));
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
  will-change: transform, opacity;
}

.content.reveal { opacity: 1; transform: translateY(0); }

.label, .subheadline, .deep-text {
  font-family: "Josefin Sans", "Inter", sans-serif;
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass);
}

.label {
  margin-bottom: 1.35rem;
  font-size: clamp(.76rem, 1.2vw, .94rem);
}

.headline {
  color: var(--green);
  font-family: "Poiret One", "Inter", sans-serif;
  font-size: clamp(4rem, 15vw, 14rem);
  font-weight: 400;
  letter-spacing: .12em;
  line-height: .82;
  text-shadow: 0 0 40px rgba(57, 255, 133, .3), 0 0 120px rgba(57, 255, 133, .1);
  transform-origin: 50% 50%;
  will-change: transform;
}

.subheadline { margin-top: 1.2rem; font-size: clamp(1rem, 2vw, 2rem); }

p { color: var(--parchment); font-size: var(--body); line-height: 1.85; }

.trunk-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 22;
  width: 20px;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 600ms ease;
}

.trunk-line.reveal { opacity: 1; }
.trunk-line svg { width: 100%; height: 100%; }
.trunk-svg { fill: none; stroke: var(--green); stroke-width: 1.5; stroke-dasharray: 1200; stroke-dashoffset: 1200; filter: drop-shadow(0 0 11px rgba(57, 255, 133, .5)); }

.trunk-content { width: min(86ch, calc(100vw - 6rem)); }
.two-column-text { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 8vw, 8rem); text-align: left; }
.two-column-text p { padding: 1rem 0; }

.floor-content { width: min(60ch, calc(100vw - 4rem)); }
.root-tendril {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22%;
  z-index: 25;
  height: 80px;
  opacity: 0;
  transition: opacity 600ms ease 160ms;
}

.root-tendril.reveal { opacity: 1; }
.root-tendril svg { width: 100%; height: 100%; }
.tendril-path { fill: none; stroke: var(--amber); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1300; stroke-dashoffset: 1300; filter: drop-shadow(0 0 13px rgba(255, 184, 51, .44)); }
.tendril-path.branch { stroke: var(--moss); stroke-width: 1; }

.root-network {
  position: absolute;
  inset: 8% 6%;
  z-index: 12;
  opacity: .74;
  pointer-events: none;
}

.root-network svg { width: 100%; height: 100%; }
.root-path { fill: none; stroke: var(--moss); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(57, 255, 133, .16)); }
.root-path.flash { stroke: var(--green); filter: drop-shadow(0 0 12px rgba(57, 255, 133, .55)); }

.root-content { width: min(76rem, calc(100vw - 4rem)); }
.root-phrase {
  color: var(--amber);
  font-family: "Poiret One", "Inter", sans-serif;
  font-size: clamp(3rem, 6vw, 8rem);
  font-weight: 400;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 0 30px rgba(255, 184, 51, .25);
}

.deep-text {
  font-size: 1.4rem;
  text-shadow: 0 0 18px rgba(184, 154, 90, .28);
  animation: text-pulse 4s ease-in-out infinite;
}

@keyframes text-pulse { 50% { opacity: .55; text-shadow: 0 0 8px rgba(184, 154, 90, .16); } }

@media (max-width: 820px) {
  .stratum { min-height: 620px; padding: 2rem 1.25rem; }
  .two-column-text { grid-template-columns: 1fr; gap: 1rem; text-align: center; }
  .trunk-line { opacity: .22; }
  .progress-indicator { right: 10px; }
  .progress-segment { width: 6px; min-height: 42px; }
}

@media (max-width: 520px) {
  .content, .trunk-content, .floor-content, .root-content { width: calc(100vw - 2.5rem); }
  .progress-indicator { display: none; }
  .headline { font-size: clamp(3.4rem, 18vw, 6rem); }
  .root-phrase { font-size: clamp(2.5rem, 12vw, 4.5rem); }
  .deep-text { font-size: 1rem; }
}