:root {
  /* DESIGN FONT TOKENS: IBM Plex Mono** for transmission IDs Interference */
  --signal-black: #08070B;
  --bone-paper: #F2E7D2;
  --hot-pink: #FF2E88;
  --cathode-violet: #6C3BFF;
  --acid-chartreuse: #C7FF3D;
  --broadcast-blue: #111E5A;
  --rust-halftone: #B94B2C;
  --gradient-signal: linear-gradient(135deg, #FF2E88 0%, #6C3BFF 48%, #111E5A 100%);
}

* { box-sizing: border-box; }

html {
  background: var(--signal-black);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--bone-paper);
  background:
    radial-gradient(circle at 80% 10%, rgba(108, 59, 255, .2), transparent 28rem),
    radial-gradient(circle at 0% 70%, rgba(185, 75, 44, .16), transparent 24rem),
    var(--signal-black);
  font-family: "Libre Baskerville", Georgia, serif;
}

.grain,
.grain::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.grain {
  opacity: .38;
  mix-blend-mode: overlay;
  background-image: repeating-linear-gradient(0deg, rgba(242, 231, 210, .035) 0 1px, transparent 1px 4px);
}

.grain::after {
  content: "";
  opacity: .2;
  background:
    radial-gradient(circle at 13% 24%, rgba(255, 46, 136, .9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 61% 72%, rgba(199, 255, 61, .9) 0 1px, transparent 1.5px);
  background-size: 41px 47px, 53px 59px;
}

.cursor-mark {
  position: fixed;
  width: 46px;
  height: 46px;
  border: 2px solid var(--acid-chartreuse);
  border-radius: 43% 57% 48% 52%;
  transform: translate(-50%, -50%) rotate(var(--cursor-rot, 0deg));
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(6px 4px 0 rgba(255, 46, 136, .6));
  transition: opacity .25s ease;
}

body.pointer-active .cursor-mark { opacity: .55; }

.transmission { position: relative; }

.room {
  position: sticky;
  top: 0;
  min-height: 100vh;
  padding: clamp(18px, 2.2vw, 34px);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  background: var(--signal-black);
  border-bottom: 1px solid rgba(242, 231, 210, .16);
  overflow: hidden;
}

.room::before {
  content: "";
  position: absolute;
  inset: clamp(18px, 2.2vw, 34px);
  border: 1px dashed rgba(242, 231, 210, .18);
  pointer-events: none;
}

.room-tag,
.mono,
.kicker,
.stamp-control,
figcaption {
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: clamp(10px, .8vw, 12px);
}

.room-tag {
  color: var(--acid-chartreuse);
  text-shadow: 2px 0 var(--hot-pink), -2px 0 var(--cathode-violet);
  z-index: 2;
}

.bento {
  display: grid;
  height: calc(100vh - clamp(84px, 8vw, 116px));
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  gap: clamp(10px, 1vw, 16px);
  z-index: 1;
}

.grid-origin {
  grid-template-areas:
    "manifesto manifesto manifesto manifesto manifesto manifesto manifesto strip proofA proofA seal seal"
    "manifesto manifesto manifesto manifesto manifesto manifesto manifesto strip proofA proofA seal seal"
    "manifesto manifesto manifesto manifesto manifesto manifesto manifesto strip proofB proofB seal seal"
    "manifesto manifesto manifesto manifesto manifesto manifesto manifesto strip proofB proofB seal seal"
    "interference interference interference interference interference interference interference interference interference interference seal seal"
    "interference interference interference interference interference interference interference interference interference interference seal seal"
    "interference interference interference interference interference interference interference interference interference interference strip strip"
    "interference interference interference interference interference interference interference interference interference interference strip strip";
}

.grid-interference {
  grid-template-areas:
    "revision revision revision revision revision revision revision halftone halftone halftone checker checker"
    "revision revision revision revision revision revision revision halftone halftone halftone checker checker"
    "revision revision revision revision revision revision revision proof proof proof proof proof"
    "revision revision revision revision revision revision revision proof proof proof proof proof"
    "quote quote quote quote proof proof proof proof proof proof proof proof"
    "quote quote quote quote proof proof proof proof proof proof proof proof"
    "quote quote quote quote halftone halftone halftone halftone checker checker checker checker"
    "quote quote quote quote halftone halftone halftone halftone checker checker checker checker";
}

.grid-proof {
  grid-template-areas:
    "echo echo echo echo echo echo torn torn torn torn torn torn"
    "echo echo echo echo echo echo torn torn torn torn torn torn"
    "echo echo echo echo echo echo torn torn torn torn torn torn"
    "ledger ledger ledger ledger mask mask mask mask mask mask mask mask"
    "ledger ledger ledger ledger mask mask mask mask mask mask mask mask"
    "ledger ledger ledger ledger mask mask mask mask mask mask mask mask"
    "ledger ledger ledger ledger echo echo echo echo torn torn torn torn"
    "ledger ledger ledger ledger echo echo echo echo torn torn torn torn";
}

.grid-final {
  grid-template-areas:
    "finalSeal finalSeal finalSeal finalSeal finalLine finalLine finalLine finalLine finalLine finalLine finalLine finalLine"
    "finalSeal finalSeal finalSeal finalSeal finalLine finalLine finalLine finalLine finalLine finalLine finalLine finalLine"
    "finalSeal finalSeal finalSeal finalSeal finalLine finalLine finalLine finalLine finalLine finalLine finalLine finalLine"
    "finalSeal finalSeal finalSeal finalSeal finalLine finalLine finalLine finalLine finalLine finalLine finalLine finalLine"
    "finalNote finalNote finalNote finalNote finalNote finalNote finalNote finalNote finalNote finalNote finalNote finalNote"
    "finalNote finalNote finalNote finalNote finalNote finalNote finalNote finalNote finalNote finalNote finalNote finalNote"
    "finalNote finalNote finalNote finalNote finalNote finalNote finalNote finalNote finalNote finalNote finalNote finalNote"
    "finalNote finalNote finalNote finalNote finalNote finalNote finalNote finalNote finalNote finalNote finalNote finalNote";
}

[data-area="manifesto"] { grid-area: manifesto; }
[data-area="strip"] { grid-area: strip; }
[data-area="proofA"] { grid-area: proofA; }
[data-area="proofB"] { grid-area: proofB; }
[data-area="seal"] { grid-area: seal; }
[data-area="interference"] { grid-area: interference; }
[data-area="revision"] { grid-area: revision; }
[data-area="halftone"] { grid-area: halftone; }
[data-area="proof"] { grid-area: proof; }
[data-area="checker"] { grid-area: checker; }
[data-area="quote"] { grid-area: quote; }
[data-area="echo"] { grid-area: echo; }
[data-area="torn"] { grid-area: torn; }
[data-area="ledger"] { grid-area: ledger; }
[data-area="mask"] { grid-area: mask; }
[data-area="finalSeal"] { grid-area: finalSeal; }
[data-area="finalLine"] { grid-area: finalLine; }
[data-area="finalNote"] { grid-area: finalNote; }

.panel {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 2.2vw, 34px);
  border: 2px solid rgba(242, 231, 210, .72);
  background: rgba(8, 7, 11, .94);
  box-shadow: inset 0 0 0 1px rgba(8, 7, 11, .8), 10px 10px 0 rgba(255, 46, 136, .18);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  isolation: isolate;
}

