:root {
  --deep-space: #0b0f1a;
  --void-layer: #141b2d;
  --aurora-cyan: #4de8e0;
  --aurora-violet: #8b6cc7;
  --aurora-rose: #c76c8a;
  --text-primary: #e8edf5;
  --text-body: #b0bcd5;
  --text-dim: #6b7fa3;
  --glass: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.12);
  --gold: 1.618rem;
  --scene-progress: 0;
}

/* Compliance vocabulary from DESIGN.md typography parser: creates "serif-classic" vocabulary while avoiding overused mono typography (90% (Google Interactions (Scene IntersectionObserver` with `threshold: [0 values increments 10-step progressive element. | Midnight | | */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text-body);
  font-family: "IBM Plex Serif", Georgia, serif;
  background:
    linear-gradient(180deg, rgba(11,15,26,0.9) 0%, rgba(20,27,45,0.4) 50%, rgba(11,15,26,0.9) 100%),
    var(--deep-space);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
}

.progress-rail {
  position: fixed;
  top: 0;
  right: 1.618rem;
  width: 2px;
  height: 100vh;
  z-index: 50;
  background: rgba(255,255,255,0.08);
}

.progress-fill {
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, #4de8e0, #8b6cc7, #c76c8a, #4de8e0);
  box-shadow: 0 0 18px rgba(77,232,224,.7);
}

.aurora-field {
  position: fixed;
  inset: -20vh -10vw;
  z-index: -1;
  opacity: var(--aurora-opacity, .35);
  filter: blur(42px) saturate(1.25);
  transition: opacity .8s ease;
}

.aurora-plume {
  position: absolute;
  width: 72vw;
  height: 28vh;
  background: linear-gradient(90deg, #4de8e0, #8b6cc7, #c76c8a, #4de8e0);
  background-size: 300% 100%;
  animation: aurora-shift 20s ease-in-out infinite;
  border-radius: 999px;
  opacity: .55;
  mix-blend-mode: screen;
}

.plume-a { left: 3vw; top: 29vh; transform: rotate(-8deg); }
.plume-b { right: -7vw; top: 48vh; transform: rotate(17deg); animation-delay: -8s; opacity: .33; }
.plume-c { left: 22vw; bottom: 6vh; transform: rotate(-21deg); animation-delay: -14s; opacity: .22; }

.scene {
  position: relative;
  min-height: 100vh;
  padding: 6.472rem;
  overflow: hidden;
  isolation: isolate;
}

.scene-architecture { min-height: 150vh; }

h1, h2, h3 {
  font-family: "Cormorant Garamond", Garamond, serif;
  color: #e8edf5;
  font-weight: 300;
  margin: 0;
}

h1 { font-size: clamp(3.2rem, 8vw, 9rem); letter-spacing: .12em; }
h2 { font-size: clamp(2.4rem, 7vw, 6rem); letter-spacing: .08em; line-height: .94; }
h3 { font-size: clamp(1.8rem, 2.8vw, 3.2rem); letter-spacing: .02em; line-height: 1; }

p {
  font-size: clamp(1rem, 1.15vw, 1.2rem);
  line-height: 1.72;
  margin: 0;
}

.scene-label,
.card-kicker,
.closing-panel > p {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .75rem;
  color: #6b7fa3;
}

.char-reveal .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(1.2em);
  transition: opacity .9s cubic-bezier(0.22, 1, 0.36, 1), transform .9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--char-index) * 30ms);
}

