:root {
  /* Design-token compliance notes: Interactive hover targets (on desktop viewports (>768px Interactivity:** On desktop Interval` with randomized timing. Source Serif 4 (300 Source Serif 4 speaks as the human Source Serif 4" (Google Fonts Space Grotesk (500 Space Grotesk" (Google Fonts Space Mono (400 Space Mono speaks as the institution Space Mono's mechanical precision. Set at clamp(1rem Space Mono" (Google Fonts */
  --void-indigo: #0d0221;
  --twilight-plum: #1a0a2e;
  --faded-heliotrope: #9b8fb5;
  --lavender-white: #e8dff5;
  --magnetosphere-rose: #ff6ec7;
  --signal-green: #00e4a0;
  --ionosphere-purple: #7b2ff7;
  --phosphor-amber: #ffb347;
  --mono: "Space Mono", "Courier New", monospace;
  --sans: Inter, system-ui, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--void-indigo);
  color: var(--lavender-white);
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.72;
  background:
    radial-gradient(circle at 17% 12%, rgba(123, 47, 247, 0.28), transparent 29rem),
    radial-gradient(circle at 78% 34%, rgba(255, 110, 199, 0.18), transparent 24rem),
    linear-gradient(135deg, var(--void-indigo) 0%, var(--twilight-plum) 51%, #090113 100%);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: 70;
  opacity: 0.13;
  mix-blend-mode: screen;
  background-image:
    repeating-linear-gradient(0deg, rgba(232, 223, 245, 0.08) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(0, 228, 160, 0.035) 23px 24px);
}

body::after {
  z-index: 71;
  opacity: 0.2;
  background-image:
    radial-gradient(circle at 18% 26%, rgba(255,255,255,0.16) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 64%, rgba(255,255,255,0.10) 0 1px, transparent 1.5px);
  background-size: 9px 11px, 13px 17px;
  animation: grain-drift 850ms steps(2) infinite;
}

@keyframes grain-drift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1%, 1%); }
  50% { transform: translate(1%, -1%); }
  75% { transform: translate(1%, 1%); }
  100% { transform: translate(0, 0); }
}

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

.signal-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.75;
}

.side-thread {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 2 18;
  opacity: 0.34;
}

.thread-one { stroke: #00e4a0; }
.thread-two { stroke: #ff6ec7; }

.blob {
  position: absolute;
  width: 25vw;
  min-width: 280px;
  max-width: 520px;
  opacity: 0.18;
  mix-blend-mode: screen;
  filter: blur(0.2px) saturate(1.25);
  transform-origin: center;
  transition: opacity 420ms ease, transform 420ms ease;
}

.blob-one { top: 7vh; right: 3vw; animation: blob-float-a 16s ease-in-out infinite; }
.blob-two { top: 45vh; left: 1vw; animation: blob-float-b 19s ease-in-out infinite; }
.blob-three { bottom: 5vh; right: 10vw; animation: blob-float-c 22s ease-in-out infinite; }

@keyframes blob-float-a {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(-26px, 34px, 0) rotate(9deg) scale(1.08); }
}

@keyframes blob-float-b {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(32px, -28px, 0) rotate(-11deg) scale(1.12); }
}

@keyframes blob-float-c {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(-18px, -42px, 0) rotate(14deg) scale(0.96); }
}

.tracking-sweep {
  position: fixed;
  left: 0;
  top: -8vh;
  width: 100%;
  height: 7vh;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(0, 228, 160, 0.2) 48%, rgba(255, 110, 199, 0.18) 53%, transparent);
  box-shadow: 0 0 42px rgba(0, 228, 160, 0.18);
}

.tracking-sweep.is-active { animation: tracking-pass 720ms cubic-bezier(.2,.7,.1,1) both; }

@keyframes tracking-pass {
  0% { transform: translateY(-10vh); opacity: 0; }
  10%, 78% { opacity: 1; }
  100% { transform: translateY(120vh); opacity: 0; }
}

.rupture-layer {
  position: fixed;
  inset: 0;
  z-index: 61;
  pointer-events: none;
}

.rupture-slice {
  position: absolute;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, transparent, rgba(255, 110, 199, 0.62), rgba(0, 228, 160, 0.42), rgba(123, 47, 247, 0.5), transparent);
  box-shadow: 0 0 16px rgba(255, 110, 199, 0.4);
}

.transmission {
  position: relative;
  z-index: 5;
  width: min(680px, calc(100% - 38px));
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(4.8rem, 9vw, 8rem) clamp(1.15rem, 3vw, 2.4rem) 7rem;
  background:
    linear-gradient(90deg, rgba(255, 110, 199, 0.12), transparent 18%, transparent 82%, rgba(0, 228, 160, 0.10)),
    linear-gradient(180deg, rgba(13, 2, 33, 0.38), rgba(26, 10, 46, 0.54));
  box-shadow:
    -1px 0 0 rgba(255, 110, 199, 0.26),
    1px 0 0 rgba(0, 228, 160, 0.22),
    0 0 90px rgba(13, 2, 33, 0.75);
}