.panel::before,
.panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.panel::before {
  inset: 0;
  background-image: repeating-linear-gradient(90deg, transparent 0 13px, rgba(242, 231, 210, .045) 13px 14px);
  opacity: .6;
}

.panel::after {
  inset: auto -4% 15% -4%;
  height: 18%;
  background: rgba(255, 46, 136, .12);
  clip-path: polygon(0 35%, 18% 23%, 33% 48%, 51% 10%, 70% 52%, 86% 30%, 100% 42%, 100% 68%, 0 75%);
}

h1, h2, blockquote {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  line-height: .88;
  margin: 0;
}

h1 { font-size: clamp(58px, 8.2vw, 142px); max-width: 10ch; }
h2 { font-size: clamp(42px, 6vw, 106px); }
p, li {
  font-size: clamp(14px, 1.15vw, 19px);
  line-height: 1.55;
  max-width: 58ch;
}

.kicker { color: var(--hot-pink); margin-bottom: 1rem; display: block; }
.mono { color: var(--acid-chartreuse); }

.manifesto,
.bone,
.paper-ledger,
.final-line {
  background: var(--bone-paper);
  color: var(--signal-black);
  border-color: var(--signal-black);
}

.deep,
.blue,
.evidence-two { background: var(--broadcast-blue); }

