:root {
  /* Design typography tokens: Inter* Inter** from Google Fonts for concise explanatory lines; Space Grotesk to create a severe studio identity without relying on mono terminal aesthetics. Space Grotesk* Space Grotesk** from Google Fonts for small coordinates. */
  --root-void: #14060B;
  --burgundy-glass: #4B0F22;
  --oxide-plum: #7A1E3A;
  --pale-petal: #F4E8E1;
  --chlorophyll: #8AA86B;
  --cold-mist: #B8C7C2;
  --display: Poppins, Jost, Futura, "Avenir Next", "Century Gothic", sans-serif;
  --label: "Space Grotesk", "Avenir Next", Poppins, sans-serif;
  --body: Inter, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--root-void);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--pale-petal);
  font-family: var(--body);
  background:
    radial-gradient(circle at 71% 17%, rgba(122, 30, 58, 0.24), transparent 31vw),
    radial-gradient(circle at 9% 89%, rgba(75, 15, 34, 0.42), transparent 34vw),
    var(--root-void);
}

a { color: inherit; text-decoration: none; }

.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(244, 232, 225, 0.018) 1px, transparent 1px),
    linear-gradient(0deg, rgba(184, 199, 194, 0.012) 1px, transparent 1px);
  background-size: 9.2vw 9.2vw;
  mask-image: radial-gradient(circle at 50% 50%, #000 0 48%, transparent 76%);
}

.specimen-nav {
  position: fixed;
  z-index: 20;
  left: clamp(18px, 3vw, 42px);
  bottom: clamp(18px, 4vw, 48px);
  display: grid;
  gap: 12px;
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(184, 199, 194, 0.52);
}

.nav-dot {
  display: grid;
  grid-template-columns: 34px auto;
  align-items: center;
  gap: 10px;
  opacity: 0.68;
  transition: color 700ms ease, opacity 700ms ease, transform 700ms ease;
}

.nav-dot::before {
  content: attr(data-act);
  width: 34px;
  padding-top: 2px;
  border-top: 1px solid rgba(184, 199, 194, 0.28);
  color: rgba(184, 199, 194, 0.45);
  transition: border-color 700ms ease, color 700ms ease;
}

.nav-dot.active {
  color: var(--pale-petal);
  opacity: 1;
  transform: translateX(6px);
}

.nav-dot.active::before {
  border-color: var(--oxide-plum);
  color: var(--chlorophyll);
}

.scene {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: clamp(28px, 5vw, 72px);
  overflow: hidden;
  isolation: isolate;
}

.scene::before {
  content: attr(data-scene) " / " attr(data-name);
  position: absolute;
  right: clamp(24px, 4vw, 64px);
  bottom: clamp(24px, 5vw, 72px);
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(184, 199, 194, 0.36);
}

.wordmark,
.scene-label,
.ending-mark {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: lowercase;
}

.wordmark {
  position: absolute;
  top: clamp(28px, 5vw, 70px);
  left: clamp(28px, 5vw, 72px);
  font-size: clamp(22px, 3.2vw, 48px);
}

.scene-label {
  position: absolute;
  top: clamp(28px, 5vw, 70px);
  left: clamp(14vw, 19vw, 260px);
  font-size: clamp(38px, 8.8vw, 142px);
  color: rgba(244, 232, 225, 0.075);
  line-height: 0.85;
}

.coordinate {
  position: absolute;
  top: clamp(30px, 5vw, 76px);
  right: clamp(26px, 5vw, 76px);
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(184, 199, 194, 0.58);
}

.floating-line {
  position: absolute;
  max-width: min(760px, 62vw);
  margin: 0;
  font-family: var(--display);
  font-size: clamp(28px, 5.3vw, 86px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--pale-petal);
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1200ms ease 280ms, transform 1200ms ease 280ms, letter-spacing 1200ms ease;
}

.scene.is-visible .floating-line {
  opacity: 1;
  transform: translateY(0);
  letter-spacing: -0.055em;
}

.seed-copy { left: 28vw; bottom: 13vh; }
.trace-copy { left: 9vw; bottom: 12vh; }
.prune-copy { left: 38vw; bottom: 18vh; max-width: 48vw; }
.synth-copy { left: 11vw; bottom: 11vh; max-width: 58vw; }

