:root {
  /* Compliance typography tokens: Space Grotesk** domain wordmark; IBM Plex Mono** only for timestamp stamps. */
  --void: #05020A;
  --cyan: #00F5FF;
  --magenta: #FF2BD6;
  --lime: #B7FF2A;
  --violet: #7C3CFF;
  --cream: #F2D6A2;
  --orange: #FF5A1F;
  --display: "Space Grotesk", "Avenir Next", system-ui, sans-serif;
  --body: "Outfit", "Inter", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
  --scroll: 0;
}

* { box-sizing: border-box; }

html {
  background: var(--void);
  color: var(--cream);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--body);
  background:
    radial-gradient(circle at 50% calc(8% + var(--scroll) * 12%), rgba(124, 60, 255, 0.16), transparent 24rem),
    radial-gradient(circle at 42% 36%, rgba(255, 43, 214, 0.10), transparent 18rem),
    radial-gradient(circle at 58% 70%, rgba(0, 245, 255, 0.10), transparent 20rem),
    var(--void);
}

.noise-field,
.scanline {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.noise-field {
  opacity: .26;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(242, 214, 162, .22) 0 1px, transparent 1.4px),
    radial-gradient(circle at 78% 33%, rgba(0, 245, 255, .18) 0 1px, transparent 1.5px),
    radial-gradient(circle at 41% 88%, rgba(255, 43, 214, .18) 0 1px, transparent 1.5px);
  background-size: 71px 83px, 109px 127px, 151px 137px;
  animation: dustDrift 18s steps(4, end) infinite;
}

.scanline {
  opacity: .13;
  background: repeating-linear-gradient(to bottom, transparent 0 7px, rgba(242, 214, 162, .10) 8px, transparent 10px);
}

.transmission {
  position: relative;
  min-height: 600vh;
  isolation: isolate;
}

.signal-cord {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(25vw, 190px);
  height: 100%;
  transform: translateX(-50%) scaleX(calc(1 + var(--scroll) * .08));
  overflow: visible;
  z-index: 1;
  opacity: .9;
  filter: drop-shadow(0 0 12px rgba(0, 245, 255, .65));
}

.cord-path {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 3.2;
  stroke-linecap: round;
  filter: url(#cordGlow);
  stroke-dasharray: 18 24;
  animation: cordTravel 11s linear infinite;
}

.chapter {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1.2rem;
  padding: 14vh 7vw;
  text-align: center;
  z-index: 2;
}

.chapter::before {
  content: "";
  position: absolute;
  width: min(34vw, 360px);
  height: min(34vw, 360px);
  border: 1px solid rgba(242, 214, 162, .11);
  border-radius: 50%;
  transform: scaleX(calc(.55 + var(--scroll) * .22));
  box-shadow: inset 0 0 40px rgba(242, 214, 162, .03);
  opacity: .48;
  z-index: -1;
}

.hero { min-height: 112vh; }

.wordmark {
  font-family: var(--display);
  font-size: clamp(4rem, 14vw, 13rem);
  font-weight: 700;
  line-height: .8;
  letter-spacing: .06em;
  color: var(--cream);
  text-shadow: 0 0 12px rgba(242, 214, 162, .58), 0 0 35px rgba(0, 245, 255, .27);
  transform: translateY(calc(var(--scroll) * -34px)) scaleX(calc(1 + var(--scroll) * .06));
  animation: wordFlicker 7s infinite;
}

.drop-line {
  width: 2px;
  height: 22vh;
  background: linear-gradient(var(--cyan), transparent);
  box-shadow: 0 0 18px var(--cyan);
  transform-origin: top;
  animation: lineDrop 2.6s cubic-bezier(.18, 1.55, .32, 1) both;
}

h1,
h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4rem, 13vw, 11rem);
  font-weight: 700;
  line-height: .78;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 0 28px currentColor;
  transition: transform .9s cubic-bezier(.18, 1.48, .28, 1), opacity .9s ease;
}

.chapter[data-tone="violet"] h1 { color: var(--violet); }
.chapter[data-tone="magenta"] h2 { color: var(--magenta); }
.chapter[data-tone="lime"] h2 { color: var(--lime); }
.chapter[data-tone="orange"] h2 { color: var(--orange); }
.chapter[data-tone="cream"] h2 { color: var(--cream); }

