:root {
  /* DESIGN parser tokens: IBM Plex Sans** labels */
  --cloud-vinyl: #DDE3E8;
  --mist-white: #F6F8FA;
  --graphite-veil: #2F343A;
  --pewter-blue-gray: #8D99A6;
  --warm-blush-light: #F2C9D1;
  --chlorophyll-silver: #AFC9B6;
  --glitch-violet: #8B6CFF;
  --signal-coral: #FF7E67;
  --ui: "Noto Sans", Frutiger, "Segoe UI", sans-serif;
  --tech: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --display: "Nunito Sans", "Arial Rounded MT Bold", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--graphite-veil);
  font-family: var(--ui);
  background:
    radial-gradient(circle at 18% 20%, rgba(246,248,250,.95), transparent 28rem),
    radial-gradient(circle at 78% 68%, rgba(175,201,182,.32), transparent 32rem),
    linear-gradient(135deg, var(--mist-white), var(--cloud-vinyl) 48%, #C9D2DA 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: .45;
  background:
    repeating-linear-gradient(0deg, rgba(47,52,58,.028) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(246,248,250,.55) 0 1px, transparent 1px 34px),
    radial-gradient(circle at 50% 40%, transparent, rgba(141,153,166,.24));
  mix-blend-mode: soft-light;
}

.scroll-controller { position: relative; height: 620vh; }
.sticky-viewport { position: sticky; top: 0; height: 100vh; overflow: hidden; isolation: isolate; }
.mist-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.mist-field::before,
.mist-field::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(24px);
  opacity: .65;
  background: rgba(246,248,250,.72);
}
.mist-field::before { width: 48vw; height: 18vh; left: 4vw; top: 18vh; animation: cloudDrift 17s ease-in-out infinite; }
.mist-field::after { width: 60vw; height: 22vh; right: -10vw; bottom: 12vh; animation: cloudDrift 21s ease-in-out infinite reverse; }

.site-mark {
  position: fixed;
  top: 28px;
  left: 34px;
  z-index: 20;
  display: grid;
  gap: 3px;
  color: var(--graphite-veil);
  letter-spacing: .03em;
}
.site-mark span { font: 900 clamp(1.1rem, 2vw, 1.9rem)/1 var(--display); text-shadow: 0 1px 0 var(--mist-white); }
.site-mark small,
.progress-gauge,
.kicker,
.coordinate,
.seam-note { font-family: var(--tech); text-transform: uppercase; letter-spacing: .16em; }
.site-mark small { color: rgba(47,52,58,.58); font-size: .66rem; }

.progress-gauge {
  position: fixed;
  top: 32px;
  right: 34px;
  z-index: 20;
  width: min(260px, 32vw);
  height: 28px;
  color: var(--pewter-blue-gray);
  font-size: .68rem;
}
.progress-gauge::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 1px; background: rgba(141,153,166,.55); }
.progress-gauge span { position: absolute; left: 0; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--signal-coral); box-shadow: 0 0 18px rgba(255,126,103,.64); transform: translateX(0); }
.progress-gauge em { position: absolute; right: 0; top: 16px; font-style: normal; }

.lateral-stage { position: relative; z-index: 2; display: flex; width: 620vw; height: 100vh; will-change: transform; }
.scene { position: relative; flex: 0 0 124vw; height: 100vh; overflow: hidden; }
.scene::before { content: ""; position: absolute; inset: 8vh 8vw; border-radius: 48px; border: 1px solid rgba(246,248,250,.58); background: linear-gradient(135deg, rgba(246,248,250,.28), rgba(221,227,232,.08)); box-shadow: inset 0 0 70px rgba(246,248,250,.42); }

.living-seam { position: absolute; left: 0; top: 0; width: 620vw; height: 100vh; z-index: 7; pointer-events: auto; }
.route { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: stroke; }
.route-main { stroke: var(--chlorophyll-silver); stroke-width: 4; stroke-dasharray: 6200; stroke-dashoffset: 6200; filter: drop-shadow(0 0 10px rgba(175,201,182,.75)); }
.route-ghost { stroke: rgba(141,153,166,.35); stroke-width: 1.5; stroke-dasharray: 18 18; pointer-events: none; }

