:root {
  /* Typography extraction tokens: Interference Accent: Accents:** (Google mirrors concept: designed */
  --bg-primary: #0e1117;
  --bg-void: #0a0c10;
  --text-body: #b8c4d0;
  --text-display: #d9e2ec;
  --text-meta: #6b7b8d;
  --accent-ice: #7eb8da;
  --accent-error: #c4785a;
  --noise-base: #2a3040;
  --border: #3d4a5c;
  --scan: #141a22;
  --content-width: 640px;
  --zone-gap: 50vh;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

html {
  background: var(--bg-primary);
  color: var(--text-body);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg-primary);
  font-family: "Source Serif 4", Georgia, serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, rgba(126, 184, 218, 0.045), transparent 34vw),
    linear-gradient(180deg, rgba(20, 26, 34, 0.55), rgba(10, 12, 16, 0.22) 45%, rgba(14, 17, 23, 0.8));
  z-index: 0;
}

.grain-filter { position: absolute; }

.page-noise {
  position: fixed;
  inset: -10%;
  pointer-events: none;
  opacity: 0.04;
  filter: url(#frozen-static);
  background: var(--noise-base);
  transform: translateZ(0);
  z-index: 4;
}

.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 119px, var(--scan) 120px, transparent 121px);
  opacity: 0.48;
  z-index: 3;
}

.corruption-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: var(--accent-error);
  opacity: 0;
  z-index: 5;
  animation: corruption 4.8s steps(1, end) 0.8s 1 both;
}

.crystals {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.fragment {
  position: absolute;
  display: block;
  width: 4px;
  height: 12px;
  background: var(--border);
  opacity: 0.16;
}

.f1 { top: 11vh; left: 18vw; height: 8px; opacity: 0.12; }
.f2 { top: 24vh; right: 13vw; width: 2px; transform: rotate(90deg); }
.f3 { top: 44vh; left: 9vw; opacity: 0.1; }
.f4 { top: 62vh; right: 25vw; height: 8px; }
.f5 { top: 81vh; left: 31vw; width: 2px; opacity: 0.2; }
.f6 { top: 137vh; right: 18vw; transform: rotate(90deg); opacity: 0.11; }
.f7 { top: 216vh; left: 14vw; width: 2px; height: 8px; }
.f8 { top: 344vh; right: 9vw; opacity: 0.14; }
.f9 { top: 480vh; left: 22vw; height: 8px; opacity: 0.18; }

main {
  position: relative;
  z-index: 1;
}

.void {
  height: var(--zone-gap);
  background: linear-gradient(180deg, rgba(10, 12, 16, 0.36), rgba(10, 12, 16, 0.08), rgba(10, 12, 16, 0.32));
}

.void-entry { height: 30vh; }
.void-exit { height: 200vh; }

.zone {
  display: grid;
  place-items: center;
  width: 100%;
  padding: 7vh 24px;
}

.zone-1,
.zone-3 { min-height: 100vh; }

.zone-2 { min-height: 100vh; }
.zone-4 { min-height: 80vh; }
.zone-5 { min-height: 40vh; }

.zone-1 {
  align-content: center;
  gap: 3rem;
}

.domain {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  max-width: min(100%, var(--content-width));
  color: var(--text-display);
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 300;
  font-size: clamp(3rem, 8vw, 6rem);
  letter-spacing: 0.15em;
  line-height: 1.05;
}

.domain span {
  display: inline-block;
  opacity: 0;
  transform: translateY(calc(var(--y) + 0.35em));
  animation: assemble 900ms var(--ease) forwards;
  animation-delay: calc(var(--i) * 400ms);
  text-shadow: 0 0 22px rgba(126, 184, 218, 0.06);
}

.signal-line {
  width: 200px;
  height: 1px;
  background: var(--text-meta);
  opacity: 0;
  animation: line-arrive 1200ms var(--ease) 5.2s forwards, line-flicker 6s steps(1, end) 7s infinite;
}

.statement {
  max-width: var(--content-width);
  margin: 0;
  color: var(--text-body);
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 300;
  font-style: italic;
  line-height: 2;
  letter-spacing: 0.02em;
  text-align: center;
  text-wrap: pretty;
  transition: transform 150ms var(--ease), color 150ms var(--ease);
}

.statement:hover {
  transform: translateX(2px);
  color: #d9e2ec;
}

.artifact-frame {
  position: relative;
  width: min(var(--content-width), calc(100vw - 48px));
  aspect-ratio: 3 / 2;
  background: #141a22;
  box-shadow: 0 0 0 1px var(--border), 0 30px 80px rgba(0, 0, 0, 0.32), inset 0 0 40px rgba(126, 184, 218, 0.03);
}

.artifact-frame::before,
.artifact-frame::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.artifact-frame::before {
  inset: 0;
  border: 1px solid var(--border);
  animation: border-drop 12s steps(1, end) infinite;
  z-index: 2;
}

.artifact-frame::after {
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(126, 184, 218, 0.04), transparent);
  mix-blend-mode: screen;
  opacity: 0.6;
  z-index: 1;
}

#noise-canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.metadata {
  width: min(var(--content-width), calc(100vw - 48px));
  display: grid;
  gap: 3rem;
  color: var(--text-meta);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  font-weight: 200;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.meta-line {
  opacity: 0.35;
  animation: metadata-pulse 6s var(--ease) infinite;
}

.meta-line:nth-child(2) { animation-delay: 2s; }
.meta-line:nth-child(3) { animation-delay: 4s; }

.terminal-end {
  color: var(--text-display);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.9rem;
  font-weight: 200;
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

.cursor {
  display: inline-block;
  width: 0.6em;
  height: 1em;
  margin-left: 0.25em;
  transform: translateY(0.16em);
  background: var(--accent-ice);
  animation: cursor-blink 1.2s step-end infinite;
}

@keyframes assemble {
  0% { opacity: 0; transform: translateY(calc(var(--y) + 0.35em)); color: var(--accent-ice); }
  12% { color: var(--accent-error); }
  100% { opacity: 1; transform: translateY(var(--y)); color: var(--text-display); }
}

@keyframes corruption {
  0%, 8%, 16%, 24%, 32%, 100% { opacity: 0; }
  4%, 12%, 20%, 28% { opacity: 0.03; }
}

@keyframes line-arrive {
  0% { opacity: 0; transform: scaleX(0.04); }
  100% { opacity: 0.75; transform: scaleX(1); }
}

@keyframes line-flicker {
  0%, 78%, 82%, 100% { opacity: 0.72; }
  80% { opacity: 0.08; }
  81% { opacity: 1; background: var(--accent-ice); }
}

@keyframes metadata-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes border-drop {
  0%, 7%, 12%, 38%, 43%, 75%, 80%, 100% { clip-path: inset(0); opacity: 1; }
  8%, 10% { clip-path: inset(1px 0 0 0); }
  40%, 42% { clip-path: inset(0 1px 0 0); }
  77%, 79% { clip-path: inset(0 0 1px 0); }
}

@media (max-width: 620px) {
  .domain { letter-spacing: 0.09em; }
  .statement { text-align: left; }
}