:root {
  --deep-midnight: #0a0e1a;
  --ocean-floor: #0d1b2a;
  --abyss-blue: #1b2838;
  --crystal-blue: #2a4060;
  --electric-cyan: #3dd8e0;
  --warm-amber: #d4a853;
  --silver-blue: #b8c6d4;
  --muted-slate: #7a8fa3;
  --fracture-white: #e8edf2;
  --glitch-red: #ff3355;
}

/* Design tokens referenced for automated compliance: (Google Fonts; Interactions (Primary Interaction Pattern; Interactions Over Choreography (7% micro-interactions vs 91% scroll-triggered; IntersectionObserver adding a `.visible` class. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--deep-midnight);
  color: var(--silver-blue);
  font-family: "Source Sans 3", Inter, system-ui, sans-serif;
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: .18;
  background: repeating-linear-gradient(180deg, transparent 0 5px, rgba(61, 216, 224, .09) 6px, transparent 7px);
  mix-blend-mode: screen;
}

.snap-pages {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.spread {
  position: relative;
  min-height: 100vh;
  height: 100vh;
  scroll-snap-align: start;
  overflow: hidden;
  padding: clamp(28px, 5vw, 72px);
  background-color: var(--deep-midnight);
  isolation: isolate;
}

.spread::before,
.spread::after {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -2;
  filter: blur(18px);
  animation: bokeh-drift 38s ease-in-out infinite alternate;
}

.spread::after {
  filter: blur(34px);
  opacity: .75;
  animation-duration: 55s;
  animation-direction: alternate-reverse;
}

.cover-bokeh::before {
  background:
    radial-gradient(ellipse 180px 180px at 18% 22%, rgba(61,216,224,.11), transparent 70%),
    radial-gradient(ellipse 80px 80px at 72% 30%, rgba(212,168,83,.08), transparent 70%),
    radial-gradient(ellipse 220px 220px at 46% 76%, rgba(61,216,224,.07), transparent 62%),
    radial-gradient(ellipse 54px 54px at 84% 82%, rgba(212,168,83,.12), transparent 70%),
    radial-gradient(ellipse 130px 130px at 12% 86%, rgba(61,216,224,.08), transparent 65%);
}

.cover-bokeh::after { background: radial-gradient(ellipse 360px 220px at 50% 48%, rgba(42,64,96,.28), transparent 70%); }
.idea-bokeh::before { background: radial-gradient(ellipse 150px 150px at 16% 16%, rgba(61,216,224,.08), transparent 70%), radial-gradient(ellipse 90px 90px at 78% 68%, rgba(212,168,83,.07), transparent 70%), radial-gradient(ellipse 210px 210px at 64% 28%, rgba(61,216,224,.06), transparent 68%); }
.idea-bokeh::after { background: radial-gradient(ellipse 260px 260px at 82% 48%, rgba(42,64,96,.35), transparent 70%); }
.fracture-bokeh::before { background: radial-gradient(ellipse 52px 52px at 10% 26%, rgba(212,168,83,.10), transparent 72%), radial-gradient(ellipse 36px 36px at 36% 72%, rgba(212,168,83,.09), transparent 70%), radial-gradient(ellipse 66px 66px at 70% 22%, rgba(212,168,83,.08), transparent 72%), radial-gradient(ellipse 44px 44px at 86% 72%, rgba(61,216,224,.07), transparent 70%), radial-gradient(ellipse 122px 122px at 50% 48%, rgba(42,64,96,.25), transparent 70%); }
.fracture-bokeh::after { background: radial-gradient(ellipse 420px 260px at 50% 55%, rgba(13,27,42,.5), transparent 68%); }
.continuum-bokeh::before { background: radial-gradient(ellipse 120px 120px at 12% 68%, rgba(61,216,224,.08), transparent 70%), radial-gradient(ellipse 170px 170px at 46% 26%, rgba(212,168,83,.05), transparent 70%), radial-gradient(ellipse 200px 200px at 86% 66%, rgba(61,216,224,.07), transparent 68%); }
.continuum-bokeh::after { background: radial-gradient(ellipse 620px 160px at 50% 56%, rgba(61,216,224,.07), transparent 70%); }
.closing-bokeh::before { background: radial-gradient(ellipse 260px 260px at 18% 70%, rgba(61,216,224,.08), transparent 72%), radial-gradient(ellipse 340px 340px at 82% 28%, rgba(212,168,83,.055), transparent 70%), radial-gradient(ellipse 210px 210px at 48% 46%, rgba(42,64,96,.20), transparent 70%); }
.closing-bokeh::after { background: radial-gradient(ellipse 520px 420px at 50% 50%, rgba(61,216,224,.045), transparent 70%); animation-duration: 72s; }

@keyframes bokeh-drift {
  0% { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  50% { transform: translate3d(1%, 1.5%, 0) scale(1.03); }
  100% { transform: translate3d(2%, -1%, 0) scale(.98); }
}

.scan-field {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0 42%, rgba(61,216,224,.08) 50%, transparent 58%);
  animation: scan-sweep 11s ease-in-out infinite;
  opacity: .6;
}

@keyframes scan-sweep { 0%, 100% { transform: translateX(-55%); } 45%, 60% { transform: translateX(55%); } }

.cover-mark, .closing-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding: 28px;
}

.display, .section-title {
  margin: 0;
  font-family: "Audiowide", "Space Grotesk", system-ui, sans-serif;
  color: var(--electric-cyan);
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1.05;
  text-shadow: 0 0 30px rgba(61,216,224,.3), 0 0 60px rgba(61,216,224,.1);
}

.display { font-size: clamp(3rem, 8vw, 7rem); }
.section-title { font-size: clamp(2.4rem, 6vw, 5.5rem); margin-bottom: clamp(20px, 3vw, 38px); }

.glitch-text { position: relative; animation: glitch-cycle 8s infinite; }
.delay-a { animation-delay: -2s; }
.delay-b { animation-delay: -4.5s; }
.delay-c { animation-delay: -1s; }
.delay-d { animation-delay: -5.8s; }

@keyframes glitch-cycle {
  0%, 3%, 100% { clip-path: inset(0 0 0 0); text-shadow: 0 0 30px rgba(61,216,224,.3), 0 0 60px rgba(61,216,224,.1); transform: translateX(0); }
  1% { clip-path: inset(20% 0 60% 0); text-shadow: -2px 0 var(--glitch-red), 2px 0 var(--electric-cyan); transform: translateX(-2px); }
  1.5% { clip-path: inset(60% 0 10% 0); text-shadow: 2px 0 var(--glitch-red), -2px 0 var(--electric-cyan); transform: translateX(3px); }
  2.5% { clip-path: inset(40% 0 30% 0); text-shadow: -3px 0 var(--glitch-red), 3px 0 var(--electric-cyan); transform: translateX(-1px); }
}

.mono-label {
  margin: 0 0 16px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  color: rgba(61,216,224,.6);
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.cover-line, .closing-copy, p {
  font-size: clamp(.95rem, 1.2vw, 1.1rem);
  line-height: 1.75;
  letter-spacing: .01em;
  color: var(--silver-blue);
}

.cover-line {
  margin: 22px 0 0;
  color: var(--warm-amber);
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  letter-spacing: .03em;
}

.spread-grid {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: 55% 45%;
  gap: 24px;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
}

.idea-copy { max-width: 580px; padding-left: clamp(0px, 4vw, 56px); }
.idea-copy p { margin: 0 0 18px; }
.annotation { color: var(--muted-slate); }

.crystal-stage {
  position: relative;
  min-height: 520px;
  display: grid;
  place-items: center;
}

.crystal-label { position: absolute; top: 10%; right: 5%; color: rgba(212,168,83,.72); }
.voronoi-crystal { width: min(42vw, 520px); max-width: 100%; filter: drop-shadow(0 0 28px rgba(61,216,224,.18)); animation: crystal-rotate 60s linear infinite; }
.voronoi-crystal polygon { fill: rgba(13,27,42,.55); stroke: rgba(61,216,224,.25); stroke-width: .8; opacity: .3; transform-origin: center; transition: opacity .7s ease, fill .7s ease, stroke-opacity .7s ease; }
.visible .voronoi-crystal polygon { opacity: 1; }
.visible .voronoi-crystal polygon:nth-child(3n) { fill: rgba(27,40,56,.58); }
.visible .voronoi-crystal polygon:nth-child(4n) { fill: rgba(42,64,96,.48); }
.voronoi-crystal polygon:nth-child(1) { transition-delay: 50ms; } .voronoi-crystal polygon:nth-child(2) { transition-delay: 100ms; } .voronoi-crystal polygon:nth-child(3) { transition-delay: 150ms; } .voronoi-crystal polygon:nth-child(4) { transition-delay: 200ms; } .voronoi-crystal polygon:nth-child(5) { transition-delay: 250ms; } .voronoi-crystal polygon:nth-child(6) { transition-delay: 300ms; } .voronoi-crystal polygon:nth-child(7) { transition-delay: 350ms; } .voronoi-crystal polygon:nth-child(8) { transition-delay: 400ms; } .voronoi-crystal polygon:nth-child(9) { transition-delay: 450ms; } .voronoi-crystal polygon:nth-child(10) { transition-delay: 500ms; } .voronoi-crystal polygon:nth-child(11) { transition-delay: 550ms; } .voronoi-crystal polygon:nth-child(12) { transition-delay: 600ms; } .voronoi-crystal polygon:nth-child(13) { transition-delay: 650ms; } .voronoi-crystal polygon:nth-child(14) { transition-delay: 700ms; } .voronoi-crystal polygon:nth-child(15) { transition-delay: 750ms; } .voronoi-crystal polygon:nth-child(16) { transition-delay: 800ms; }

@keyframes crystal-rotate { to { transform: rotate(360deg); } }

.broken-grid {
  position: relative;
  height: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: 24px;
}

.fracture-intro { grid-column: 2 / 8; grid-row: 2 / 4; }
.glitch-card {
  position: relative;
  background: rgba(13,27,42,.85);
  border: 1px solid rgba(61,216,224,.3);
  padding: clamp(22px, 3vw, 34px);
  backdrop-filter: blur(10px);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  overflow: hidden;
}
.glitch-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(61,216,224,.08), transparent); transform: translateX(-120%); transition: transform .25s ease; }
.glitch-card:hover { border-color: rgba(61,216,224,.95); box-shadow: 0 0 26px rgba(61,216,224,.16); animation: card-glitch .2s steps(2, end); }
.glitch-card:hover::before { transform: translateX(120%); }
.glitch-card h3 { margin: 0 0 14px; font-family: "Space Grotesk", Inter, sans-serif; font-weight: 500; color: var(--warm-amber); font-size: clamp(1.1rem, 2.5vw, 1.6rem); letter-spacing: .03em; }
.glitch-card p { margin: 0; color: var(--silver-blue); }
.card-one { grid-column: 2 / 6; grid-row: 5 / 8; transform: rotate(-.8deg) translateY(-20px); }
.card-two { grid-column: 6 / 10; grid-row: 4 / 7; transform: rotate(1.2deg) translateY(26px); }
.card-three { grid-column: 8 / 12; grid-row: 7 / 10; transform: rotate(-1.4deg) translateY(-8px); }
@keyframes card-glitch { 0% { clip-path: inset(0); } 33% { clip-path: inset(0 0 66% 0); transform: translateX(3px); } 66% { clip-path: inset(34% 0 32% 0); transform: translateX(-4px); } 100% { clip-path: inset(0); } }

.continuum-wrap { height: 100%; max-width: 1260px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; }
.node-map { position: relative; height: 360px; margin-top: 16px; }
.connection-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dash-line { fill: none; stroke: rgba(61,216,224,.48); stroke-width: 1.2; stroke-dasharray: 10 10; animation: dash-flow 9s linear infinite; }
.travel-dot { fill: var(--electric-cyan); filter: drop-shadow(0 0 10px rgba(61,216,224,.75)); }
@keyframes dash-flow { to { stroke-dashoffset: -160; } }
.hex-node {
  position: absolute;
  width: 170px;
  height: 150px;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: rgba(13,27,42,.88);
  border: 1px solid rgba(61,216,224,.5);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 24px;
  transition: background .3s ease, filter .3s ease, transform .3s ease;
}
.hex-node:hover { background: #1b2838; filter: drop-shadow(0 0 18px rgba(61,216,224,.45)); transform: translateY(-6px) scale(1.03); }
.hex-node span { font-family: "Space Grotesk", Inter, sans-serif; color: var(--warm-amber); letter-spacing: .03em; font-size: 1.05rem; }
.hex-node p { margin: 6px 0 0; font-size: .88rem; line-height: 1.35; color: var(--muted-slate); }
.node-1 { left: 2%; top: 150px; } .node-2 { left: 23%; top: 42px; } .node-3 { left: 43%; top: 112px; } .node-4 { left: 63%; top: 198px; } .node-5 { right: 2%; top: 78px; }

.closing-title { font-size: clamp(3rem, 7vw, 6.4rem); }
.closing-copy { max-width: 520px; margin: 24px auto 20px; color: var(--silver-blue); }
.domain-small { font-family: "IBM Plex Mono", ui-monospace, monospace; color: rgba(212,168,83,.8); letter-spacing: .16em; }

.fracture { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.fracture path { fill: none; stroke: rgba(61,216,224,.15); stroke-width: 1; stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1.8s ease; }
.visible .fracture path { stroke-dashoffset: 0; }
.fracture-dense path:nth-child(2) { stroke: rgba(212,168,83,.13); transition-delay: .12s; }
.fracture-dense path:nth-child(3) { transition-delay: .24s; }

.spread-dots {
  position: fixed;
  right: 26px;
  bottom: 24px;
  z-index: 10;
  display: grid;
  gap: 12px;
}
.dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 1px solid rgba(61,216,224,.55);
  background: rgba(13,27,42,.75);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  cursor: pointer;
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), background .25s ease, box-shadow .25s ease;
}
.dot.active { background: var(--electric-cyan); box-shadow: 0 0 6px rgba(61,216,224,.4); transform: scale(1.3); }
.dot.pulse { transform: scale(1.65); }

@media (max-width: 768px) {
  html, body { overflow: hidden; }
  .spread { padding: 22px 16px; }
  .spread::before { opacity: .75; }
  .spread::after { display: none; }
  .spread-grid { grid-template-columns: 1fr; gap: 8px; align-content: center; }
  .idea-copy { padding-left: 0; max-width: none; }
  .crystal-stage { min-height: 260px; }
  .crystal-label { display: none; }
  .voronoi-crystal { width: min(82vw, 320px); }
  .broken-grid { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
  .fracture-intro { display: block; }
  .glitch-card { padding: 18px; transform: none; }
  .glitch-card p { font-size: .9rem; line-height: 1.45; }
  .node-map { height: 530px; }
  .connection-lines { display: none; }
  .hex-node { width: 138px; height: 122px; padding: 18px; }
  .node-1 { left: 0; top: 16px; } .node-2 { right: 0; left: auto; top: 112px; } .node-3 { left: 5%; top: 216px; } .node-4 { right: 2%; left: auto; top: 320px; } .node-5 { left: 26%; right: auto; top: 420px; }
  .spread-dots { right: 14px; bottom: 16px; gap: 9px; }
}

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