.strip {
  align-items: center;
  justify-content: space-around;
  background: var(--gradient-signal);
  color: var(--bone-paper);
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(28px, 4vw, 68px);
  font-weight: 600;
  border-color: var(--hot-pink);
}

.evidence-one { color: var(--signal-black); background: var(--bone-paper); }

.interference,
.final-note {
  background: var(--gradient-signal);
  border-color: var(--acid-chartreuse);
}

.interference h2 { max-width: 8ch; }

.test-card {
  position: absolute;
  width: 34vmin;
  aspect-ratio: 1;
  right: -7vmin;
  top: -8vmin;
  border-radius: 50%;
  border: 2px solid rgba(242, 231, 210, .7);
  background:
    radial-gradient(circle, transparent 0 18%, rgba(199, 255, 61, .52) 19% 20%, transparent 21% 36%, rgba(242, 231, 210, .35) 37% 38%, transparent 39%),
    conic-gradient(from 12deg, rgba(8, 7, 11, .1), rgba(185, 75, 44, .5), rgba(108, 59, 255, .4), rgba(255, 46, 136, .45), rgba(8, 7, 11, .1));
  opacity: .72;
}

.emblem-cell,
.final-seal {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.seal-svg { width: min(100%, 280px); overflow: visible; }
.seal-ring, .seal-slash, .seal-spark, .seal-underline, .annotation path {
  fill: none;
  stroke: var(--acid-chartreuse);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.seal-shadow { fill: none; stroke: var(--hot-pink); stroke-width: 9; opacity: .5; transform: translate(8px, 5px); }
.manifesto .stamp-control, .final-note .stamp-control {
  align-self: flex-start;
  border: 2px solid currentColor;
  padding: .8rem 1rem;
  transform: rotate(-2deg);
  box-shadow: 5px 5px 0 var(--hot-pink);
}

.halftone { background: var(--rust-halftone); }
.rosette {
  position: absolute;
  inset: -20% -10% auto auto;
  width: 38vmin;
  aspect-ratio: 1;
  background-image: radial-gradient(circle, rgba(8, 7, 11, .72) 0 1.5px, transparent 2px);
  background-size: 10px 10px;
  border-radius: 50%;
  opacity: .55;
}

.checker {
  background-color: var(--signal-black);
  background-image:
    linear-gradient(45deg, var(--bone-paper) 25%, transparent 25%),
    linear-gradient(-45deg, var(--bone-paper) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--hot-pink) 75%),
    linear-gradient(-45deg, transparent 75%, var(--hot-pink) 75%);
  background-size: 38px 38px;
  background-position: 0 0, 0 19px, 19px -19px, -19px 0;
}

.quote {
  background: var(--signal-black);
  border-color: var(--rust-halftone);
}

blockquote { font-size: clamp(34px, 5vw, 94px); color: var(--bone-paper); }

.annotation { width: min(100%, 420px); overflow: visible; transform: rotate(-3deg); }
.torn { background: var(--gradient-signal); }
.torn::after {
  inset: 14% -8% auto -8%;
  height: 62%;
  background: repeating-linear-gradient(0deg, rgba(242,231,210,.85) 0 18px, rgba(8,7,11,.95) 18px 23px, rgba(255,46,136,.85) 23px 31px, rgba(108,59,255,.9) 31px 45px);
  mix-blend-mode: hard-light;
  clip-path: polygon(0 4%, 100% 0, 98% 17%, 3% 22%, 6% 39%, 100% 31%, 97% 54%, 1% 59%, 4% 78%, 99% 72%, 100% 100%, 0 96%);
}

.paper-ledger ul { padding-left: 1.2rem; }

.mask-panel { background: var(--broadcast-blue); align-items: center; justify-content: center; }
.mask-face {
  width: min(42vmin, 360px);
  aspect-ratio: 1.15 / 1;
  border: 5px solid var(--bone-paper);
  border-radius: 46% 54% 45% 55% / 38% 45% 55% 62%;
  position: relative;
  filter: drop-shadow(14px 10px 0 var(--hot-pink));
}
.mask-face::before,
.mask-face::after {
  content: "";
  position: absolute;
  top: 38%;
  width: 18%;
  height: 12%;
  border: 4px solid var(--acid-chartreuse);
  border-radius: 50%;
}
.mask-face::before { left: 23%; transform: rotate(-14deg); }
.mask-face::after { right: 23%; transform: rotate(11deg); }

.final-seal { background: var(--signal-black); border-color: var(--acid-chartreuse); }
.final-line { justify-content: center; }
.final-line h2 { font-size: clamp(54px, 8vw, 148px); max-width: 12ch; }
.final-note { justify-content: center; align-items: center; text-align: center; }
.final-note p { font-size: clamp(20px, 2.2vw, 36px); }

.glitch-title { position: relative; }
.glitch-title::before,
.glitch-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.glitch-title::before { color: var(--hot-pink); transform: translate(3px, -2px); }
.glitch-title::after { color: var(--cathode-violet); transform: translate(-3px, 2px); }

.reveal {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(8px);
  transition: opacity .65s steps(3, end), transform .75s cubic-bezier(.2,.9,.1,1), filter .55s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.reveal.is-visible .glitch-title::before,
.reveal.is-visible .glitch-title::after { animation: channelSlip .72s .12s steps(2, end); }
.reveal.is-visible .draw-path { animation: trace 1.8s ease forwards; }

.draw-path {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
}

.panel.is-jolting { animation: moduleJolt .42s steps(2, end); }
.strip span { animation: stripPulse 2.3s infinite steps(2, end); }
.strip span:nth-child(2n) { animation-delay: .5s; }

@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes channelSlip {
  0%, 100% { opacity: 0; clip-path: inset(0); }
  18% { opacity: .7; clip-path: inset(0 0 72% 0); }
  38% { opacity: .62; clip-path: inset(42% 0 28% 0); }
  62% { opacity: .52; clip-path: inset(76% 0 0 0); }
}
@keyframes moduleJolt {
  0%, 100% { transform: translate(0,0); }
  25% { transform: translate(5px,-2px); }
  50% { transform: translate(-3px,3px); }
  75% { transform: translate(2px,1px); }
}
@keyframes stripPulse {
  0%, 82%, 100% { opacity: 1; transform: translateX(0); }
  88% { opacity: .2; transform: translateX(6px); }
}

@media (max-width: 900px) {
  .room { position: relative; min-height: auto; }
  .bento {
    height: auto;
    min-height: 100vh;
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .grid-origin,
  .grid-interference,
  .grid-proof,
  .grid-final {
    grid-template-areas: none;
  }
  .panel { grid-area: auto !important; min-height: 220px; }
  .manifesto, .revision, .echo, .final-line { min-height: 62vh; }
  .strip { min-height: 140px; flex-direction: row; }
  h1 { font-size: clamp(52px, 17vw, 84px); }
  h2 { font-size: clamp(42px, 13vw, 74px); }
  .cursor-mark { display: none; }
}