.photo-slit,
.vein-pane,
.evidence-pane,
.translucent-slice {
  position: absolute;
  overflow: hidden;
  background-color: var(--burgundy-glass);
  background-blend-mode: screen, multiply, normal;
  filter: saturate(0.82) contrast(1.18);
}

.root-slit {
  top: 8vh;
  right: 0;
  width: clamp(46px, 8vw, 112px);
  height: 76vh;
  opacity: 0.42;
  clip-path: inset(0 0 0 0 round 0);
  transform: translateX(42%);
  transition: transform 1400ms ease, opacity 1400ms ease;
}

.root-slit span,
.vein-pane::before,
.evidence-pane::before,
.translucent-slice::before {
  content: "";
  position: absolute;
  inset: -18%;
  background:
    radial-gradient(ellipse at 45% 10%, rgba(184, 199, 194, 0.7) 0 2px, transparent 3px),
    radial-gradient(ellipse at 18% 74%, rgba(138, 168, 107, 0.35) 0 1px, transparent 2px),
    repeating-linear-gradient(108deg, transparent 0 17px, rgba(184, 199, 194, 0.18) 18px 19px, transparent 20px 38px),
    repeating-radial-gradient(ellipse at 60% 40%, rgba(244, 232, 225, 0.12) 0 1px, transparent 2px 13px),
    linear-gradient(145deg, rgba(75, 15, 34, 0.92), rgba(20, 6, 11, 0.52));
}

.scene.is-visible .root-slit { transform: translateX(9%); opacity: 0.72; }

.seed-node {
  position: absolute;
  left: 18vw;
  top: 57vh;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--chlorophyll);
  box-shadow: 0 0 0 0 rgba(138, 168, 107, 0.32);
  animation: pulseNode 4.8s ease-in-out infinite;
}

.inference-map,
.graft-map {
  position: absolute;
  inset: 9vh 8vw 14vh 7vw;
  width: 82vw;
  height: 72vh;
  overflow: visible;
}

