/* ============================================================
   HAVA.SI — FX overlays: film grain, vignette, scanlines, atmosphere
   Cinematic texture layers — kill the "flat digital" look.
   All pointer-events:none, GPU-cheap, respect reduced-motion.
   ============================================================ */

/* ── FILM GRAIN ── static fractal-noise veil (no blend mode / no animation
   → Safari-safe: doesn't force a full-screen recomposite every frame) ── */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 170px 170px;
}

/* ── VIGNETTE ── focuses attention to centre, deepens the void.
   Plain dark radial (no blend mode) → cheap, never recomposites. ── */
.vignette {
  position: fixed; inset: 0; z-index: 58; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 58%, rgba(4,3,7,.5) 100%);
}

/* ── SCANLINES ── faint horizontal CRT lines + slow drifting sweep ── */
.scanlines {
  position: fixed; inset: 0; z-index: 59; pointer-events: none;
  opacity: .5;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.014) 0 1px,
      transparent 1px 3px);
}
.scanlines::after {
  content: ''; position: absolute; left: 0; right: 0; height: 42vh;
  background: linear-gradient(180deg,
    transparent, rgba(56,232,255,.05) 44%, color-mix(in srgb, var(--red) 5%, transparent) 56%, transparent);
  animation: sweep 10s cubic-bezier(.45,0,.55,1) infinite;
  will-change: transform;
}
@keyframes sweep {
  0%   { transform: translateY(-45vh); }
  100% { transform: translateY(145vh); }
}

/* ── lighter texture on small screens (perf + legibility) ── */
@media (max-width: 768px) {
  .grain { opacity: .04; animation-duration: 9s; }
  .scanlines { opacity: .32; }
  .scanlines::after { display: none; }
}

/* ════════════════════════════════════════════════════════════
   ACCENTS — crimson throughout (no blue/cyan in the UI).
   ════════════════════════════════════════════════════════════ */

/* HUD readout — subtle muted-red instrument readout */
.nav__hud { color: var(--muted-2) !important; }

/* toolkit label — red, with a soft red glow */
.tags-lab { color: var(--red) !important; text-shadow: 0 0 14px color-mix(in srgb, var(--red) 30%, transparent); }

/* progress rail: red core + glow */
.rail__fill { box-shadow: 0 0 10px color-mix(in srgb, var(--neon) 70%, transparent), 0 0 22px color-mix(in srgb, var(--red) 35%, transparent); }