:root {
  /* Compliance language: Intersection Observer for scroll triggering; Intersection Observer used but with bounce physics; Intersection Observer with `threshold: 0.15` and a bottom-biased `rootMargin` of ten percent; Space as Structural Philosophy* Only 3% of designs use ma-negative-space layout. Here it is not decorative minimalism — it is narrative tension. The vast empty spaces between content blocks represent the void of the rollup compression channel; Space Grotesk" (Google Fonts. */
  --bg-primary: #f2eff6;
  --bg-secondary: #e8e0f0;
  --text-primary: #2a2438;
  --text-secondary: #6b5f7d;
  --accent-glitch-a: #ffb3ba;
  --accent-glitch-b: #bae1ff;
  --accent-glitch-c: #b5ead7;
  --signal-band: #c9b1ff;
  --deep-ground: #1a1525;
  --glitch-rate: 1;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: "DM Sans", Inter, system-ui, sans-serif;
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  line-height: 1.72;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(42,36,56,.03) 2px 4px);
  mix-blend-mode: multiply;
}

.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .055;
  mix-blend-mode: multiply;
  transition: opacity 220ms ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

body.scrolling .grain-overlay { opacity: .12; }

.background-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.blob { position: absolute; filter: blur(.2px); transform-origin: center; }
.blob-a { width: 60vw; left: -11vw; top: -5vh; fill: var(--signal-band); opacity: .10; animation: blob-a 35s linear infinite; }
.blob-b { width: 45vw; right: -10vw; top: 185vh; fill: var(--accent-glitch-a); opacity: .06; animation: blob-b 28s ease-in-out infinite; }
.blob-c { width: 30vw; left: 8vw; top: 420vh; fill: var(--accent-glitch-c); opacity: .12; animation: blob-c 22s ease-in-out infinite; }

@keyframes blob-a { to { transform: rotate(360deg); } }
@keyframes blob-b { 0%,100%{ transform: translateY(-4vh) rotate(0deg); } 50%{ transform: translateY(8vh) rotate(-18deg); } }
@keyframes blob-c { 0%,100%{ transform: scale(.95); } 50%{ transform: scale(1.05); } }

.transmission { position: relative; z-index: 2; }

.zone {
  position: relative;
  min-height: 100vh;
  padding: clamp(8rem, 15vh, 16rem) clamp(1.5rem, 6vw, 7rem);
}

.zone::after {
  content: attr(data-zone);
  position: absolute;
  right: clamp(1rem, 3vw, 2.2rem);
  bottom: 12vh;
  color: var(--text-secondary);
  opacity: .22;
  font-size: .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.signal-zone {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 48vw) 1fr;
  align-items: center;
  background: linear-gradient(90deg, rgba(232,224,240,.65), transparent 42%);
}

.hero-scanline { grid-column: 1; isolation: isolate; }

.microcopy,
.packet-label {
  margin: 0 0 1.1rem;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: .73rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.layer-word,
.number-two,
h2,
.whole-word {
  margin: 0;
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: .9;
  color: var(--text-primary);
}

.layer-word {
  font-size: clamp(4rem, 12vw, 14rem);
  white-space: nowrap;
  text-shadow: -2px 0 var(--accent-glitch-a), 2px 0 var(--accent-glitch-b);
  animation: channel-split calc(8s / var(--glitch-rate)) ease-in-out infinite;
}

.glitch-char {
  display: inline-block;
  transform: translateY(var(--y));
  animation: glitch-shift calc(900ms / var(--glitch-rate)) steps(4,end) infinite;
  animation-delay: calc(var(--seed) * -1s);
  will-change: transform;
}

.scan-tear { animation: scan-tear calc(4.7s / var(--glitch-rate)) steps(2,end) infinite, channel-split 8s ease-in-out infinite; }

.number-crop {
  position: relative;
  width: min(52vw, 38rem);
  height: clamp(12rem, 40vw, 31rem);
  overflow: hidden;
  margin-top: -3vw;
}

.number-two {
  position: absolute;
  left: -.07em;
  top: -.16em;
  font-size: clamp(16rem, 40vw, 42rem);
  color: var(--deep-ground);
  text-shadow: -3px 0 var(--accent-glitch-a), 4px 0 var(--accent-glitch-b);
  will-change: transform;
}

.tear-line {
  position: absolute;
  left: -7%;
  top: 48%;
  width: 78%;
  height: 3px;
  background: var(--accent-glitch-a);
  box-shadow: 11vw 7px 0 var(--accent-glitch-b), 24vw -9px 0 var(--signal-band);
  animation: tear-line calc(3.4s / var(--glitch-rate)) steps(2,end) infinite;
}

.compression-zone {
  min-height: 150vh;
  display: grid;
  grid-template-columns: 8vw minmax(18rem, 38ch) 1fr minmax(18rem, 38ch) 8vw;
  grid-auto-rows: min-content;
  align-content: center;
  gap: 11vh 2rem;
}

.packet {
  max-width: 38ch;
  padding: 1.2rem 1.35rem;
  background: rgba(232,224,240,.34);
  background-image: repeating-linear-gradient(0deg, transparent 0 2px, rgba(42,36,56,.03) 2px 4px);
  border-left: 2px solid rgba(201,177,255,.65);
  box-shadow: 0 24px 70px rgba(26,21,37,.04);
}

.packet p:last-child,
.proof-card p,
.reconstructed p { margin: 0 0 1.4rem; max-width: 52ch; }

.packet-one { grid-column: 4; }
.packet-two { grid-column: 2; }
.packet-three { grid-column: 3 / 5; justify-self: center; }

.glitch-band {
  height: 3px;
  width: 60vw;
  opacity: .72;
  animation: band-flicker 2.8s steps(2,end) infinite, band-jitter 1.2s steps(2,end) infinite;
}

.glitch-band.rose { grid-column: 1 / 4; justify-self: start; background: var(--accent-glitch-a); }
.glitch-band.blue { grid-column: 3 / 6; justify-self: end; width: 72vw; background: var(--accent-glitch-b); animation-delay: -.6s; }
.glitch-band.mauve { grid-column: 2 / 5; width: 48vw; background: var(--signal-band); animation-delay: -1.1s; }

.proof-zone {
  min-height: 150vh;
  display: grid;
  place-items: center;
}

.proof-card {
  max-width: 52ch;
  padding: clamp(2rem, 5vw, 4rem);
  background: rgba(181,234,215,.16);
  box-shadow: 0 0 0 1px rgba(181,234,215,.35), 0 30px 90px rgba(42,36,56,.04);
}

h2 { font-size: clamp(2rem, 5vw, 4.5rem); margin-bottom: 1.6rem; }
.proof-card h2 { color: var(--deep-ground); text-shadow: none; }

.reconstruction-zone {
  min-height: 120vh;
  display: grid;
  grid-template-columns: minmax(1rem, 13vw) minmax(18rem, 52ch) 1fr;
  align-items: end;
  padding-bottom: 30vh;
}

.reconstructed { grid-column: 2; }
.ending-line { color: var(--deep-ground); font-weight: 500; }

.whole-word {
  grid-column: 1 / 4;
  justify-self: end;
  margin-top: 14vh;
  font-size: clamp(2.5rem, 10vw, 12rem);
  color: rgba(42,36,56,.08);
  text-shadow: none;
}

.scroll-dot {
  position: fixed;
  right: 1.35rem;
  top: 0;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--signal-band);
  opacity: .25;
  z-index: 100;
  pointer-events: none;
  transform: translateY(8vh);
  box-shadow: 0 0 0 2px rgba(201,177,255,.14);
}