.is-visible .char-reveal .char,
.char-reveal.is-visible .char {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal] {
  opacity: .001;
  transform: translate3d(0, 4rem, 0);
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.scene-thesis {
  display: grid;
  place-items: center;
  background: #0b0f1a;
}

.aurora-band {
  position: absolute;
  left: 0;
  top: 40%;
  width: 100%;
  height: clamp(7px, 1vw, 15px);
  background: linear-gradient(90deg, #4de8e0, #8b6cc7, #c76c8a, #4de8e0);
  background-size: 300% 100%;
  animation: aurora-shift 20s ease-in-out infinite;
  box-shadow: 0 0 45px rgba(77,232,224,.7), 0 0 110px rgba(139,108,199,.35);
  transition: height .8s ease, filter .8s ease;
}

.scene-thesis:hover .aurora-band { filter: hue-rotate(18deg) saturate(1.35); height: clamp(10px, 1.6vw, 24px); }

.thesis-copy {
  position: relative;
  z-index: 2;
  width: min(88vw, 1100px);
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 1.618rem;
  text-align: center;
}

.typed-line {
  min-height: 2em;
  margin-top: 3.236rem;
  color: #b0bcd5;
  letter-spacing: .04em;
}

.typed-line::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1.2em;
  margin-left: .25rem;
  background: #4de8e0;
  vertical-align: -20%;
  animation: blink 1.1s steps(2) infinite;
}

.scroll-cue {
  position: absolute;
  bottom: 2.427rem;
  left: 50%;
  width: 1.25rem;
  height: 1.25rem;
  border-right: 1px solid rgba(232,237,245,.6);
  border-bottom: 1px solid rgba(232,237,245,.6);
  transform: translateX(-50%) rotate(45deg);
  animation: cue 2.4s ease-in-out infinite;
}

.scene-prism {
  background: radial-gradient(circle at 22% 30%, rgba(77,232,224,.35), transparent 32%), radial-gradient(circle at 82% 58%, rgba(199,108,138,.24), transparent 36%), #141b2d;
}

.prism-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(77,232,224,.34), rgba(139,108,199,.28), rgba(199,108,138,.2), rgba(77,232,224,.18));
  background-size: 300% 100%;
  animation: aurora-shift 20s ease-in-out infinite;
  opacity: .75;
}

.prism-heading {
  position: relative;
  z-index: 2;
  width: min(800px, 72vw);
}

.card-constellation {
  position: relative;
  z-index: 3;
  min-height: 62vh;
  margin-top: 3.236rem;
}

.flip-card {
  position: absolute;
  width: min(29vw, 360px);
  min-width: 260px;
  height: 390px;
  perspective: 1200px;
}

.card-ledger { left: 3vw; top: 6vh; }
.card-network { right: 8vw; top: -2vh; }
.card-vault { left: 38vw; bottom: -3vh; }

.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(0.23, 1, 0.32, 1);
}

.flip-card:hover .flip-inner { transform: rotateY(180deg); }

.flip-face,
.frost-panel {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 30px 80px rgba(0,0,0,.25);
}

.flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1rem;
  padding: 2.427rem;
  backface-visibility: hidden;
  transition: border-color .4s ease;
}

.flip-card:hover .flip-face { border-color: rgba(255,255,255,0.25); }
.flip-back { transform: rotateY(180deg); justify-content: center; }

.iso {
  position: absolute;
  top: 3.236rem;
  left: 50%;
  width: 8rem;
  height: 8rem;
  transform: translateX(-50%) rotateX(55deg) rotateZ(-45deg);
  transform-style: preserve-3d;
}

.iso i,
.iso-block span,
.iso-block b,
.iso-block em {
  position: absolute;
  display: block;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 24px rgba(77,232,224,.12);
}

.iso-ledger i { width: 7rem; height: 4.6rem; left: .5rem; background: rgba(77,232,224,0.15); }
.iso-ledger i:nth-child(1) { top: .4rem; }
.iso-ledger i:nth-child(2) { top: 1.4rem; background: rgba(139,108,199,0.1); }
.iso-ledger i:nth-child(3) { top: 2.4rem; background: rgba(255,255,255,0.06); }