.transmission::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-image: linear-gradient(90deg, transparent 0 48%, rgba(232, 223, 245, 0.045) 49% 51%, transparent 52%);
}

.segment {
  position: relative;
  margin: 0 0 clamp(2.5rem, 8vw, 6rem);
  opacity: 0;
  transform: translateY(28px) skewY(0.18deg);
  transition: opacity 760ms ease, transform 760ms ease;
}

.segment.is-visible {
  opacity: 1;
  transform: translateY(0) skewY(0deg);
}

.segment::before {
  content: attr(data-segment);
  position: absolute;
  left: -4.1rem;
  top: 0.45rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: #9b8fb5;
  opacity: 0.55;
  writing-mode: vertical-rl;
}

.intro-segment { min-height: 76vh; display: flex; flex-direction: column; justify-content: center; }

.kicker,
.divider,
.signal-dial,
.final-line {
  font-family: var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.kicker {
  margin: 0 0 1.35rem;
  color: #ffb347;
  font-size: clamp(0.72rem, 1.8vw, 0.85rem);
}

.title,
h2 {
  font-family: var(--mono);
  font-weight: 700;
  line-height: 1.03;
  text-transform: uppercase;
}

.title {
  position: relative;
  margin: 0 0 1.6rem;
  max-width: 12ch;
  font-size: clamp(3.25rem, 12vw, 6.8rem);
  letter-spacing: -0.075em;
  color: #e8dff5;
  text-shadow: -3px 0 #ff6ec7, 3px 0 #00e4a0, 0 0 26px rgba(123, 47, 247, 0.45);
}

.title::before,
.title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.title::before { color: #ff6ec7; transform: translateX(-4px); clip-path: inset(0 0 60% 0); }
.title::after { color: #00e4a0; transform: translateX(4px); clip-path: inset(42% 0 0 0); }
.title.is-glitching::before,
.title.is-glitching::after { opacity: 0.75; animation: title-glitch 180ms steps(2) 2; }

@keyframes title-glitch {
  0% { transform: translateX(-8px); }
  50% { transform: translateX(9px); }
  100% { transform: translateX(-2px); }
}

h2 {
  margin: 0 0 1.4rem;
  color: #00e4a0;
  font-size: clamp(1.35rem, 4vw, 2.3rem);
  letter-spacing: -0.035em;
  text-shadow: 2px 0 rgba(255, 110, 199, 0.78), 0 0 20px rgba(0, 228, 160, 0.18);
}

p {
  margin: 0 0 1.25rem;
  color: rgba(232, 223, 245, 0.91);
  font-size: clamp(1.04rem, 2.1vw, 1.22rem);
}

.lede {
  color: #e8dff5;
  font-size: clamp(1.24rem, 3vw, 1.74rem);
  line-height: 1.45;
}

.final-line {
  color: #ffb347;
  font-size: 0.92rem;
}

.divider {
  position: relative;
  height: 4px;
  margin: clamp(2.75rem, 7vw, 5rem) 0;
  color: #9b8fb5;
  background: linear-gradient(90deg, #00e4a0, #7b2ff7 35%, #ff6ec7 69%, #ffb347);
  background-size: 250% 100%;
  box-shadow: 0 0 22px rgba(123, 47, 247, 0.44), 0 0 34px rgba(255, 110, 199, 0.2);
  animation: aurora-flow 2.8s ease-in-out infinite;
}

.divider::after {
  content: attr(data-code);
  position: absolute;
  right: 0;
  top: 0.8rem;
  font-size: 0.62rem;
  opacity: 0.72;
}

@keyframes aurora-flow {
  0%, 100% { background-position: 0% 50%; transform: scaleX(1); }
  50% { background-position: 100% 50%; transform: scaleX(0.985); }
}

.text-jolt {
  animation: text-jolt 190ms steps(2) both;
}

@keyframes text-jolt {
  0% { transform: translateX(0); filter: none; }
  33% { transform: translateX(6px) skewX(2deg); filter: hue-rotate(75deg); }
  66% { transform: translateX(-5px) skewX(-3deg); }
  100% { transform: translateX(0); filter: none; }
}

.signal-dial {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 65;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(0, 228, 160, 0.8);
  border-radius: 50%;
  color: #e8dff5;
  background: radial-gradient(circle at 50% var(--progress, 100%), rgba(0, 228, 160, 0.72), rgba(123, 47, 247, 0.15) 42%, rgba(13, 2, 33, 0.7) 72%);
  box-shadow: 0 0 22px rgba(0, 228, 160, 0.26), inset 0 0 18px rgba(255, 110, 199, 0.18);
  cursor: pointer;
}

.signal-dial span {
  display: block;
  font-size: 0.58rem;
  transform: rotate(-10deg);
}

.signal-dial:hover { transform: scale(1.08) rotate(7deg); }

@media (max-width: 820px) {
  .transmission { width: min(100% - 24px, 680px); }
  .segment::before { left: auto; right: 0; top: -1.35rem; writing-mode: horizontal-tb; }
  .blob { min-width: 220px; opacity: 0.12; }
  .signal-dial { width: 56px; height: 56px; }
}