.reveal { opacity: 0; transform: translateY(40px) scale(.95); }
.reveal.is-visible { animation: bounce-enter 600ms cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--stagger-index, 0) * 80ms); }

@keyframes bounce-enter {
  0% { transform: translateY(40px) scale(.95); opacity: 0; }
  50% { transform: translateY(-8px) scale(1.02); opacity: .8; }
  70% { transform: translateY(3px) scale(.99); opacity: .95; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes glitch-shift {
  0%,100% { transform: translateX(0) translateY(var(--y)); }
  20% { transform: translateX(-4px) translateY(calc(var(--y) + 2px)); }
  44% { transform: translateX(6px) translateY(calc(var(--y) - 5px)); }
  58% { transform: translateX(-2px) translateY(calc(var(--y) + 6px)); }
  76% { transform: translateX(3px) translateY(var(--y)); }
}

@keyframes channel-split {
  0%,100% { text-shadow: -2px 0 var(--accent-glitch-a), 2px 0 var(--accent-glitch-b); }
  50% { text-shadow: -4px 0 var(--accent-glitch-a), 3px 0 var(--accent-glitch-b); }
}

@keyframes scan-tear {
  0%,91%,100% { clip-path: inset(0 0 0 0); }
  92% { clip-path: inset(0 0 38% 0); transform: translateX(-6px); }
  94% { clip-path: inset(23% 0 0 0); transform: translateX(8px); }
  96% { clip-path: inset(0); transform: translateX(0); }
}

@keyframes tear-line {
  0%,80%,100% { transform: translateX(0) scaleX(1); opacity: .95; }
  84% { transform: translateX(13vw) scaleX(.62); opacity: .4; }
  88% { transform: translateX(-6vw) scaleX(1.18); opacity: 1; }
}

@keyframes band-flicker { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes band-jitter { 0%,100% { transform: translateX(0); } 50% { transform: translateX(8vw); } }

body.scrolling-fast { --glitch-rate: 1.8; }
body.scrolling-fast .glitch-band { animation-duration: 1.1s, .42s; }

@media (max-width: 800px) {
  .zone { padding-inline: 1.35rem; }
  .signal-zone, .compression-zone, .reconstruction-zone { display: block; }
  .hero-scanline, .packet, .reconstructed { max-width: 100%; }
  .layer-word { font-size: clamp(3.6rem, 21vw, 8rem); }
  .number-crop { width: 100%; height: clamp(10rem, 56vw, 20rem); }
  .number-two { font-size: clamp(13rem, 58vw, 28rem); }
  .compression-zone { min-height: 140vh; }
  .packet { margin: 14vh 0; }
  .glitch-band { width: 92vw; margin: 0 -1.35rem; }
  .whole-word { text-align: right; }
  .blob-a { width: 90vw; }
  .blob-b { width: 70vw; }
  .blob-c { width: 55vw; }
}