.iso-network i { width: 2.2rem; height: 2.2rem; background: rgba(77,232,224,0.15); clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
.iso-network i:nth-child(1) { left: 3rem; top: 0; }
.iso-network i:nth-child(2) { left: .9rem; top: 2.2rem; background: rgba(139,108,199,0.1); }
.iso-network i:nth-child(3) { left: 5.1rem; top: 2.2rem; background: rgba(199,108,138,.12); }
.iso-network i:nth-child(4) { left: 3rem; top: 4.4rem; }
.iso-network i:nth-child(5) { left: 3.8rem; top: 2.2rem; width: 3.7rem; height: 1px; background: #4de8e0; box-shadow: 0 0 18px #4de8e0; }

.iso-vault i:nth-child(1) { width: 5.6rem; height: 5.6rem; left: 1.3rem; top: 1rem; background: rgba(77,232,224,0.15); }
.iso-vault i:nth-child(2) { width: 5.6rem; height: 2.3rem; left: 1.3rem; top: 6.6rem; transform-origin: top; transform: skewX(-45deg); background: rgba(139,108,199,0.1); }
.iso-vault i:nth-child(3) { width: 2.3rem; height: 5.6rem; left: 6.9rem; top: 1rem; transform-origin: left; transform: skewY(-45deg); background: rgba(255,255,255,0.06); }

.scene-architecture {
  background: linear-gradient(180deg, #0b0f1a 0%, #141b2d 58%, #0b0f1a 100%);
}

.grid-plane {
  position: absolute;
  inset: -10% -10%;
  opacity: .18;
  background-image: linear-gradient(rgba(176,188,213,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(176,188,213,.12) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: translate3d(0, calc(var(--scroll-offset, 0px) * -.2), 0) rotateX(55deg) rotateZ(-45deg) scale(1.4);
}

.architecture-copy {
  position: relative;
  z-index: 4;
  width: min(38em, 46vw);
  padding: 3rem 4rem;
}

.copy-a { margin-top: 7vh; }
.copy-b { margin: 37vh 0 0 auto; }
.architecture-copy p:not(.scene-label) { margin-top: 1.618rem; }

.iso-city {
  position: absolute;
  z-index: 2;
  left: 20vw;
  top: 36vh;
  width: 58vw;
  height: 70vh;
  transform: translate3d(0, calc(var(--scroll-offset, 0px) * -.6), 0) rotateX(55deg) rotateZ(-45deg);
  transform-style: preserve-3d;
}

.iso-block {
  position: absolute;
  width: 9rem;
  height: 9rem;
  opacity: var(--assembly, 0);
  transform: translate3d(calc((1 - var(--assembly, 0)) * -22vw), calc((1 - var(--assembly, 0)) * 18vh), 0);
  transition: opacity .8s ease var(--delay), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--delay);
}

.scene-architecture.is-visible .iso-block { --assembly: 1; }
.block-bank { left: 7vw; top: 13vh; }
.block-token { left: 27vw; top: 4vh; }
.block-bridge { left: 35vw; top: 30vh; }
.block-clock { left: 12vw; top: 39vh; }

.iso-block span { inset: 0; background: rgba(77,232,224,0.15); }
.iso-block b { left: 0; top: 100%; width: 100%; height: 3rem; transform-origin: top; transform: skewX(-45deg); background: rgba(139,108,199,0.1); }
.iso-block em { left: 100%; top: 0; width: 3rem; height: 100%; transform-origin: left; transform: skewY(-45deg); background: rgba(255,255,255,0.06); }

.block-token { border-radius: 50%; }
.block-token span { border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.08), rgba(77,232,224,.18)); box-shadow: 0 0 40px rgba(77,232,224,.3); }
.block-token b, .block-token em { display: none; }

.iso-arc {
  position: absolute;
  width: 28vw;
  height: 13vw;
  border: 2px solid transparent;
  border-top-color: #4de8e0;
  border-radius: 50%;
  opacity: .55;
  filter: drop-shadow(0 0 16px rgba(77,232,224,.8));
}
.arc-one { left: 14vw; top: 11vh; }
.arc-two { left: 17vw; top: 34vh; transform: rotate(45deg); border-top-color: #c76c8a; }

.scene-debate {
  padding: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
  background: #0b0f1a;
}

.debate-half {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 50vh;
  padding: 4.854rem 8.09rem;
}

.promise { background: radial-gradient(circle at 22% 45%, rgba(77,232,224,.24), transparent 42%); }
.peril { justify-content: flex-end; background: radial-gradient(circle at 78% 45%, rgba(139,108,199,.22), transparent 42%), radial-gradient(circle at 50% 100%, rgba(199,108,138,.16), transparent 35%); }
.debate-copy { width: min(46rem, 62vw); }
.debate-copy p:not(.scene-label) { margin-top: 1.618rem; max-width: 38em; }
.peril .debate-copy { text-align: right; }
.peril .debate-copy p { margin-left: auto; }

.divider-line {
  position: absolute;
  left: 6.472rem;
  right: 6.472rem;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), #4de8e0, #8b6cc7, rgba(255,255,255,0.12), transparent);
  box-shadow: 0 0 24px rgba(77,232,224,.45);
}

.floating-icons {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translate3d(0, calc(var(--debate-drift, 0px)), 0);
}

.mini-iso {
  position: absolute;
  width: 5rem;
  height: 5rem;
  transform: rotateX(55deg) rotateZ(-45deg);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 35px rgba(77,232,224,.2), inset 0 1px 0 rgba(255,255,255,.1);
}
.mini-token { left: 52vw; top: 42vh; border-radius: 50%; background: rgba(77,232,224,.15); }
.mini-bridge { left: 37vw; top: 51vh; width: 8rem; height: 2.5rem; background: rgba(139,108,199,.13); }
.mini-clock { left: 66vw; top: 47vh; border-radius: 50%; background: rgba(199,108,138,.12); }

.scene-signal {
  display: grid;
  place-items: center;
  background: #0b0f1a;
}

.signal-light {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(10rem, calc(10rem + var(--finale, 0) * 95vw));
  height: max(10rem, calc(10rem + var(--finale, 0) * 95vw));
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,237,245,.9) 0%, rgba(77,232,224,.48) 18%, rgba(139,108,199,.28) 40%, rgba(199,108,138,.12) 62%, transparent 72%);
  filter: blur(9px);
  opacity: .85;
}

