/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

html, body {
  background: #000;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}

.stage { position: fixed; inset: 0; background: #000; }

/* The dithered picture + animated dead-media effects are all painted here. */
#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- NGA wordmark: glowing CRT type ---------- */
.wordmark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
  mix-blend-mode: screen;          /* sit on the glass, lift off the dark base */
  animation: wm-jitter 7s steps(1) infinite;
}

.glyphs {
  position: relative;
  display: block;
  font-family: "Anton", "Arial Narrow", sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 5vw, 54px);
  line-height: 0.8;
  letter-spacing: 0.14em;
  text-indent: 0.14em;             /* balance the trailing letter-spacing */
  color: #fff;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.95),
    0 0 6px rgba(255, 255, 255, 0.55),
    0 0 18px rgba(220, 235, 255, 0.45),
    0 0 42px rgba(150, 190, 255, 0.30);
  animation: wm-flicker 5.5s steps(60) infinite;
}

/* Chromatic-aberration ghosts, sitting just behind the crisp white. */
.glyphs::before,
.glyphs::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  letter-spacing: inherit;
  text-indent: inherit;
  text-shadow: none;
  mix-blend-mode: screen;
}
.glyphs::before {
  color: #ff1d2d;
  transform: translate(-0.018em, 0.004em);
  animation: ca-left 3.7s ease-in-out infinite;
}
.glyphs::after {
  color: #16e0ff;
  transform: translate(0.018em, -0.004em);
  animation: ca-right 3.7s ease-in-out infinite;
}

@keyframes ca-left {
  0%, 100% { transform: translate(-0.018em, 0.004em); }
  50%      { transform: translate(-0.030em, -0.006em); }
}
@keyframes ca-right {
  0%, 100% { transform: translate(0.018em, -0.004em); }
  50%      { transform: translate(0.030em, 0.006em); }
}

/* CRT brightness flicker + rare dropouts. */
@keyframes wm-flicker {
  0%, 100% { opacity: 0.94; }
  8%       { opacity: 1.00; }
  9%       { opacity: 0.80; }
  10%      { opacity: 0.98; }
  43%      { opacity: 0.96; }
  44%      { opacity: 0.62; }   /* glitch dropout */
  45%      { opacity: 0.97; }
  70%      { opacity: 1.00; }
  72%      { opacity: 0.88; }
}

/* Occasional whole-wordmark horizontal jump (tracking error). */
@keyframes wm-jitter {
  0%, 96%, 100% { transform: translate(-50%, -50%); }
  97%           { transform: translate(calc(-50% + 3px), -50%); }
  98%           { transform: translate(calc(-50% - 2px), -50%); }
  99%           { transform: translate(calc(-50% + 1px), -50%); }
}

/* ---------- CRT scanlines ---------- */
.scanlines {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0)    0px,
    rgba(0, 0, 0, 0)    1px,
    rgba(0, 0, 0, 0.55) 2px,
    rgba(0, 0, 0, 0.55) 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.7;
}

/* ---------- Vignette: collapse the edges to black ---------- */
.vignette {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background:
    radial-gradient(130% 110% at 50% 46%,
      rgba(0, 0, 0, 0)     38%,
      rgba(0, 0, 0, 0.55)  74%,
      rgba(0, 0, 0, 0.95) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .wordmark, .glyphs, .glyphs::before, .glyphs::after { animation: none; }
}