.fragment,
.intro-fragment {
  max-width: 31rem;
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  line-height: 1.35;
  font-weight: 300;
  letter-spacing: .02em;
  color: rgba(242, 214, 162, .84);
  text-shadow: 0 0 18px rgba(242, 214, 162, .16);
}

.phosphor,
.transcript,
.stamp,
.machine-label,
.caption-plate,
.final-readout {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .16em;
}

.phosphor,
.transcript { color: var(--lime); text-shadow: 0 0 13px rgba(183, 255, 42, .45); }
.stamp { color: var(--cyan); font-size: .72rem; }

.machine-label,
.caption-plate {
  border: 1px solid rgba(242, 214, 162, .38);
  color: var(--cream);
  background: rgba(5, 2, 10, .72);
  padding: .55rem .72rem;
  font-size: .68rem;
  box-shadow: 0 0 18px rgba(242, 214, 162, .10);
  transform: rotate(-2deg);
}

.caption-plate { color: var(--magenta); border-color: rgba(255, 43, 214, .46); }
.caption-plate.red { color: var(--orange); border-color: rgba(255, 90, 31, .55); }

.offset-left .artifact,
.offset-left h2,
.offset-left .fragment { transform: translateX(clamp(-7rem, -11vw, -2rem)); }
.offset-right .artifact,
.offset-right h2,
.offset-right .fragment { transform: translateX(clamp(2rem, 11vw, 7rem)); }

.artifact {
  width: min(66vw, 520px);
  aspect-ratio: 1.7;
  display: grid;
  place-items: center;
  position: relative;
  mix-blend-mode: screen;
  transition: transform .9s cubic-bezier(.18, 1.48, .28, 1), filter .6s ease;
}

.artifact svg { width: 100%; height: 100%; overflow: visible; }
.artifact * { vector-effect: non-scaling-stroke; }

.rotary { width: min(49vw, 320px); aspect-ratio: 1; animation: floatObject 8s ease-in-out infinite; }
.halo { fill: none; stroke-width: 8; opacity: .16; }
.halo.cyan { stroke: var(--cyan); }
.ring { fill: none; stroke: var(--cyan); stroke-width: 3; filter: drop-shadow(0 0 10px var(--cyan)); }
.iris { fill: none; stroke: var(--violet); stroke-width: 5; filter: drop-shadow(0 0 14px var(--violet)); }
.dial-holes circle { fill: none; stroke: var(--cream); stroke-width: 2; opacity: .82; }

.membrane span {
  position: absolute;
  width: 56%;
  height: 31%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(124, 60, 255, .28), transparent 70%);
  filter: blur(24px);
  animation: membraneBreath 3.8s ease-in-out infinite;
}
.membrane-shape { fill: rgba(124, 60, 255, .08); stroke: var(--violet); stroke-width: 4; filter: drop-shadow(0 0 20px var(--violet)); animation: membraneWarp 4.8s ease-in-out infinite; }
.wave { fill: none; stroke: var(--magenta); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 18px var(--magenta)); stroke-dasharray: 40 18; animation: waveRubber 2.8s ease-in-out infinite; }

.handset-body { fill: rgba(255, 43, 214, .06); stroke: var(--magenta); stroke-width: 4; filter: drop-shadow(0 0 22px var(--magenta)); animation: wobble 5.4s ease-in-out infinite; }
.handset-line { fill: none; stroke: var(--cream); stroke-width: 2; opacity: .75; }
.record-dot { fill: var(--orange); filter: drop-shadow(0 0 12px var(--orange)); animation: blink 1.8s steps(2, end) infinite; }

.cassette-shell { fill: rgba(183, 255, 42, .035); stroke: var(--lime); stroke-width: 3; filter: drop-shadow(0 0 18px rgba(183, 255, 42, .72)); }
.cassette-label { fill: rgba(242, 214, 162, .10); stroke: var(--cream); stroke-width: 1.5; }
.reel { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-dasharray: 9 10; transform-origin: center; animation: spin 6s linear infinite; }
.right { animation-direction: reverse; }
.tape-loop { fill: none; stroke: var(--lime); stroke-width: 4; filter: drop-shadow(0 0 13px var(--lime)); animation: loopWobble 4.2s ease-in-out infinite; }
.holes circle { fill: var(--cream); opacity: .7; }

