:root {
  /* Commissioner, IBM Plex Mono, and Space Grotesk from Google Fonts; local fallbacks from system UI. */
  --black: #080714;
  --violet: #17113A;
  --cyan: #18F7FF;
  --magenta: #FF3FA4;
  --lime: #C7FF4A;
  --peri: #8B8DFF;
  --mist: #E9F7FF;
  --display: "Commissioner", Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --accent: "Space Grotesk", "Commissioner", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--mist);
  font-family: var(--display);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .16;
  background-image: radial-gradient(circle at 20% 30%, #E9F7FF 0 1px, transparent 1px), radial-gradient(circle at 70% 60%, #18F7FF 0 1px, transparent 1px);
  background-size: 23px 23px, 31px 31px;
  mix-blend-mode: screen;
}

.diagonal-spine {
  position: fixed;
  left: -10vw;
  top: 4vh;
  width: 125vw;
  height: 3px;
  z-index: 15;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--peri), transparent);
  transform: rotate(34deg);
  box-shadow: 0 0 24px rgba(24, 247, 255, .55);
  transition: transform .8s ease, box-shadow .8s ease;
}

.diagonal-spine span {
  position: absolute;
  top: -16px;
  font: 500 11px/1 var(--mono);
  letter-spacing: .18em;
  color: var(--mist);
  background: var(--violet);
  border: 2px solid var(--cyan);
  border-radius: 999px;
  padding: 7px 10px;
  transform: rotate(-34deg);
}

.diagonal-spine span:nth-child(1) { left: 15%; }
.diagonal-spine span:nth-child(2) { left: 33%; }
.diagonal-spine span:nth-child(3) { left: 51%; }
.diagonal-spine span:nth-child(4) { left: 69%; }
.diagonal-spine span:nth-child(5) { left: 86%; }
.diagonal-spine span.is-active { color: var(--black); background: var(--cyan); box-shadow: 0 0 18px rgba(24, 247, 255, .7); }

.scene {
  position: relative;
  min-height: 106vh;
  display: grid;
  place-items: center;
  padding: 11vh 7vw;
  margin-top: -8vh;
  isolation: isolate;
  clip-path: polygon(0 9%, 100% 0, 100% 91%, 0 100%);
}

.scene:first-child { margin-top: 0; }
.scene:nth-child(even) { clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%); }

.scene::before {
  content: "";
  position: absolute;
  inset: 5% -4%;
  z-index: -2;
  background: var(--violet);
  transform: skewY(-5deg);
  border: 4px solid rgba(233, 247, 255, .06);
}

.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(115deg, transparent 0 45%, rgba(233, 247, 255, .05) 45% 47%, transparent 47%), radial-gradient(circle at 80% 22%, rgba(255, 63, 164, .12), transparent 22rem);
}

