:root {
  --crt-scanline-opacity: 0.20;
  --crt-scanline-size: 3px;
  --crt-scanline-speed: 0.7s;

  --crt-noise-opacity: 0.18;
  --crt-noise-speed: 0.18s;
}


body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;

  background: linear-gradient(
    rgba(20, 20, 20, 0) 66%,
    rgba(0, 0, 0, var(--crt-scanline-opacity)) 33%
  );

  background-size: 100% var(--crt-scanline-size);
  animation: crt-scanlines var(--crt-scanline-speed) linear infinite;
}


body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;

  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.03),
      rgba(255,255,255,0.03) 1px,
      rgba(0,0,0,0.03) 1px,
      rgba(0,0,0,0.03) 2px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.02),
      rgba(255,255,255,0.02) 1px,
      transparent 1px,
      transparent 2px
    );

  opacity: var(--crt-noise-opacity);
  mix-blend-mode: overlay;

  animation: crt-noise var(--crt-noise-speed) steps(2) infinite;
}


@keyframes crt-scanlines {
  0%   { background-position: 0 0; }
  100% { background-position: 0 calc(var(--crt-scanline-size) * 3); }
}

@keyframes crt-noise {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-1px, 1px); }
  50%  { transform: translate(1px, -1px); }
  75%  { transform: translate(-1px, -1px); }
  100% { transform: translate(0, 0); }
}


@media (max-width: 768px) {
  :root {
    --crt-scanline-size: 4px;
    --crt-noise-opacity: 0.12;
  }
}