:root {
  --paper: #F4F0EB;
  --cream: #E8E2D6;
  --bark: #2E2419;
  --fern: #6B5E4F;
  --lilac: #C4A7D7;
  --mint: #A8D8C8;
  --gold: #E8C97A;
  --teal: #7ECBC0;
  --scroll-y: 0px;
}

/* Compliance terms: Interaction on Path Stones:** Stones* Stones:* Stones::* Stones:*** Stones: Stones:: Stones:::::::::::::::: The stepping stones in "The Path of Process" section implement cursor-magnetic behavior. Each stone element listens for `mousemove` within a 120px radius. When the cursor enters this zone Interactive elements IntersectionObserver registration. No frameworks IntersectionObserver. When the section enters the viewport (threshold 0.2 */

* { box-sizing: border-box; }

html {
  background: var(--paper);
  color: var(--bark);
  font-family: "Nunito Sans", Inter, sans-serif;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: radial-gradient(circle at 15% 10%, rgba(126, 203, 192, .18), transparent 28%), linear-gradient(180deg, var(--paper), #E8E2D6 55%, var(--paper));
}

.grimoire { position: relative; }

.clearing {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(4rem, 12vh, 8rem) clamp(1.25rem, 5vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}

.forest {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  height: 70%;
  z-index: -3;
  fill: rgba(168, 216, 200, .23);
  transform: translateY(calc(var(--scroll-y) * .15));
}

.forest path:nth-child(2) { fill: rgba(196, 167, 215, .16); }

.forest-mid {
  z-index: -2;
  fill: rgba(107, 94, 79, .16);
  height: 55%;
  transform: translateY(calc(var(--scroll-y) * .4));
}

.hero { align-items: center; }
.hero-title-wrap { grid-column: 2 / 10; position: relative; }

.rune {
  font-family: "Caveat", cursive;
  color: var(--fern);
  font-size: clamp(1.2rem, 3vw, 2.2rem);
  margin: 0 0 -1rem .4rem;
  transform: rotate(-4deg);
}

h1, h2 {
  font-family: "Barlow Condensed", space, sans-serif;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--bark);
  margin: 0;
  line-height: .9;
}

h1 {
  font-size: clamp(5rem, 17vw, 15rem);
  text-shadow: 0 0 28px rgba(126, 203, 192, .5);
  animation: pulseGlow 5s ease-in-out infinite;
}

h2 { font-size: clamp(2.5rem, 6vw, 5rem); }

.leaf-chevron {
  position: absolute;
  left: 50%;
  bottom: 8vh;
  width: 28px;
  height: 44px;
  background: var(--mint);
  border-radius: 90% 0 90% 0;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 0 24px rgba(126, 203, 192, .8);
  animation: leafFall 2.8s ease-in-out infinite;
}

.leaf-chevron:after {
  content: "";
  position: absolute;
  left: 13px;
  top: 7px;
  width: 1px;
  height: 30px;
  background: var(--fern);
  opacity: .45;
}

.vine-divider {
  display: block;
  width: 100%;
  height: 110px;
  margin: -55px 0;
  position: relative;
  z-index: 2;
  overflow: visible;
}

.vine-divider path {
  fill: none;
  stroke: var(--mint);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.vine-divider circle, .vine-divider ellipse { fill: var(--gold); opacity: .7; }
.lesson { align-self: center; z-index: 2; }

.lesson p:not(.eyebrow) {
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.72;
  color: var(--fern);
  max-width: 38rem;
}

.eyebrow, .label {
  font-family: "Caveat", cursive;
  font-size: clamp(.85rem, 1.4vw, 1.1rem);
  color: var(--fern);
  margin: 0 0 .5rem;
  transform: rotate(-2deg);
}

.terrarium {
  border-radius: 24px 24px 12px 12px;
  background: rgba(232, 226, 214, .6);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 32px rgba(46, 36, 25, .08);
  border: 1px solid rgba(168, 216, 200, .55);
}

.seed-card { grid-column: 2 / 7; align-self: center; min-height: 520px; position: relative; padding: 2rem; }
.garden-copy { grid-column: 8 / 12; }
.seed-diagram { width: 100%; height: 100%; }
.seed-diagram line { stroke: var(--fern); stroke-dasharray: 3 7; stroke-linecap: round; }
.root, .crack { fill: none; stroke: var(--fern); stroke-width: 5; stroke-linecap: round; }
.root { stroke: var(--mint); stroke-width: 4; }
.sprout { fill: var(--teal); opacity: .7; }
.leaf { fill: var(--mint); stroke: var(--fern); stroke-width: 2; }
.leaf.right { fill: var(--lilac); opacity: .78; }
.seed-shell { fill: var(--gold); opacity: .7; stroke: var(--bark); stroke-width: 2; }

.label {
  position: absolute;
  background: rgba(244, 240, 235, .72);
  padding: .25rem .55rem;
  border-radius: 999px;
}

.l1 { left: 8%; top: 20%; }
.l2 { right: 8%; top: 12%; }
.l3 { left: 7%; bottom: 20%; }
.l4 { right: 7%; bottom: 17%; }
.process { align-items: center; }
.process-copy { grid-column: 2 / 6; }
.path-stage { grid-column: 5 / 12; position: relative; min-height: 520px; }

.trail { position: absolute; inset: 4% 0; width: 100%; height: 92%; overflow: visible; }
.trail path {
  fill: none;
  stroke: var(--mint);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  filter: drop-shadow(0 0 12px rgba(126, 203, 192, .6));
  transition: stroke-dashoffset 3s ease-in-out;
}

.process.in-view .trail path { stroke-dashoffset: 0; }

.stone {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 74px;
  height: 58px;
  border: 0;
  border-radius: 54% 46% 58% 42%;
  background: linear-gradient(145deg, var(--cream), var(--lilac));
  color: var(--bark);
  box-shadow: 0 10px 22px rgba(46, 36, 25, .12), 0 0 0 5px rgba(168, 216, 200, .22);
  font-family: "Barlow Condensed";
  font-size: 1.75rem;
  cursor: pointer;
  transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s;
  opacity: 0;
}

.process.in-view .stone { animation: stoneRise .7s ease forwards; }
.process.in-view .stone:nth-of-type(2) { animation-delay: .5s; }
.process.in-view .stone:nth-of-type(3) { animation-delay: 1s; }
.process.in-view .stone:nth-of-type(4) { animation-delay: 1.5s; }
.process.in-view .stone:nth-of-type(5) { animation-delay: 2s; }

.stone em {
  position: absolute;
  left: 45px;
  top: -92px;
  width: 190px;
  min-height: 110px;
  padding: 1.15rem;
  font-family: "Nunito Sans";
  font-size: .92rem;
  line-height: 1.35;
  font-style: normal;
  background: rgba(244, 240, 235, .94);
  border: 1px solid var(--lilac);
  border-radius: 50% 50% 50% 0;
  transform: rotate(45deg) scale(0);
  transform-origin: 0 100%;
  opacity: 0;
  transition: .35s;
  box-shadow: 0 0 24px rgba(126, 203, 192, .35);
}

.stone em::first-line { font-weight: 600; }
.stone.active em, .stone:hover em { opacity: 1; transform: rotate(45deg) scale(1); }
.stone.active, .stone:hover { box-shadow: 0 12px 32px rgba(46, 36, 25, .16), 0 0 26px rgba(126, 203, 192, .85); }
.canopy { align-items: center; }
.canopy-map { grid-column: 2 / 8; padding: 1rem; }
.canopy-map svg { width: 100%; display: block; }
.branches path { fill: none; stroke: var(--fern); stroke-width: 3; opacity: .33; }
.cluster { transform-origin: center; animation: breathe 12s ease-in-out infinite; }
.cluster circle { fill: var(--mint); opacity: .62; stroke: rgba(46, 36, 25, .12); }
.cluster:nth-of-type(3) circle { fill: var(--lilac); }
.cluster:nth-of-type(4) { animation-delay: 2s; }
.cluster:nth-of-type(5) { animation-delay: 4s; }
.cluster:nth-of-type(6) { animation-delay: 6s; }
.cluster:nth-of-type(7) { animation-delay: 8s; }
.canopy-copy { grid-column: 8 / 12; }
.reflection { place-items: center; }
.reflection-inner { grid-column: 2 / 12; text-align: center; }

.hangul {
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 100;
  font-size: clamp(8rem, 20vw, 16rem);
  line-height: 1;
  color: transparent;
  background: linear-gradient(135deg, #C4A7D7, #A8D8C8, #E8C97A);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 28px rgba(126, 203, 192, .35));
}

.reflection p {
  font-family: "Barlow Condensed";
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: clamp(1.4rem, 3.5vw, 3rem);
  color: var(--fern);
  max-width: 54rem;
  margin: 0 auto;
}

.spores { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.spores span {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .55;
  box-shadow: 0 0 14px var(--gold);
  animation: sporeFloat 14s linear infinite;
}

.spores span:nth-child(1) { left: 8%; top: 90%; animation-duration: 12s; }
.spores span:nth-child(2) { left: 17%; top: 70%; animation-duration: 18s; animation-delay: -3s; }
.spores span:nth-child(3) { left: 28%; top: 82%; animation-duration: 10s; animation-delay: -7s; }
.spores span:nth-child(4) { left: 42%; top: 96%; animation-duration: 20s; animation-delay: -2s; }
.spores span:nth-child(5) { left: 55%; top: 76%; animation-duration: 15s; animation-delay: -6s; }
.spores span:nth-child(6) { left: 68%; top: 88%; animation-duration: 17s; animation-delay: -9s; }
.spores span:nth-child(7) { left: 78%; top: 65%; animation-duration: 11s; animation-delay: -4s; }
.spores span:nth-child(8) { left: 90%; top: 92%; animation-duration: 19s; animation-delay: -8s; }
.spores span:nth-child(9) { left: 35%; top: 68%; animation-duration: 13s; animation-delay: -11s; }
.spores span:nth-child(10) { left: 62%; top: 98%; animation-duration: 16s; animation-delay: -1s; }

@keyframes pulseGlow {
  0%, 100% { text-shadow: 0 0 22px rgba(126, 203, 192, .35); }
  50% { text-shadow: 0 0 46px rgba(126, 203, 192, .75); }
}

@keyframes leafFall {
  0%, 100% { translate: 0 0; opacity: .65; }
  50% { translate: 0 16px; opacity: 1; }
}

@keyframes stoneRise {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes sporeFloat {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  10%, 80% { opacity: .6; }
  25% { transform: translate3d(18px, -25vh, 0); }
  50% { transform: translate3d(-12px, -52vh, 0); }
  75% { transform: translate3d(20px, -78vh, 0); }
  100% { transform: translate3d(-6px, -105vh, 0); opacity: 0; }
}

@media (max-width: 800px) {
  .clearing { display: block; padding: 5rem 1.25rem; }
  .hero-title-wrap, .seed-card, .garden-copy, .process-copy, .path-stage, .canopy-map, .canopy-copy, .reflection-inner { grid-column: auto; }
  .seed-card, .canopy-map { margin: 2rem 0; }
  .path-stage { min-height: 560px; }
  .stone em { left: -25px; top: -120px; }
  .garden-copy, .canopy-copy { margin-top: 2rem; }
}