.scene-inner {
  position: relative;
  width: min(1120px, 100%);
  min-height: 64vh;
  padding: clamp(32px, 7vw, 82px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.skew-left { transform: skewY(-3deg); }
.skew-left > * { transform: skewY(3deg); }
.skew-right { transform: skewY(3deg); }
.skew-right > * { transform: skewY(-3deg); }

.quiet-label, .panel-tag, .closing-code {
  font: 500 12px/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--cyan);
}

h1, h2 { margin: 0; font-family: var(--display); font-weight: 900; letter-spacing: -.055em; text-transform: uppercase; }
h2 { max-width: 920px; font-size: clamp(48px, 10vw, 142px); line-height: .78; text-shadow: -8px 8px 0 rgba(255, 63, 164, .33); }
p { max-width: 560px; font-size: clamp(18px, 2vw, 25px); line-height: 1.45; color: rgba(233, 247, 255, .78); }

.hero { background: var(--black); clip-path: none; }
.hero::before { background: linear-gradient(135deg, var(--black), var(--violet)); transform: none; inset: 0; border: 0; }
.hero-line { position: absolute; left: -16vw; top: 50%; width: 135vw; height: 8px; background: var(--cyan); transform: rotate(-27deg); box-shadow: 0 0 35px rgba(24, 247, 255, .8); }
.ccattl { position: relative; display: flex; gap: clamp(2px, .8vw, 12px); font-size: clamp(64px, 18vw, 238px); line-height: .8; z-index: 2; }
.ccattl span { display: inline-block; opacity: 0; transform: translateY(42px) skewX(-12deg); animation: letterIn .9s cubic-bezier(.2, .8, .2, 1) forwards; text-shadow: -10px 10px 0 var(--magenta), 10px -8px 0 rgba(139, 141, 255, .7); }
.ccattl span:nth-child(2) { animation-delay: .12s; }
.ccattl span:nth-child(3) { animation-delay: .24s; }
.ccattl span:nth-child(4) { animation-delay: .36s; }
.ccattl span:nth-child(5) { animation-delay: .48s; }
.ccattl span:nth-child(6) { animation-delay: .60s; }
.hero-copy { position: relative; z-index: 2; margin-left: auto; }

.blob { position: absolute; width: 34vw; height: 30vw; min-width: 260px; min-height: 230px; border: 5px solid var(--black); border-radius: 48% 52% 62% 38% / 56% 33% 67% 44%; filter: saturate(1.1); animation: breathe 8s ease-in-out infinite alternate; }
.blob::after { content: ""; position: absolute; inset: 12%; border-radius: inherit; background-image: radial-gradient(circle, rgba(8, 7, 20, .5) 0 3px, transparent 3px); background-size: 18px 18px; }
.blob-magenta { right: -5vw; top: 10vh; background: var(--magenta); box-shadow: -22px 24px 0 var(--peri); }
.blob-peri { left: -8vw; bottom: 2vh; background: var(--peri); box-shadow: 22px -18px 0 var(--cyan); animation-delay: -3s; }

.tick-rail, .sound-bars { display: flex; gap: 12px; align-items: flex-end; margin-top: 36px; }
.tick-rail i, .sound-bars i { display: block; width: 16px; border-radius: 999px; background: var(--cyan); animation: blink 2.8s ease-in-out infinite; }
.tick-rail i { height: 62px; }
.tick-rail i:nth-child(even), .sound-bars i:nth-child(even) { height: 34px; background: var(--magenta); animation-delay: .4s; }

.scene-buffer { background: #17113A; }
.skeleton-field { position: absolute; right: 4%; top: 8%; width: min(460px, 52vw); height: 300px; transform: rotate(-12deg); }
.bar, .node { position: absolute; overflow: hidden; background: rgba(233, 247, 255, .14); border: 3px solid var(--black); box-shadow: 10px 10px 0 rgba(255, 63, 164, .45); }
.bar { height: 34px; border-radius: 999px; }
.bar::after, .node::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(24, 247, 255, .72), transparent); animation: shimmer 3.4s ease-in-out infinite; }
.wide { width: 100%; top: 40px; }
.mid { width: 72%; top: 110px; right: 0; }
.short { width: 48%; top: 180px; left: 8%; }
.node { width: 82px; height: 82px; border-radius: 50%; right: 12%; bottom: 0; }
.node.small { width: 38px; height: 38px; left: 4%; top: 0; box-shadow: 8px 8px 0 rgba(199, 255, 74, .5); }
.sticker-arrow { position: absolute; right: 10%; bottom: 10%; font: 700 110px/1 var(--accent); color: var(--lime); text-shadow: -8px 8px 0 var(--black); }

.scene-glow { background: #080714; }
.halftone-moon { position: absolute; right: 7%; top: 7%; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, var(--peri) 0 45%, transparent 46%), radial-gradient(circle, var(--magenta) 0 3px, transparent 4px); background-size: 100% 100%, 18px 18px; box-shadow: -18px 18px 0 var(--black), -28px 28px 0 var(--cyan); }
.cable-knot { position: absolute; left: 4%; bottom: 8%; width: 300px; height: 220px; }
.cable-knot span { position: absolute; inset: 20%; border: 20px solid var(--magenta); border-radius: 50%; transform: rotate(20deg); }
.cable-knot span:nth-child(2) { border-color: var(--cyan); transform: rotate(-25deg) translateX(34px); }
.cable-knot span:nth-child(3) { border-color: var(--peri); transform: rotate(70deg) translateY(20px); }
.registration-crosses i { position: absolute; width: 54px; height: 54px; }
.registration-crosses i::before, .registration-crosses i::after { content: ""; position: absolute; background: var(--magenta); }
.registration-crosses i::before { left: 24px; top: 0; width: 6px; height: 54px; }
.registration-crosses i::after { top: 24px; left: 0; height: 6px; width: 54px; }
.registration-crosses i:nth-child(1) { left: 16%; top: 10%; }
.registration-crosses i:nth-child(2) { right: 18%; bottom: 18%; transform: rotate(12deg); }
.registration-crosses i:nth-child(3) { left: 48%; bottom: 7%; transform: rotate(-18deg); }

