/* —— CRT atmosphere (ported from stopthedatacentre.ca / radar.newscube.ca) ——
   No blend modes, transform-only motion (pure compositor work, no repaints).
   Animated layers are oversized (inset: -8px) so drift never exposes edges. */
html {
  isolation: isolate;
}

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

/* Vignette + faint color fringe (static) */
body::before {
  z-index: 2147483000;
  background-image:
    linear-gradient(
      102deg,
      rgba(124, 58, 237, 0.012) 0%,
      transparent 38%,
      transparent 62%,
      rgba(37, 99, 235, 0.014) 100%
    ),
    radial-gradient(
      ellipse 94% 90% at 50% 46%,
      rgba(244, 244, 246, 0) 0%,
      transparent 58%,
      rgba(12, 12, 20, 0.055) 100%
    );
  opacity: 0.88;
  box-shadow: inset 0 0 72px 24px rgba(12, 12, 20, 0.045);
}

/* Phosphor grain + electric micro-sparks (single layer, whole layer drifts;
   micro-spark opacity jitters ride on top of the drift). */
html::before {
  z-index: 2147483001;
  inset: -8px;
  background-image:
    repeating-linear-gradient(
      101deg,
      transparent 0,
      transparent 2px,
      rgba(12, 12, 20, 0.006) 2px,
      rgba(12, 12, 20, 0.006) 3px,
      transparent 3px,
      transparent 5px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 3px,
      rgba(37, 99, 235, 0.007) 3px,
      rgba(37, 99, 235, 0.007) 4px,
      transparent 4px,
      transparent 7px
    ),
    radial-gradient(ellipse 85% 55% at 22% 28%, rgba(124, 58, 237, 0.014) 0%, transparent 58%),
    radial-gradient(ellipse 70% 45% at 82% 72%, rgba(37, 99, 235, 0.016) 0%, transparent 52%),
    repeating-linear-gradient(
      71deg,
      transparent 0,
      transparent 19px,
      rgba(37, 99, 235, 0.04) 19px,
      rgba(37, 99, 235, 0.04) 20px,
      transparent 20px,
      transparent 58px
    ),
    repeating-linear-gradient(
      -63deg,
      transparent 0,
      transparent 27px,
      rgba(12, 12, 20, 0.028) 27px,
      rgba(12, 12, 20, 0.028) 28px,
      transparent 28px,
      transparent 52px
    ),
    linear-gradient(
      88deg,
      transparent 0%,
      transparent 46%,
      rgba(37, 99, 235, 0.05) 49.4%,
      rgba(244, 244, 246, 0.04) 50%,
      rgba(37, 99, 235, 0.05) 50.6%,
      transparent 54%,
      transparent 100%
    );
  opacity: 0.28;
  will-change: transform, opacity;
  backface-visibility: hidden;
  /* steps(2, jump-none): each keyframe segment renders as two held values —
     compositor updates a few times per cycle instead of every frame. */
  animation: crt-phosphor-atmosphere 10s steps(2, jump-none) infinite;
}

/* Scanlines — slow transform-only crawl; 4px pattern pitch = seamless loop. */
body::after {
  z-index: 2147483002;
  inset: -8px;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(12, 12, 20, 0.028) 3px,
    rgba(12, 12, 20, 0.028) 4px
  );
  background-size: 100% 4px;
  opacity: 0.72;
  will-change: transform;
  backface-visibility: hidden;
  animation: crt-scanlines 1.6s steps(2, jump-none) infinite;
}

/* Added by the frame guard below when the device can't hold ~30fps. */
html.crt-anim-paused::before,
html.crt-anim-paused body::after {
  animation-play-state: paused;
}

@keyframes crt-phosphor-atmosphere {
  0%,
  100% {
    opacity: 0.26;
    transform: translate3d(0, 0, 0);
  }

  6.85% {
    opacity: 0.27;
    transform: translate3d(0.35px, -0.2px, 0);
  }

  6.9% {
    opacity: 0.36;
    transform: translate3d(0.6px, -0.2px, 0);
  }

  6.98% {
    opacity: 0.27;
    transform: translate3d(0.35px, -0.2px, 0);
  }

  25% {
    opacity: 0.3;
    transform: translate3d(2.5px, -1.5px, 0);
  }

  28.9% {
    opacity: 0.3;
    transform: translate3d(2.9px, -1.74px, 0);
  }

  28.95% {
    opacity: 0.35;
    transform: translate3d(2.7px, -1.59px, 0);
  }

  29.02% {
    opacity: 0.3;
    transform: translate3d(2.9px, -1.74px, 0);
  }

  44.55% {
    opacity: 0.31;
    transform: translate3d(4.45px, -2.67px, 0);
  }

  44.6% {
    opacity: 0.37;
    transform: translate3d(4.61px, -2.78px, 0);
  }

  44.68% {
    opacity: 0.32;
    transform: translate3d(4.47px, -2.68px, 0);
  }

  44.75%,
  50% {
    opacity: 0.32;
    transform: translate3d(5px, -3px, 0);
  }

  70.95% {
    opacity: 0.29;
    transform: translate3d(2.9px, -1.74px, 0);
  }

  71% {
    opacity: 0.34;
    transform: translate3d(2.9px, -1.74px, 0);
  }

  71.06% {
    opacity: 0.29;
    transform: translate3d(2.9px, -1.74px, 0);
  }

  75% {
    opacity: 0.28;
    transform: translate3d(2.5px, -1.5px, 0);
  }

  87.75% {
    opacity: 0.27;
    transform: translate3d(0.7px, -0.42px, 0);
  }

  87.8% {
    opacity: 0.36;
    transform: translate3d(0.4px, -0.42px, 0);
  }

  87.88% {
    opacity: 0.27;
    transform: translate3d(0.7px, -0.42px, 0);
  }

  95.55% {
    opacity: 0.26;
    transform: translate3d(0.22px, -0.13px, 0);
  }

  95.6% {
    opacity: 0.35;
    transform: translate3d(0.42px, -0.03px, 0);
  }

  95.67% {
    opacity: 0.26;
    transform: translate3d(0.22px, -0.13px, 0);
  }
}

/* Slight x wobble keeps the crawl organic. */
@keyframes crt-scanlines {
  0% {
    transform: translate3d(0, 0, 0);
  }

  23% {
    transform: translate3d(0.25px, 0.95px, 0);
  }

  49% {
    transform: translate3d(-0.18px, 2.05px, 0);
  }

  74% {
    transform: translate3d(0.1px, 3.15px, 0);
  }

  100% {
    transform: translate3d(0, 4px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html::before {
    animation: none;
    opacity: 0.28;
    transform: none;
  }

  body::after {
    animation: none;
    opacity: 0;
  }
}