.arrow { fill: rgba(255, 90, 31, .07); stroke: var(--orange); stroke-width: 4; filter: drop-shadow(0 0 20px var(--orange)); animation: arrowBend 5.6s ease-in-out infinite; }
.arrow-line { stroke: var(--cream); stroke-width: 2; stroke-dasharray: 12 11; animation: cordTravel 3s linear infinite; }
.bulb { fill: var(--cream); filter: drop-shadow(0 0 10px var(--cream)); animation: blink 2.4s steps(2, end) infinite; }
.bulb:nth-of-type(2n) { animation-delay: .7s; }

.moon { fill: rgba(242, 214, 162, .13); stroke: var(--cream); stroke-width: 2; filter: drop-shadow(0 0 18px var(--cream)); }
.mic { fill: rgba(0, 245, 255, .04); stroke: var(--cyan); stroke-width: 3; filter: drop-shadow(0 0 16px var(--cyan)); }
.grille,
.stand { fill: none; stroke: var(--cream); stroke-width: 3; stroke-linecap: round; }

.final-readout {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--lime);
  font-size: .78rem;
  text-shadow: 0 0 15px rgba(183, 255, 42, .55);
}
.final-readout i {
  width: .55rem;
  height: 1.05rem;
  display: inline-block;
  background: var(--lime);
  box-shadow: 0 0 13px var(--lime);
  animation: cursorBlink 1.1s steps(2, end) infinite;
}

.chapter:not(.is-visible) h1,
.chapter:not(.is-visible) h2,
.chapter:not(.is-visible) .fragment,
.chapter:not(.is-visible) .artifact,
.chapter:not(.is-visible) .machine-label,
.chapter:not(.is-visible) .caption-plate,
.chapter:not(.is-visible) .transcript,
.chapter:not(.is-visible) .stamp {
  opacity: .15;
  filter: blur(5px);
}

.chapter.is-visible [data-elastic] { animation: elasticText .95s cubic-bezier(.16, 1.65, .32, 1) both; }
.chapter.is-visible .artifact { filter: saturate(1.3) brightness(1.08); }

@keyframes lineDrop { 0% { transform: scaleY(0); opacity: 0; } 70% { transform: scaleY(1.18); opacity: 1; } 100% { transform: scaleY(1); opacity: .8; } }
@keyframes wordFlicker { 0%, 100% { opacity: .92; } 8% { opacity: .72; } 9% { opacity: 1; } 46% { opacity: .88; } 48% { opacity: .64; } 50% { opacity: .96; } }
@keyframes cordTravel { to { stroke-dashoffset: -84; } }
@keyframes dustDrift { 50% { transform: translate3d(1.2rem, -.8rem, 0); } }
@keyframes floatObject { 50% { transform: translateY(-1.2rem) rotate(2deg); } }
@keyframes membraneBreath { 50% { transform: scale(1.18, .86); opacity: .76; } }
@keyframes membraneWarp { 50% { transform: scale(1.03, .92); } }
@keyframes waveRubber { 50% { stroke-dashoffset: 58; transform: scaleX(1.12); } }
@keyframes wobble { 50% { transform: rotate(-2deg) scaleX(1.04); } }
@keyframes blink { 50% { opacity: .25; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes loopWobble { 50% { transform: scaleX(1.08) translateX(-5px); } }
@keyframes arrowBend { 50% { transform: skewX(-4deg) translateX(8px); } }
@keyframes cursorBlink { 50% { opacity: 0; } }
@keyframes elasticText { 0% { transform: scaleX(.72) translateY(24px); opacity: 0; } 68% { transform: scaleX(1.09) translateY(-5px); opacity: 1; } 100% { transform: scaleX(1) translateY(0); opacity: 1; } }

@media (max-width: 720px) {
  .chapter { padding-inline: 5vw; }
  .signal-cord { width: 36vw; }
  .artifact { width: 86vw; }
  .offset-left .artifact,
  .offset-left h2,
  .offset-left .fragment,
  .offset-right .artifact,
  .offset-right h2,
  .offset-right .fragment { transform: none; }
  .machine-label,
  .caption-plate { font-size: .58rem; }
}