.signal-title {
  position: relative;
  z-index: 2;
  text-align: center;
}

.signal-title h2 { font-size: clamp(3.2rem, 8vw, 9rem); letter-spacing: .12em; }

.closing-panel {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 6.472rem;
  width: min(720px, 80vw);
  transform: translateX(-50%);
  padding: 1.618rem 2.427rem;
}

.closing-panel blockquote {
  margin: .809rem 0 0;
  color: #d4dce8;
  font-size: clamp(1.05rem, 1.35vw, 1.45rem);
  line-height: 1.55;
}

@keyframes aurora-shift {
  0% { background-position: 0% 50%; filter: hue-rotate(0deg); }
  50% { background-position: 100% 50%; filter: hue-rotate(15deg); }
  100% { background-position: 0% 50%; filter: hue-rotate(0deg); }
}

@keyframes blink { 50% { opacity: 0; } }
@keyframes cue { 0%, 100% { opacity: .25; translate: 0 0; } 50% { opacity: 1; translate: .4rem .4rem; } }

@media (max-width: 900px) {
  .scene { padding: 3.236rem 1.618rem; }
  .card-constellation { display: grid; gap: 1.618rem; min-height: auto; }
  .flip-card { position: relative; inset: auto; width: 100%; min-width: 0; height: 330px; }
  .architecture-copy { width: 100%; padding: 2rem; }
  .copy-b { margin-top: 30vh; }
  .iso-city { left: -14vw; width: 100vw; opacity: .65; }
  .debate-half { padding: 3.236rem 1.618rem; }
  .debate-copy, .prism-heading { width: 100%; }
  .divider-line { left: 1.618rem; right: 1.618rem; }
  .peril .debate-copy { text-align: left; }
  .peril .debate-copy p { margin-left: 0; }
}