:root {
  /* Design vocabulary: IntersectionObserver fires (threshold: 0.3 on each section; Space Grotesk (400 500 clarity and groundedness. Space Grotesk Mono-like tracking (0.06em letter-spacing (Google Fonts */
  --cream: #F5E6D0;
  --parchment: #EDE0D1;
  --umber: #3D2B1F;
  --burnt: #5C4033;
  --terra: #C67B5C;
  --sienna: #A0522D;
  --amber: #D4A054;
  --sage: #8B9D77;
  --rose: #B5836A;
  --scroll-px: 0px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  color: var(--burnt);
  background: var(--cream);
  overflow-x: hidden;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  filter: url(#grain);
  background: var(--burnt);
  z-index: 1000;
}

.grain-source { position: absolute; width: 0; height: 0; }

.puzzle-garden { position: relative; }

.chamber {
  position: relative;
  min-height: 100vh;
  overflow: clip;
  background: var(--cream);
}

.chamber.long { min-height: 115vh; }
.chamber-two { min-height: 120vh; }
.chamber-four { background: var(--umber); }

.sticky-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--cream);
  transition: background-color 600ms ease;
}

.dusk-stage {
  background:
    radial-gradient(circle at 20% 18%, rgba(212, 160, 84, 0.1), transparent 28%),
    linear-gradient(180deg, rgba(245, 230, 208, 0.13), rgba(61, 43, 31, 0.98) 28%, var(--umber));
}

.resolution-stage { background: var(--cream); }

.progress-line {
  position: fixed;
  right: 1.4rem;
  top: 12vh;
  width: 2px;
  height: 76vh;
  background: rgba(198, 123, 92, 0.22);
  z-index: 100;
}

.progress-marker {
  position: absolute;
  left: 50%;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--terra);
  box-shadow: 0 0 8px rgba(198, 123, 92, 0.4);
  transform: translate(-50%, -50%);
}

