/**
 * CRT overlay (`#app::after`) — minimal compositor cost:
 * single background, scan-roll only (no opacity flicker animation), one soft vignette.
 */

:root {
  --crt-overlay-opacity: 0.34;
  --crt-scanline-opacity: 0.052;
  --crt-tint-bg: rgba(18, 20, 26, 0.068);
  --crt-vignette-strong: rgba(0, 0, 0, 0.41);
  --crt-overlay-z: 50;
  --crt-roll-duration: 9s;
}

html.vs-crt-off #app::after {
  display: none !important;
}

#app::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--crt-overlay-z);
  pointer-events: none;
  background-color: var(--crt-tint-bg);
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, var(--crt-scanline-opacity)) 2px,
    rgba(0, 0, 0, var(--crt-scanline-opacity)) 3px
  );
  box-shadow: inset 0 0 56px var(--crt-vignette-strong);
  transform: translate3d(0, 0, 0);
  opacity: var(--crt-overlay-opacity);
  animation: crt-scan-roll var(--crt-roll-duration) linear infinite;
}

@keyframes crt-scan-roll {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app::after {
    animation: none;
    opacity: var(--crt-overlay-opacity);
    transform: none;
  }
}