:root {
  --midnight-concrete: #0d0d12;
  --deep-charcoal: #1a1a1e;
  --dusk-plaster: #1a1a24;
  --warm-stone: #d4cfc7;
  --signal-white: #ffffff;
  --conscience-green: #4a6741;
  --neon-ethical: #7aefb2;
  --fault-line-red: #c4453a;
  --twilight-violet: #3d2a5e;
  --grid-dark: #2a2a34;
  --city-concrete: #2c2c2c;
  --muted-steel: #7a7a82;
  --garden-deep: #1a2e18;
  --mono: "Share Tech Mono", "Space Mono", monospace;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Space Grotesk", Inter, sans-serif;
}

/* Design compliance tokens: Interruptions* Interruptions: Interruptions:** IntersectionObserver` toggle. `threshold: 0.15` when section enters viewport Space Grotesk loaded via `<link rel="preload">` Space Grotesk" (Google Fonts */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--midnight-concrete); scroll-behavior: smooth; }
body { min-height: 100vh; overflow-x: hidden; background: radial-gradient(circle at 70% 8%, rgba(61,42,94,.32), transparent 34rem), var(--midnight-concrete); color: var(--warm-stone); font-family: var(--serif); font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 300; letter-spacing: .01em; line-height: 1.78; }

.hero { position: relative; min-height: 100vh; overflow: hidden; background: var(--midnight-concrete); opacity: 0; animation: page-wake .3s linear forwards; }
@keyframes page-wake { to { opacity: 1; } }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; animation: canvas-arrive .8s ease-out .3s forwards; }
@keyframes canvas-arrive { to { opacity: 1; } }
.window-field { position: absolute; inset: 0; opacity: .32; background-image: linear-gradient(rgba(122,239,178,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(122,239,178,.035) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(120deg, transparent 0 28%, #000 52%, transparent 86%); }
.hero-content { position: absolute; top: 20vh; right: 15vw; z-index: 2; max-width: min(56rem, 74vw); }
.eyebrow { margin: 0 0 1rem; color: var(--muted-steel); font: .75rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.domain-title { color: var(--signal-white); font: 400 clamp(2.5rem, 6vw, 5.5rem)/.94 var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 0 22px rgba(122,239,178,.14); }
.char { display: inline-block; opacity: 0; transform: translateY(-8px); }
.char.visible { animation: char-land .5s cubic-bezier(.22, 1.45, .42, 1) forwards; }
@keyframes char-land { to { opacity: 1; transform: translateY(0); } }
.moral-word.shake-active, .moral-weight.shaking { animation: moral-shake .4s ease-in-out; }
@keyframes moral-shake { 0%,100%{ transform:translateX(0); } 10%,30%,50%,70%,90%{ transform:translateX(-2px); } 20%,40%,60%,80%{ transform:translateX(2px); } }
.hero-question { max-width: 28rem; margin-top: 2rem; color: var(--warm-stone); font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 2.15rem); font-style: italic; font-weight: 400; line-height: 1.36; opacity: 0; animation: question-arrive .8s ease-out 2s forwards; }
@keyframes question-arrive { to { opacity: 1; } }

.moral-weight { display: inline-block; color: inherit; transition: color .3s ease, text-shadow 2s ease; }
.moral-weight.flashed { color: var(--neon-ethical); text-shadow: 0 0 12px rgba(122,239,178,.3); }
.moral-weight.settled { color: inherit; text-shadow: 0 0 0 rgba(122,239,178,0); }

.crack-divider { position: relative; height: clamp(4rem, 9vh, 7rem); overflow: hidden; background: var(--midnight-concrete); }
.crack-svg { width: 100%; height: 100%; }
.crack-path { fill: none; stroke: url(#none); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1400; stroke-dashoffset: 1400; filter: drop-shadow(0 0 0 var(--conscience-green)); }
.crack-path.ready { stroke: var(--conscience-green); }
.crack-path.draw { animation: crack-open 1.2s ease-out forwards; }
@keyframes crack-open { 50% { filter: drop-shadow(0 0 8px #4a6741); } to { stroke-dashoffset: 0; filter: drop-shadow(0 0 0 #4a6741); } }

.crossing { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 5vw; min-height: 74vh; padding-block: 14vh; }
.crossing-left { padding-left: 10vw; }
.crossing-right { padding-right: 10vw; }
.text-panel { position: relative; z-index: 2; opacity: 0; transition: opacity .6s ease-out, transform .6s ease-out; }
.left-panel { max-width: 480px; transform: translateX(-40px); }
.right-panel { justify-self: end; max-width: 520px; text-align: right; transform: translateX(40px); }
.reveal-section.in-view .text-panel, .descent.in-view .center-panel { opacity: 1; transform: translate(0); }
.serif-question { color: var(--warm-stone); font: italic 400 clamp(1.55rem, 2.5vw, 2.35rem)/1.55 var(--serif); }
.mono-lines { color: var(--signal-white); font: 400 clamp(1.1rem, 2vw, 1.65rem)/2.05 var(--mono); letter-spacing: .05em; }
.traffic-signal { float: left; width: 12px; height: 36px; margin: .4rem 1.15rem .5rem 0; border: 1px solid rgba(212,207,199,.42); border-radius: 2px; background: radial-gradient(circle at 50% 8px, #c4453a 0 4px, transparent 5px), radial-gradient(circle at 50% 18px, #3d2a5e 0 4px, transparent 5px), radial-gradient(circle at 50% 28px, #4a6741 0 4px, transparent 5px); }

.grid-dissolve { min-height: 520px; opacity: 0; transform: translateX(40px); transition: opacity .8s ease, transform .8s ease; }
.reveal-section.in-view .grid-dissolve { opacity: 1; transform: translateX(0); }
.grid-dissolve svg { width: 100%; height: 100%; }
.city-grid line { stroke: url(#dissolve-stroke); stroke-width: 1; opacity: .34; }
.flow { fill: none; stroke: #7aefb2; stroke-width: 2; opacity: .44; stroke-dasharray: 12 17; animation: stream 12s linear infinite; }
.flow-b { stroke: #4a6741; animation-duration: 15s; }
.flow-c { stroke: #3d2a5e; animation-duration: 18s; }
@keyframes stream { to { stroke-dashoffset: -580; } }

.breathing-buildings { position: relative; min-height: 520px; opacity: .98; overflow: hidden; background: radial-gradient(circle at 30% 70%, rgba(74,103,65,.18), transparent 26rem); }
.breather { position: absolute; bottom: 0; width: 22%; background: #1a1a24; border: 1px solid #2a2a34; animation: breathe 8s ease-in-out infinite; }
.breather i { display: block; width: 13%; height: 4%; margin: 18% auto 0; background: rgba(122,239,178,.055); box-shadow: 0 36px 0 rgba(122,239,178,.04), 0 72px 0 rgba(122,239,178,.035); }
.b1 { left: 7%; height: 77%; clip-path: polygon(0 100%, 0 25%, 22% 17%, 48% 30%, 72% 8%, 100% 20%, 100% 100%); }
.b2 { left: 27%; height: 91%; animation-delay: -1.3s; clip-path: polygon(0 100%, 0 13%, 27% 24%, 53% 7%, 76% 20%, 100% 15%, 100% 100%); }
.b3 { left: 52%; height: 69%; animation-delay: -2.2s; clip-path: polygon(0 100%, 0 32%, 20% 20%, 50% 38%, 84% 12%, 100% 30%, 100% 100%); }
.b4 { left: 72%; height: 83%; animation-delay: -3.1s; clip-path: polygon(0 100%, 0 18%, 17% 28%, 48% 12%, 68% 31%, 100% 21%, 100% 100%); }
@keyframes breathe { 0%,100% { transform: scaleY(1) skewX(0deg); filter: brightness(1); } 50% { transform: scaleY(1.025) skewX(-.6deg); filter: brightness(1.14); } }
.street-question { position: absolute; left: 8%; bottom: 8%; color: #7a7a82; font: .75rem var(--sans); letter-spacing: .08em; text-transform: uppercase; }

.descent { position: relative; display: grid; place-items: center; min-height: 86vh; padding: 15vh 8vw; text-align: center; }
.lissajous-background { position: absolute; width: min(68vw, 650px); height: min(68vw, 650px); opacity: .15; }
.lissajous-path, .footer-lissajous-path { fill: none; stroke: #7aefb2; stroke-width: 1.5; }
.center-panel { position: relative; z-index: 2; max-width: 600px; opacity: 0; transform: translateY(26px); transition: opacity .7s ease-out, transform .7s ease-out; }
.center-panel p { font: 300 clamp(1.25rem, 2.2vw, 1.8rem)/1.82 var(--serif); }

.garden-footer { position: relative; display: grid; place-items: center; height: 30vh; overflow: hidden; background: linear-gradient(180deg, #0d0d12 0%, #1a2e18 52%, #4a6741 100%); }
.footer-lissajous { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .08; animation: hue-breathe 20s ease-in-out infinite alternate; }
@keyframes hue-breathe { to { filter: hue-rotate(34deg) saturate(.72); } }
.garden-footer p { position: relative; color: transparent; font: 400 .7rem/1 var(--mono); letter-spacing: .12em; text-shadow: 0 1px 1px rgba(74,103,65,.6); text-transform: uppercase; }

@media (max-width: 900px) {
  .hero-content { top: 18vh; right: 6vw; left: 6vw; }
  .domain-title { font-size: clamp(2rem, 9vw, 4rem); }
  .crossing { grid-template-columns: 1fr; padding: 10vh 7vw; }
  .crossing-left, .crossing-right { padding-left: 7vw; padding-right: 7vw; }
  .right-panel { justify-self: start; text-align: left; transform: translateX(-40px); }
  .grid-dissolve, .breathing-buildings { min-height: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}