.inflated-piece {
  position: absolute;
  border-radius: 42% 48% 44% 50%;
  background:
    radial-gradient(circle at 30% 22%, rgba(246,248,250,.98), transparent 14%),
    radial-gradient(circle at 66% 72%, rgba(141,153,166,.28), transparent 28%),
    linear-gradient(145deg, var(--mist-white), var(--cloud-vinyl) 42%, #BFC9D1 100%);
  box-shadow:
    inset 24px 28px 48px rgba(246,248,250,.86),
    inset -30px -34px 58px rgba(47,52,58,.22),
    0 42px 90px rgba(47,52,58,.22),
    0 0 0 1px rgba(246,248,250,.62);
  filter: drop-shadow(0 28px 42px rgba(47,52,58,.18));
  animation: pressurePulse 8s ease-in-out infinite;
}
.inflated-piece::before { content: ""; position: absolute; inset: 7%; border-radius: inherit; border: 1px solid rgba(246,248,250,.8); box-shadow: inset 0 0 34px rgba(141,153,166,.2); }
.inflated-piece::after { content: ""; position: absolute; width: 35%; height: 16%; left: 22%; top: 13%; border-radius: 50%; background: rgba(246,248,250,.72); filter: blur(12px); transform: rotate(-16deg); }

.giant-tab { width: 64vw; height: 86vh; left: -18vw; top: 6vh; border-radius: 40% 55% 46% 38%; }
.giant-tab::before { clip-path: polygon(0 0, 74% 0, 74% 30%, 94% 30%, 94% 66%, 72% 66%, 72% 100%, 0 100%); }
.embossed-word { position: absolute; left: 25%; top: 44%; color: rgba(47,52,58,.18); font: 900 clamp(4rem, 12vw, 15rem)/.8 var(--display); letter-spacing: -.08em; text-shadow: 2px 3px 3px rgba(246,248,250,.9), -2px -3px 4px rgba(47,52,58,.16); transform: rotate(-7deg); }
.dew { position: absolute; z-index: 3; border-radius: 50%; background: radial-gradient(circle at 32% 28%, var(--mist-white), rgba(141,153,166,.28)); box-shadow: inset -4px -5px 9px rgba(47,52,58,.18), 0 7px 15px rgba(47,52,58,.12); }
.bead-one { width: 28px; height: 28px; left: 59%; top: 24%; } .bead-two { width: 16px; height: 16px; left: 36%; top: 70%; } .bead-three { width: 21px; height: 21px; left: 74%; top: 57%; }

.caption-rail { position: absolute; z-index: 12; left: 12vw; bottom: 9vh; max-width: 520px; padding: 1rem 1.2rem 1.1rem; border-left: 2px solid var(--chlorophyll-silver); background: linear-gradient(90deg, rgba(246,248,250,.72), rgba(246,248,250,.14)); backdrop-filter: blur(7px); border-radius: 0 22px 22px 0; box-shadow: 0 22px 50px rgba(47,52,58,.08); }
.caption-rail.small { max-width: 440px; } .caption-rail.right { left: auto; right: 16vw; } .caption-rail.center { left: 32vw; bottom: 11vh; text-align: center; border-left: 0; border-top: 2px solid var(--chlorophyll-silver); border-radius: 22px; }
.kicker { margin: 0 0 .75rem; color: var(--glitch-violet); font-weight: 600; font-size: .68rem; }
h1, h2 { margin: 0; color: var(--graphite-veil); font-weight: 300; letter-spacing: -.055em; line-height: .93; }
h1 { max-width: 9ch; font-size: clamp(3.8rem, 8vw, 8.6rem); }
h2 { max-width: 11ch; font-size: clamp(2.9rem, 5.8vw, 6.4rem); }
.caption-rail p:not(.kicker) { margin: 1rem 0 0; max-width: 38ch; color: rgba(47,52,58,.72); font: 300 clamp(.98rem, 1.1vw, 1.18rem)/1.55 var(--ui); }
.coordinate { position: absolute; z-index: 10; right: 14vw; bottom: 7vh; color: rgba(47,52,58,.45); font-size: .68rem; writing-mode: vertical-rl; }

.socket-piece { width: 46vw; height: 62vh; left: 28vw; top: 13vh; border-radius: 34% 46% 44% 38%; }
.socket-hole { position: absolute; left: 35%; top: 28%; width: 23%; height: 30%; border-radius: 50%; background: radial-gradient(circle, rgba(47,52,58,.2), rgba(141,153,166,.12) 54%, rgba(246,248,250,.45) 56%); box-shadow: inset 10px 12px 25px rgba(47,52,58,.22); }
.petal { position: absolute; width: 116px; height: 54px; border-radius: 999px; background: linear-gradient(135deg, var(--mist-white), var(--warm-blush-light)); box-shadow: inset 8px 8px 16px rgba(246,248,250,.7), inset -10px -8px 17px rgba(47,52,58,.13), 0 12px 24px rgba(47,52,58,.12); }
.p1 { left: 50%; top: 20%; transform: rotate(18deg); } .p2 { left: 56%; top: 35%; transform: rotate(88deg); } .p3 { left: 45%; top: 47%; transform: rotate(156deg); } .p4 { left: 34%; top: 32%; transform: rotate(-42deg); }
.node-core { position: absolute; z-index: 4; left: 51%; top: 38%; width: 22px; height: 22px; border-radius: 50%; background: var(--signal-coral); box-shadow: 0 0 22px rgba(255,126,103,.85); }
.tendril-cluster { position: absolute; left: 12vw; top: 22vh; width: 46vw; height: 52vh; overflow: visible; }
.sprout-line, .scan-seam { fill: none; stroke: var(--chlorophyll-silver); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; transition: stroke-dashoffset 1.1s cubic-bezier(.2,.8,.15,1), stroke-width .25s ease; filter: drop-shadow(0 0 10px rgba(175,201,182,.55)); }
.sprout-line.pale { stroke: rgba(141,153,166,.52); stroke-width: 2; } .sprout-line.blush { stroke: var(--warm-blush-light); stroke-width: 4; }

.trellis-field { position: absolute; left: 14vw; top: 10vh; width: 74vw; height: 72vh; }
.trellis-pad { width: 55vw; height: 58vh; left: 6vw; top: 5vh; transform: rotate(-9deg); }
.trellis-field svg { position: absolute; inset: 4vh 0 0 2vw; width: 62vw; height: 62vh; overflow: visible; }
.scan-seam { stroke: var(--glitch-violet); stroke-width: 4; }
.inner-net { fill: none; stroke: rgba(47,52,58,.26); stroke-width: 1.5; stroke-dasharray: 9 12; }
.glitch-tear { position: absolute; z-index: 8; left: 34vw; top: 24vh; width: 18vw; height: 26vh; opacity: .78; mix-blend-mode: multiply; }
.glitch-tear span { position: absolute; height: 12px; background: var(--glitch-violet); box-shadow: 16px 0 0 var(--signal-coral), -10px 18px 0 rgba(141,153,166,.75); opacity: .7; transform: translateX(0); }
.glitch-tear span:nth-child(1) { width: 120px; top: 10%; left: 8%; } .glitch-tear span:nth-child(2) { width: 76px; top: 32%; left: 48%; } .glitch-tear span:nth-child(3) { width: 156px; top: 56%; left: 0; } .glitch-tear span:nth-child(4) { width: 60px; top: 76%; left: 34%; }
.glitch-tear.is-burst span { animation: glitchJump .18s steps(2, end) 2; }

.fit-pair { position: absolute; left: 8vw; top: 11vh; width: 92vw; height: 70vh; }
.fit-left { width: 42vw; height: 62vh; left: 0; top: 2vh; border-radius: 42% 35% 48% 40%; }
.fit-right { width: 44vw; height: 64vh; right: 5vw; top: 0; border-radius: 38% 50% 42% 46%; animation-delay: -2.5s; }
.glow-gap { position: absolute; z-index: 9; left: 43vw; top: 9vh; width: 9px; height: 55vh; border-radius: 999px; background: linear-gradient(var(--mist-white), var(--signal-coral), var(--mist-white)); box-shadow: 0 0 18px rgba(255,126,103,.62), 0 0 34px rgba(246,248,250,.9); transform: rotate(5deg); }

.garden-mesh { position: absolute; left: 12vw; top: 8vh; width: 78vw; height: 78vh; overflow: visible; }
.mesh-lines path { stroke-linecap: round; }
.garden-nodes circle { fill: var(--warm-blush-light); stroke: var(--mist-white); stroke-width: 5; filter: drop-shadow(0 0 18px rgba(242,201,209,.8)); animation: nodePulse 5.5s ease-in-out infinite; }
.garden-nodes circle:nth-child(even) { fill: var(--chlorophyll-silver); animation-delay: -1.2s; }
.garden-nodes circle:nth-child(3n) { fill: var(--cloud-vinyl); }

.hover-seam { cursor: crosshair; pointer-events: auto; }
.hover-seam:hover, .hover-seam.is-active { stroke-dashoffset: 0; stroke-width: 7; }
.seam-note { position: fixed; z-index: 30; left: 0; top: 0; opacity: 0; pointer-events: none; padding: .5rem .65rem; border-radius: 999px; color: var(--mist-white); background: rgba(47,52,58,.84); border: 1px solid rgba(246,248,250,.5); font-size: .66rem; transform: translate3d(-999px,-999px,0); transition: opacity .16s ease; }
.seam-note.is-visible { opacity: .95; }

@keyframes pressurePulse { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(0,-1.2vh,0) scale(1.018); } }
@keyframes nodePulse { 0%,100% { transform: scale(1); opacity: .78; } 50% { transform: scale(1.18); opacity: 1; } }
@keyframes cloudDrift { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(6vw,-2vh,0); } }
@keyframes glitchJump { 0% { transform: translateX(0); } 50% { transform: translateX(18px); } 100% { transform: translateX(-12px); } }

@media (max-width: 760px) {
  .scene { flex-basis: 132vw; }
  .lateral-stage, .living-seam { width: 660vw; }
  .site-mark { left: 18px; top: 20px; }
  .progress-gauge { right: 18px; width: 150px; }
  .caption-rail, .caption-rail.right, .caption-rail.center { left: 7vw; right: auto; bottom: 6vh; max-width: 82vw; text-align: left; }
  h1 { font-size: clamp(3.1rem, 15vw, 5.4rem); }
  h2 { font-size: clamp(2.5rem, 12vw, 4.7rem); }
  .giant-tab { width: 105vw; left: -42vw; }
  .socket-piece, .trellis-pad, .fit-left, .fit-right { width: 72vw; }
  .coordinate { display: none; }
}