.scene-settle { background: #17113A; }
.terminal-sticker { position: absolute; right: 8%; top: 16%; width: 250px; padding: 28px; border-radius: 28px; background: var(--mist); border: 5px solid var(--black); box-shadow: -15px 15px 0 var(--lime); transform: rotate(7deg); }
.terminal-sticker span { display: block; height: 20px; margin: 14px 0; border-radius: 999px; background: var(--violet); }
.terminal-sticker span:nth-child(2) { width: 68%; background: var(--magenta); }
.terminal-sticker span:nth-child(3) { width: 44%; background: var(--cyan); }
.scene-settle h2 { text-shadow: -8px 8px 0 rgba(199, 255, 74, .35); }
.sound-bars i { width: 24px; height: 120px; background: var(--lime); }
.sound-bars i:nth-child(2) { height: 70px; }
.sound-bars i:nth-child(3) { height: 160px; background: var(--cyan); }
.sound-bars i:nth-child(4) { height: 48px; }
.sound-bars i:nth-child(5) { height: 92px; background: var(--magenta); }

.scene-signal { background: var(--black); }
.scene-signal::before { background: linear-gradient(180deg, #080714, #17113A); }
.soft-horizon { position: absolute; left: -8%; right: -8%; top: 46%; height: 7px; background: linear-gradient(90deg, transparent, var(--cyan), var(--lime), transparent); box-shadow: 0 0 38px rgba(199, 255, 74, .4); transform: rotate(-3deg); }
.final-poster { align-items: center; text-align: center; }
.final-poster p { margin-left: auto; margin-right: auto; }
.quiet-button { margin-top: 28px; width: 122px; height: 122px; border-radius: 50%; display: grid; place-items: center; font: 700 22px/1 var(--accent); color: var(--black); background: var(--lime); border: 5px solid var(--black); box-shadow: 0 0 0 7px var(--cyan), -15px 15px 0 var(--magenta); text-transform: uppercase; cursor: pointer; transition: transform .4s ease, box-shadow .4s ease; }
.quiet-button.is-calm { transform: scale(.9) rotate(-6deg); box-shadow: 0 0 0 7px var(--peri), -8px 8px 0 var(--magenta); }
.closing-code { margin-top: 46px; color: var(--peri); }

@keyframes letterIn { to { opacity: 1; transform: translateY(0) skewX(0); } }
@keyframes breathe { to { border-radius: 62% 38% 42% 58% / 40% 61% 39% 60%; transform: translate3d(12px, -18px, 0) rotate(4deg); } }
@keyframes shimmer { 50%, 100% { transform: translateX(100%); } }
@keyframes blink { 0%, 70%, 100% { opacity: .35; transform: scaleY(.75); } 35% { opacity: 1; transform: scaleY(1); } }

body.pointer-active .blob { transition: transform .25s ease-out; }
body.settled .grain { opacity: .08; }
body.settled .hero-line, body.settled .diagonal-spine { box-shadow: 0 0 18px rgba(199, 255, 74, .38); }

@media (max-width: 760px) {
  .scene { padding: 12vh 5vw; min-height: 100vh; }
  .scene-inner { padding: 28px 8px; }
  .diagonal-spine span { display: none; }
  h2 { font-size: clamp(42px, 17vw, 82px); }
  .ccattl { font-size: 23vw; flex-wrap: wrap; }
  .skeleton-field, .terminal-sticker, .halftone-moon, .cable-knot { opacity: .42; transform: scale(.75); }
  .sticker-arrow { font-size: 72px; }
}