/* ==========================================================================
   CRT OVERLAY
   Decorative only — fixed, full-viewport, pointer-events disabled so it
   never blocks clicks, and aria-hidden in the HTML so it carries no
   content to assistive tech.
   ========================================================================== */
.crt-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}

/* Horizontal scanlines with a very soft flicker */
.crt-scanlines {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(70, 52, 42, 0.05) 0px,
    rgba(70, 52, 42, 0.05) 1px,
    transparent 1px,
    transparent 3px
  );
  animation: crt-flicker 6s infinite;
}
html[data-theme="dark"] .crt-scanlines {
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35) 0px,
    rgba(0, 0, 0, 0.35) 1px,
    transparent 1px,
    transparent 3px
  );
}
@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.94; }
  94% { opacity: 1; }
  96% { opacity: 0.97; }
}

/* Faint noise grain */
.crt-noise {
  position: absolute;
  inset: 0;
  opacity: 0.6;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
}

/* Soft edge vignette, like light falling off around a monitor's edge */
.crt-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(70, 52, 42, 0.12) 100%);
}
html[data-theme="dark"] .crt-vignette {
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.55) 100%);
}

/* Optional class for elements that want a subtle chromatic-aberration edge
   (currently unused by default, available for headings if desired) */
.crt-chroma {
  text-shadow:
    0.5px 0 rgba(197, 107, 58, 0.35),
    -0.5px 0 rgba(70, 52, 42, 0.25);
}
html[data-theme="dark"] .crt-chroma {
  text-shadow:
    0.5px 0 rgba(224, 138, 79, 0.4),
    -0.5px 0 rgba(233, 220, 199, 0.15);
}

/* Section headings get the same subtle aberration treatment */
.section-heading h2 {
  text-shadow:
    0.5px 0 rgba(197, 107, 58, 0.35),
    -0.5px 0 rgba(70, 52, 42, 0.25);
}
html[data-theme="dark"] .section-heading h2 {
  text-shadow:
    0.5px 0 rgba(224, 138, 79, 0.4),
    -0.5px 0 rgba(233, 220, 199, 0.15);
}

@media (prefers-reduced-motion: reduce) {
  .crt-scanlines { animation: none; }
}