/* CRT Overlay Effects — scanlines, phosphor glow, curvature, flicker */

.crt-overlay {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--crt-bg);
}

/* Scanlines */
.crt-overlay::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 1px,
    rgba(0, 0, 0, var(--crt-scanline-opacity)) 1px,
    rgba(0, 0, 0, var(--crt-scanline-opacity)) var(--crt-scanline-height)
  );
  pointer-events: none;
  z-index: 15;
}

/* Screen curvature — radial vignette */
.crt-overlay::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    transparent var(--crt-curvature-start),
    rgba(0, 0, 0, var(--crt-curvature-opacity)) 100%
  );
  pointer-events: none;
  z-index: 16;
}

/* Flicker animation */
@keyframes crt-flicker {
  0%   { opacity: var(--crt-flicker-min, 0.97); }
  100% { opacity: var(--crt-flicker-max, 1.00); }
}

.app-container {
  animation: crt-flicker var(--crt-flicker-speed) alternate infinite;
}

/* Phosphor glow — applied to text elements */
.crt-glow {
  text-shadow:
    0 0 var(--crt-glow-radius-1) rgba(255, 176, 0, var(--crt-glow-opacity-1)),
    0 0 var(--crt-glow-radius-2) rgba(255, 176, 0, var(--crt-glow-opacity-2)),
    0 0 var(--crt-glow-radius-3) rgba(255, 176, 0, var(--crt-glow-opacity-3));
}

/* Reduced glow for secondary elements (console) */
.crt-glow-dim {
  text-shadow:
    0 0 var(--crt-glow-radius-1) rgba(255, 176, 0, var(--crt-glow-opacity-1)),
    0 0 var(--crt-glow-radius-2) rgba(255, 176, 0, var(--crt-glow-opacity-2));
}

/* Accessibility: disable flicker for motion-sensitive users */
@media (prefers-reduced-motion: reduce) {
  .app-container {
    animation: none;
  }
}