:root {
  /* Compliance tokens from design parser: Inter* Inter** clean Interactions should tactile: states ripple touching */
  --wet-terracotta: #B85F3D;
  --fired-clay: #6F2E1E;
  --ink-soil: #241713;
  --sun-apricot: #F2B47E;
  --cream-mist: #FFF1D6;
  --pale-sky: #D8F7F1;
  --leaf-green: #5D8A4B;
  --lagoon: #6ED6D8;
  --display: "Commissioner", Inter, system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --hand: "Nanum Pen Script", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink-soil);
  font-family: var(--body);
  background:
    radial-gradient(circle at 15% 8%, rgba(216, 247, 241, .75), transparent 26rem),
    radial-gradient(circle at 90% 32%, rgba(242, 180, 126, .65), transparent 28rem),
    linear-gradient(135deg, #B85F3D 0%, #FFF1D6 36%, #D8F7F1 68%, #F2B47E 100%);
  overflow-x: hidden;
}

.fixed-world { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.caustics {
  position: absolute; inset: -20%; opacity: .32; filter: blur(.5px);
  background:
    radial-gradient(ellipse at 25% 22%, transparent 0 28%, rgba(255,255,255,.55) 29% 31%, transparent 32%),
    radial-gradient(ellipse at 75% 58%, transparent 0 30%, rgba(216,247,241,.55) 31% 33%, transparent 34%),
    repeating-linear-gradient(112deg, transparent 0 42px, rgba(255,241,214,.18) 43px 46px, transparent 47px 92px);
  animation: shimmer 12s ease-in-out infinite alternate;
}
.soil-speckles {
  position: absolute; inset: 0; opacity: .2;
  background-image: radial-gradient(var(--fired-clay) 1px, transparent 1.8px), radial-gradient(var(--ink-soil) 1px, transparent 2px);
  background-size: 37px 41px, 61px 57px;
}
.swirl-map { position: absolute; top: 0; left: 0; width: 100%; height: 420vh; }
.main-curve, .curve-gloss { fill: none; vector-effect: non-scaling-stroke; }
.main-curve { stroke: rgba(111,46,30,.55); stroke-width: 18; stroke-linecap: round; stroke-dasharray: 30 26; }
.curve-gloss { stroke: rgba(110,214,216,.72); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: var(--curve-offset, 1); }

main { position: relative; z-index: 1; }
.scene { min-height: 100vh; position: relative; padding: clamp(32px, 6vw, 88px); display: grid; align-items: center; }
h1, h2 { font-family: var(--display); letter-spacing: .035em; line-height: .88; margin: 0; }
h1 { font-size: clamp(4.1rem, 13vw, 13rem); color: var(--fired-clay); max-width: 980px; text-shadow: 0 14px 50px rgba(36,23,19,.22); }
h1 small { font-size: .3em; display: block; margin-left: 36%; color: var(--wet-terracotta); }
h2 { font-size: clamp(2.8rem, 7vw, 7.5rem); max-width: 860px; color: var(--fired-clay); }
p { font-size: clamp(1rem, 1.35vw, 1.35rem); line-height: 1.65; }
.hand { font-family: var(--hand); font-size: 1.8rem; color: var(--leaf-green); }
.stage-label { font-family: var(--hand); color: var(--leaf-green); font-size: clamp(2rem, 4vw, 4rem); margin: 0 0 .3em; transform: rotate(-4deg); }

.scene-drop { grid-template-columns: minmax(0, 1fr) 320px; gap: 4vw; background: linear-gradient(110deg, rgba(184,95,61,.78), rgba(255,241,214,.5) 48%, rgba(216,247,241,.35)); }
.hero-pool { position: relative; align-self: end; padding-bottom: 9vh; }
.swirl-word { position: relative; display: inline-block; transform: skewX(-8deg) rotate(-1deg); color: var(--ink-soil); }
.word-underline { position: absolute; left: -4%; bottom: -.18em; width: 112%; height: .32em; overflow: visible; }
.word-underline path { fill: none; stroke: var(--leaf-green); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 300; stroke-dashoffset: 300; animation: drawUnderline 1.7s .7s cubic-bezier(.26,.81,.2,1) forwards; }
.hero-copy { width: min(560px, 88vw); margin: 2.4rem 0 0 8vw; font-weight: 700; background: rgba(255,241,214,.55); padding: 1.2rem 1.5rem; border-radius: 28px 18px 38px 16px; box-shadow: 0 18px 45px rgba(111,46,30,.16); }
.giant-droplet {
  position: absolute; width: clamp(260px, 38vw, 590px); aspect-ratio: 1 / 1.08; left: -8vw; top: -17vh; border-radius: 55% 45% 58% 42% / 48% 52% 58% 42%;
  background: linear-gradient(135deg, rgba(216,247,241,.92), rgba(110,214,216,.9) 45%, rgba(242,180,126,.72));
  box-shadow: inset 24px 18px 35px rgba(255,255,255,.7), inset -34px -50px 90px rgba(93,138,75,.18), 0 28px 80px rgba(36,23,19,.22);
  animation: dropletSlide 1.2s cubic-bezier(.2,.88,.22,1) both, blob 7s ease-in-out infinite;
  display: grid; place-items: center; overflow: hidden; opacity: .86;
}
.giant-droplet::before { content: ""; position: absolute; width: 38%; height: 18%; left: 17%; top: 13%; border-radius: 50%; background: rgba(255,255,255,.65); filter: blur(6px); transform: rotate(-22deg); }
.refract { font-family: var(--display); font-size: clamp(1.8rem, 4vw, 4.5rem); font-weight: 800; color: rgba(111,46,30,.52); transform: rotate(-12deg) scaleX(1.12); }
.droplet-glyph { position: absolute; font-family: var(--hand); color: rgba(36,23,19,.45); font-size: 2rem; }
.glyph-a { right: 16%; top: 23%; } .glyph-b { left: 18%; bottom: 18%; }
.field-note { position: absolute; left: 38%; top: 8%; transform: rotate(-8deg); }
.seed-note { justify-self: end; align-self: center; margin-top: 24vh; }
.chip, .clay-tag, .bloom-note { background: rgba(255,241,214,.78); border: 2px solid rgba(111,46,30,.2); border-radius: 30px 12px 34px 16px; padding: 1.35rem; box-shadow: 0 18px 35px rgba(111,46,30,.18); backdrop-filter: blur(8px); }
.chip strong { display: block; font-family: var(--display); font-size: 1.55rem; color: var(--fired-clay); }

.scene-root { grid-template-columns: .72fr 1fr; background: linear-gradient(82deg, rgba(255,241,214,.35), rgba(216,247,241,.5)); }
.root-cluster { justify-self: end; width: min(760px, 94vw); }
.clay-tag { width: min(340px, 70vw); transform: rotate(-9deg); background: rgba(242,180,126,.82); align-self: start; margin-top: 9vh; }
.clay-tag span { font-family: var(--display); font-weight: 800; font-size: 2.1rem; }
.leaf-logic { width: min(620px, 100%); margin-top: 1rem; filter: drop-shadow(0 20px 25px rgba(36,23,19,.12)); }
.vein { fill: none; stroke: var(--leaf-green); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 12 14; }
.vein.main { stroke: var(--lagoon); stroke-width: 16; stroke-dasharray: 900; stroke-dashoffset: var(--root-offset, 900); transition: stroke-dashoffset .2s linear; }
.leaf-logic text { font-family: var(--hand); font-size: 28px; fill: var(--fired-clay); }

.scene-loop { grid-template-columns: 1fr .8fr; gap: 6vw; background: radial-gradient(circle at 72% 30%, rgba(110,214,216,.42), transparent 34rem); }
.command-pane { width: min(720px, 92vw); padding: clamp(1.3rem, 3vw, 2.6rem); border-radius: 44px 18px 54px 22px; transform: rotate(-5deg); background: linear-gradient(135deg, rgba(216,247,241,.78), rgba(110,214,216,.55) 48%, rgba(255,241,214,.62)); box-shadow: inset 15px 15px 30px rgba(255,255,255,.52), 0 35px 70px rgba(36,23,19,.2); border: 1px solid rgba(255,255,255,.7); }
.pane-drops i { display: inline-block; width: 18px; height: 18px; margin-right: 10px; border-radius: 50%; background: linear-gradient(135deg, #D8F7F1, #6ED6D8 45%, #F2B47E); box-shadow: inset 3px 3px 5px rgba(255,255,255,.8); }
pre { margin: 1.3rem 0 0; white-space: pre-wrap; font: 700 clamp(1.1rem, 2vw, 2rem)/1.55 var(--display); color: var(--ink-soil); }
.loop-copy { align-self: start; margin-top: 11vh; }
.chip-row { position: absolute; right: 8vw; bottom: 12vh; display: flex; gap: 1rem; flex-wrap: wrap; }
.clay-chip { border: 0; color: var(--cream-mist); background: var(--fired-clay); padding: 1rem 1.3rem; border-radius: 999px 999px 999px 18px; font: 800 1.05rem var(--display); box-shadow: 0 13px 24px rgba(36,23,19,.2); cursor: pointer; }

.scene-bloom { background: linear-gradient(180deg, rgba(216,247,241,.3), rgba(184,95,61,.72)); }
.soil-layer { position: absolute; left: -4vw; right: -4vw; bottom: 13vh; height: 30vh; background: linear-gradient(180deg, #B85F3D, #6F2E1E); border-radius: 55% 45% 0 0 / 28% 24% 0 0; box-shadow: inset 0 24px 45px rgba(242,180,126,.36); overflow: hidden; }
.irrigation { position: absolute; left: 13%; top: 18%; font-family: var(--display); font-size: 11rem; color: rgba(216,247,241,.25); transform: rotate(24deg); }
.irrigation.close { left: auto; right: 16%; transform: rotate(-16deg); }
.pod { position: absolute; left: 44%; top: 43%; padding: 1.2rem 2rem; border-radius: 50%; color: var(--fired-clay); background: var(--sun-apricot); font-family: var(--hand); font-size: 3rem; }
.bloom-note { width: min(760px, 92vw); margin-left: auto; margin-bottom: 20vh; position: relative; z-index: 1; }
.draw-link { position: relative; color: var(--fired-clay); text-decoration: none; font-family: var(--hand); font-size: 2.4rem; }
.draw-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: .05em; height: 7px; background: var(--leaf-green); border-radius: 99px; transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.8,.2,1.2); }
.draw-link:hover::after { transform: scaleX(1.06); }
.annotation { position: absolute; left: 10vw; bottom: 26vh; font-size: clamp(2.5rem, 7vw, 7rem); color: rgba(255,241,214,.85); transform: rotate(-12deg); }

.scene-release { min-height: 112vh; place-items: center; text-align: center; background: radial-gradient(circle, rgba(216,247,241,.9), rgba(110,214,216,.52) 42%, rgba(255,241,214,.2) 70%, rgba(111,46,30,.4)); }
.spiral-field { position: relative; width: min(840px, 94vw); aspect-ratio: 1; display: grid; place-items: center; }
.final-spiral { position: absolute; inset: 0; width: 100%; height: 100%; animation: slowSpin 28s linear infinite; }
.final-spiral path { fill: none; stroke: rgba(111,46,30,.55); stroke-width: 18; stroke-linecap: round; stroke-dasharray: 28 22; }
.spiral-field h2 { font-size: clamp(3.1rem, 9vw, 8rem); color: var(--ink-soil); text-shadow: 0 4px 0 rgba(255,241,214,.6); }
.spiral-field p { margin-top: 8rem; position: absolute; bottom: 24%; font-family: var(--hand); font-size: clamp(2rem, 5vw, 4rem); color: var(--leaf-green); }
.fragment { position: absolute; padding: .65rem 1rem; border-radius: 999px; background: rgba(255,241,214,.76); font: 800 1rem var(--display); color: var(--fired-clay); animation: bob 4s ease-in-out infinite; }
.f1 { left: 16%; top: 24%; } .f2 { right: 13%; top: 31%; animation-delay: -.7s; } .f3 { left: 21%; bottom: 24%; animation-delay: -1.2s; } .f4 { right: 19%; bottom: 19%; animation-delay: -2s; }

.traveler { position: absolute; width: 70px; height: 76px; border-radius: 54% 46% 62% 38% / 48% 55% 45% 52%; background: linear-gradient(135deg, #D8F7F1, #6ED6D8 45%, #F2B47E); box-shadow: inset 8px 8px 12px rgba(255,255,255,.75), 0 18px 35px rgba(36,23,19,.17); display: grid; place-items: center; transform: translate(-50%, -50%); }
.traveler span { font-family: var(--hand); font-size: 1.7rem; color: rgba(36,23,19,.62); }
.droplet-two { width: 46px; height: 52px; opacity: .78; } .droplet-three { width: 54px; height: 58px; opacity: .85; }
.magnetic { transition: transform .22s ease, box-shadow .22s ease; will-change: transform; }
.magnetic.is-near { box-shadow: 0 25px 55px rgba(36,23,19,.25); }

@keyframes drawUnderline { to { stroke-dashoffset: 0; } }
@keyframes dropletSlide { from { transform: translate(-18vw, -18vh) scale(.78) rotate(-20deg); opacity: 0; } to { transform: translate(0,0) scale(1) rotate(0deg); opacity: .86; } }
@keyframes blob { 50% { border-radius: 48% 52% 43% 57% / 56% 38% 62% 44%; } }
@keyframes shimmer { to { transform: translate3d(4%, -3%, 0) rotate(2deg); } }
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes bob { 50% { transform: translateY(-18px) rotate(5deg); } }

@media (max-width: 820px) {
  .scene-drop, .scene-root, .scene-loop { grid-template-columns: 1fr; }
  .seed-note, .loop-copy, .root-cluster { justify-self: start; margin-top: 0; }
  .chip-row { position: relative; right: auto; bottom: auto; margin-top: 2rem; }
  .giant-droplet { opacity: .55; }
  .field-note { display: none; }
}