.section-label {
  position: fixed;
  left: 1.6rem;
  top: 50%;
  z-index: 100;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: rgba(198, 123, 92, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  writing-mode: vertical-rl;
  transform: translateY(-50%);
  transition: opacity 300ms ease, transform 300ms ease;
}

.section-label.swapping { opacity: 0; transform: translateY(calc(-50% + 12px)); }

.shape-field, .garden-scene, .construction-lines, .ghost-garden {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.drift-slow { transform: translate3d(0, calc(var(--scroll-px) * -0.025), 0); }
.drift-mid { transform: translate3d(0, calc(var(--scroll-px) * -0.055), 0); }
.drift-fast { transform: translate3d(0, calc(var(--scroll-px) * -0.085), 0); }

.shape {
  position: absolute;
  opacity: 0.88;
  filter: drop-shadow(0 18px 24px rgba(92, 64, 51, 0.1));
  animation: shapeWake 1100ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.triangle { width: 8rem; height: 8rem; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.arc { width: 9rem; height: 9rem; border-radius: 100% 0 0 0; }
.trapezoid { width: 12rem; height: 5.8rem; clip-path: polygon(14% 0, 100% 22%, 82% 100%, 0 78%); }
.pebble { width: 5rem; height: 7rem; border-radius: 50% 0 50% 0; transform: rotate(24deg); }
.bridge-line { width: 18rem; height: 1px; border-top: 1px dashed var(--rose); opacity: 0.55; }

.terra { background: var(--terra); }
.sienna { background: var(--sienna); }
.sage { background: var(--sage); }
.amber { background: var(--amber); }
.cream { background: var(--parchment); }

.p1 { left: 7%; top: 18%; transform: rotate(21deg); animation-delay: 120ms; }
.p2 { right: 12%; top: 12%; width: 5.7rem; height: 5.7rem; transform: rotate(141deg); animation-delay: 320ms; }
.p3 { left: 18%; bottom: 10%; width: 6.8rem; height: 6.8rem; transform: rotate(278deg); animation-delay: 520ms; }
.p4 { right: 19%; bottom: 16%; transform: rotate(90deg); animation-delay: 720ms; }
.p5 { left: 42%; top: 8%; width: 7rem; height: 7rem; transform: rotate(180deg); animation-delay: 920ms; }
.p6 { right: 4%; top: 47%; transform: rotate(-12deg); animation-delay: 1120ms; }
.p7 { left: 4%; top: 58%; transform: rotate(16deg); animation-delay: 1320ms; }
.p8 { left: 72%; top: 38%; animation-delay: 1520ms; }
.p9 { left: 33%; bottom: 24%; width: 4.8rem; height: 4.8rem; transform: rotate(45deg); animation-delay: 1720ms; }

.opening-copy, .narrative, .closing-copy {
  position: relative;
  z-index: 2;
  max-width: 38rem;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}

.tiny-marker {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: rgba(198, 123, 92, 0.65);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 1.4rem;
}

.domain-assembly, .final-domain {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: clamp(2.4rem, 7vw, 6rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--umber);
}

.domain-assembly span {
  display: inline-block;
  opacity: 0;
  transform: translate(var(--x), var(--y)) rotate(var(--r));
  animation: letterAssemble 900ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--d) both, letterBreathe 6s ease-in-out calc(1500ms + var(--d)) infinite;
  transform-origin: 50% 70%;
}

.poetic-line {
  max-width: 32rem;
  margin: 1.6rem auto 0;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: rgba(92, 64, 51, 0.85);
}

.a1 { left: 11%; top: 24%; transform: rotate(92deg); }
.a2 { right: 18%; top: 18%; width: 9rem; height: 9rem; transform: rotate(220deg); }
.a3 { left: 64%; bottom: 20%; transform: rotate(-24deg); }
.a4 { left: 17%; bottom: 14%; transform: rotate(270deg); }
.a5 { right: 7%; bottom: 38%; width: 6rem; height: 6rem; transform: rotate(30deg); }
.a6 { left: 41%; top: 30%; transform: rotate(-33deg); }
.a7 { left: 4%; top: 46%; width: 5rem; height: 5rem; transform: rotate(180deg); }

.narrative { text-align: left; }
.assembly-copy { margin-left: min(45vw, 42rem); }
.garden-copy { margin-left: max(8vw, 4rem); }
.workshop-copy { color: var(--parchment); margin-right: min(42vw, 38rem); }

.chamber-title, .answer-line, .blueprint-title {
  margin: 0 0 1.2rem;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  font-style: italic;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--umber);
}

.narrative p:not(.tiny-marker) {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: rgba(92, 64, 51, 0.85);
}

.answer-line { font-family: "Space Grotesk", sans-serif; font-style: normal; font-weight: 500; letter-spacing: -0.03em; }
.blueprint-title { color: var(--parchment); font-family: "Space Grotesk", sans-serif; font-style: normal; letter-spacing: 0.06em; text-transform: lowercase; }
.workshop-copy p:not(.tiny-marker) { color: rgba(237, 224, 209, 0.82); letter-spacing: 0.06em; }

.garden-scene { opacity: 0.95; }
.sun-rings {
  position: absolute;
  right: 15%; top: 13%;
  width: 8rem; height: 8rem;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 1.2rem var(--cream), 0 0 0 2.1rem var(--amber), 0 0 0 3.2rem rgba(212, 160, 84, 0.28);
}

.hill { position: absolute; width: 58vw; height: 28vh; border-radius: 50% 50% 0 0; bottom: 0; opacity: 0.58; }
.hill-one { left: -10vw; background: var(--terra); }
.hill-two { right: -15vw; background: var(--sage); height: 23vh; opacity: 0.48; }
.path-segment { position: absolute; width: 13rem; height: 6rem; background: rgba(198, 123, 92, 0.7); clip-path: polygon(18% 0, 100% 18%, 78% 100%, 0 86%); }
.path-one { left: 45%; bottom: 6%; transform: rotate(68deg); }
.path-two { left: 40%; bottom: 21%; transform: rotate(48deg); }
.path-three { left: 34%; bottom: 36%; transform: rotate(28deg); }

.tree { position: absolute; width: 7rem; height: 10rem; }
.tree i { position: absolute; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 3.2rem solid transparent; border-right: 3.2rem solid transparent; border-bottom: 4.5rem solid var(--sage); }
.tree i:nth-child(1) { top: 0; filter: brightness(0.9); }
.tree i:nth-child(2) { top: 2.1rem; transform: translateX(-50%) scale(0.86); opacity: 0.88; }
.tree i:nth-child(3) { top: 4rem; transform: translateX(-50%) scale(0.7); opacity: 0.78; }
.tree b { position: absolute; left: 50%; bottom: 0; width: 0.9rem; height: 3rem; background: var(--sienna); transform: translateX(-50%); }
.tree-one { left: 18%; bottom: 22%; }
.tree-two { right: 25%; bottom: 26%; transform: scale(0.78); }
.tree-three { left: 62%; bottom: 13%; transform: scale(0.62); }
.leaf { position: absolute; width: 2rem; height: 3rem; background: var(--sage); border-radius: 50% 0 50% 0; opacity: 0.75; }
.l1 { left: 27%; top: 20%; transform: rotate(28deg); } .l2 { right: 34%; top: 32%; transform: rotate(-16deg); }
.l3 { left: 66%; top: 54%; transform: rotate(52deg); } .l4 { left: 12%; top: 52%; transform: rotate(-42deg); }

.ghost-garden { opacity: 0.11; background: radial-gradient(circle at 70% 24%, var(--amber) 0 5rem, transparent 5.1rem), radial-gradient(ellipse at 24% 92%, var(--sage) 0 22vw, transparent 22.3vw); }
.construction-lines .guide, .wire { position: absolute; border: 1px dashed var(--rose); background: transparent; opacity: 0.68; }
.circle-guide { left: 15%; top: 18%; width: 22rem; height: 22rem; border-radius: 50%; }
.square-guide { right: 12%; top: 20%; width: 18rem; height: 18rem; transform: rotate(18deg); }
.diagonal-guide { left: 22%; top: 66%; width: 56vw; height: 1px; transform: rotate(-17deg); }
.measure-one { left: 9%; top: 48%; width: 82vw; height: 1px; }
.measure-two { left: 50%; top: 11%; width: 1px; height: 76vh; }
.wire-one { right: 24%; bottom: 14%; width: 9rem; height: 9rem; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.wire-two { left: 54%; bottom: 18%; width: 13rem; height: 6rem; clip-path: polygon(14% 0, 100% 22%, 82% 100%, 0 78%); }
.wire-three { left: 12%; bottom: 12%; width: 8rem; height: 8rem; border-radius: 100% 0 0 0; }
.rotate-shape { animation: rotateSlow 30s linear infinite; }
.breathe-shape { animation: breatheShape 7s ease-in-out infinite; }

.mandala {
  position: relative;
  width: min(64vw, 34rem);
  height: min(64vw, 34rem);
  display: grid;
  place-items: center;
  margin-top: -8vh;
}

.mandala-piece {
  position: absolute;
  width: clamp(3.2rem, 7vw, 5rem);
  height: clamp(3.2rem, 7vw, 5rem);
  opacity: 0;
  transform: translate(var(--scatter-x), var(--scatter-y)) rotate(-80deg) scale(0.75);
  transition: transform 1500ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 900ms ease;
}
.mandala.is-visible .mandala-piece {
  opacity: 0.92;
  transform: rotate(var(--angle)) translate(var(--radius)) rotate(calc(var(--angle) * -1)) scale(1);
}
.mandala-piece:nth-child(1) { transition-delay: 0ms; } .mandala-piece:nth-child(2) { transition-delay: 90ms; }
.mandala-piece:nth-child(3) { transition-delay: 180ms; } .mandala-piece:nth-child(4) { transition-delay: 270ms; }
.mandala-piece:nth-child(5) { transition-delay: 360ms; } .mandala-piece:nth-child(6) { transition-delay: 450ms; }
.mandala-piece:nth-child(7) { transition-delay: 540ms; } .mandala-piece:nth-child(8) { transition-delay: 630ms; }
.mandala-piece:nth-child(9) { transition-delay: 720ms; } .mandala-piece:nth-child(10) { transition-delay: 810ms; }
.mandala-piece:nth-child(11) { transition-delay: 900ms; } .mandala-piece:nth-child(12) { transition-delay: 990ms; }
.mandala-core { width: 7rem; height: 7rem; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 1rem var(--cream), 0 0 0 1.7rem var(--terra), 0 0 0 2.2rem var(--parchment); z-index: 2; }

.closing-copy { position: absolute; inset: auto 0 9vh; max-width: none; }
.final-domain { font-size: clamp(4rem, 10vw, 8rem); }
.closing-sentence { margin: 0.6rem 0 0; font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; font-size: clamp(1.4rem, 3vw, 2.2rem); color: var(--umber); }

.reveal-line { opacity: 0; transform: translateY(24px); transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.reveal-line.is-visible { opacity: 1; transform: translateY(0); }

@keyframes letterAssemble { to { opacity: 1; transform: translate(0, 0) rotate(0deg); } }
@keyframes letterBreathe { 0%, 100% { scale: 1; } 50% { scale: 1.015; } }
@keyframes shapeWake { from { opacity: 0; transform: translateY(40px) rotate(15deg) scale(0.92); } }
@keyframes rotateSlow { to { rotate: 360deg; } }
@keyframes breatheShape { 0%, 100% { scale: 0.97; } 50% { scale: 1.03; } }

@media (max-width: 760px) {
  .progress-line { right: 0.8rem; }
  .section-label { left: 0.8rem; }
  .assembly-copy, .garden-copy, .workshop-copy { margin: 0 auto; }
  .narrative { text-align: center; }
  .shape { opacity: 0.58; }
  .mandala { width: 82vw; height: 82vw; }
  .mandala-piece { --radius: 6rem; }
}