.ghost-path,
.draw-path,
.strand {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ghost-path { stroke: rgba(184, 199, 194, 0.13); stroke-width: 1; }
.draw-path { stroke: var(--oxide-plum); stroke-width: 1.7; stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.node, .graft-node { fill: var(--chlorophyll); opacity: 0; transform-box: fill-box; transform-origin: center; }
.scene.is-visible .node { opacity: 1; animation: dew 1600ms ease forwards; }
.n2 { animation-delay: 320ms; }
.n3 { animation-delay: 640ms; }

.vein-pane {
  right: 13vw;
  top: 24vh;
  width: 18vw;
  height: 34vh;
  opacity: 0;
  clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%);
  transform: translateX(48px);
  transition: opacity 1300ms ease 400ms, transform 1300ms ease 400ms;
}

.scene.is-visible .vein-pane { opacity: 0.42; transform: translateX(0); }

.cut-grid { position: absolute; inset: 0; }
.evidence-pane { opacity: 0; transition: opacity 1200ms ease, transform 1200ms ease; }
.pane-a { width: 18vw; height: 62vh; left: 12vw; top: 16vh; clip-path: polygon(0 0, 82% 0, 100% 100%, 14% 100%); transform: translateY(70px); }
.pane-b { width: 12vw; height: 46vh; left: 34vw; top: 7vh; clip-path: polygon(18% 0, 100% 11%, 80% 100%, 0 86%); transform: translateY(-70px); }
.pane-c { width: 28vw; height: 18vh; right: 10vw; top: 43vh; clip-path: polygon(0 9%, 100% 0, 87% 100%, 8% 77%); transform: translateX(90px); }
.scene.is-visible .evidence-pane { opacity: 0.48; transform: translate(0, 0); }

.prune-rule {
  position: absolute;
  right: 13vw;
  top: 27vh;
  width: 38vw;
  height: 1px;
  background: var(--oxide-plum);
  transform: scaleX(0) rotate(-10deg);
  transform-origin: left center;
  transition: transform 1300ms cubic-bezier(.2,.7,.1,1) 380ms;
}
.scene.is-visible .prune-rule { transform: scaleX(1) rotate(-10deg); }

.strand-a { stroke: rgba(184, 199, 194, 0.54); stroke-width: 1.2; stroke-dasharray: 1100; stroke-dashoffset: 1100; }
.strand-b { stroke: rgba(138, 168, 107, 0.45); stroke-width: 1.2; stroke-dasharray: 1100; stroke-dashoffset: 1100; }
.scene.is-visible .strand-a,
.scene.is-visible .strand-b { animation: drawStrand 1800ms ease forwards; }
.scene.is-visible .strand-b { animation-delay: 260ms; }
.graft-node { stroke: rgba(244, 232, 225, 0.45); stroke-width: 1; }
.scene.is-visible .graft-node { animation: graftPulse 2400ms ease 900ms forwards; }

.translucent-slice { opacity: 0; transition: opacity 1500ms ease, transform 1500ms ease; }
.left-slice { width: 15vw; height: 70vh; left: 20vw; top: 15vh; clip-path: inset(0 42% 0 0); transform: translateX(-40px); }
.right-slice { width: 24vw; height: 42vh; right: 12vw; top: 18vh; clip-path: polygon(10% 0, 100% 0, 92% 100%, 0 100%); transform: translateX(50px); }
.scene.is-visible .translucent-slice { opacity: 0.29; transform: translateX(0); }

.bloom-scene {
  display: grid;
  place-items: center;
  text-align: left;
}

.growth-ring {
  position: absolute;
  width: min(60vw, 620px);
  aspect-ratio: 1;
  border: 1px solid rgba(138, 168, 107, 0.42);
  border-radius: 50%;
  transform: scale(0.36);
  opacity: 0;
}

.bloom-statement {
  position: relative;
  max-width: min(980px, 72vw);
  margin: 0;
  font-family: var(--display);
  font-size: clamp(42px, 7.7vw, 124px);
  font-weight: 600;
  letter-spacing: -0.065em;
  line-height: 0.89;
  color: var(--pale-petal);
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1500ms ease 300ms, transform 1500ms ease 300ms;
}

.scene.is-visible .bloom-statement { opacity: 1; transform: translateY(0); }

.ending-mark {
  position: absolute;
  left: clamp(28px, 5vw, 72px);
  bottom: clamp(44px, 8vh, 90px);
  font-size: 14px;
  color: rgba(244, 232, 225, 0.76);
}

.final-note {
  position: absolute;
  right: clamp(28px, 5vw, 72px);
  top: 51vh;
  max-width: 170px;
  margin: 0;
  font-family: var(--label);
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(184, 199, 194, 0.56);
}

@keyframes pulseNode {
  0%, 100% { box-shadow: 0 0 0 0 rgba(138, 168, 107, 0.28); transform: scale(1); }
  50% { box-shadow: 0 0 0 21px rgba(138, 168, 107, 0); transform: scale(0.72); }
}

@keyframes dew {
  0% { opacity: 0; transform: scale(0.1); }
  100% { opacity: 0.95; transform: scale(1); }
}

@keyframes drawStrand { to { stroke-dashoffset: 0; } }

@keyframes graftPulse {
  0% { opacity: 0; transform: scale(0.1); }
  40% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0.65; transform: scale(1.42); }
}

@media (max-width: 760px) {
  .scene { padding: 24px; }
  .coordinate { right: 22px; max-width: 160px; text-align: right; }
  .specimen-nav { left: 22px; bottom: 18px; gap: 8px; }
  .nav-dot { grid-template-columns: 26px auto; font-size: 9px; }
  .nav-dot::before { width: 26px; }
  .scene-label { left: 22px; top: 18vh; }
  .floating-line { max-width: 78vw; }
  .seed-copy, .trace-copy, .prune-copy, .synth-copy { left: 22px; right: 22px; bottom: 18vh; max-width: 84vw; }
  .pane-a { left: 52vw; width: 26vw; }
  .pane-b { left: 18vw; width: 18vw; }
  .pane-c { right: 5vw; width: 55vw; }
  .final-note { display: none; }
}