/* ============================================================
   WIWITV — Système d'effets "cassette"
   3 couches empilées sur tout le site :
   1) grain/bruit (canvas, voir noise.js)
   2) scanlines (dégradé répété)
   3) glitch chromatique cyan/magenta sur les titres (signature)
   ============================================================ */

/* --- Scanlines globales, fixes à l'écran --- */
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.18) 3px,
    rgba(0, 0, 0, 0) 4px
  );
  mix-blend-mode: multiply;
  opacity: 0.5;
}

/* légère vignette + teinte pour renforcer l'écran cathodique */
.crt-vignette {
  position: fixed;
  inset: 0;
  z-index: 59;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, rgba(46,242,255,0.03), rgba(255,47,158,0.03));
}

#noise-canvas {
  position: fixed;
  inset: 0;
  z-index: 58;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
}

/* --- Bandeau REC (coin haut) --- */
.rec-badge {
  position: fixed;
  top: 14px;
  right: clamp(1rem, 4vw, 2.5rem);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: var(--text-mid);
  pointer-events: none;
}
.rec-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 8px var(--danger);
  animation: rec-blink 1.6s steps(2, jump-none) infinite;
}
@keyframes rec-blink { 50% { opacity: 0.15; } }

/* ============================================================
   GLITCH CHROMATIQUE — élément signature
   Duplique le texte en deux calques cyan/magenta légèrement
   décalés (comme une image anaglyphe vue sans les lunettes),
   qui se recombinent puis "dérapent" par à-coups.
   ============================================================ */
.glitch {
  position: relative;
  display: inline-block;
  color: var(--text-hi);
  isolation: isolate;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  opacity: 0.85;
}
.glitch::before {
  color: var(--cyan);
  transform: translate(2px, 0);
  animation: glitch-shift-a 5.2s var(--ease-glitch) infinite;
}
.glitch::after {
  color: var(--magenta);
  transform: translate(-2px, 0);
  animation: glitch-shift-b 5.2s var(--ease-glitch) infinite;
}

@keyframes glitch-shift-a {
  0%, 88%, 100% { transform: translate(2px, 0); clip-path: inset(0 0 0 0); }
  89% { transform: translate(-6px, -2px); clip-path: inset(10% 0 60% 0); }
  91% { transform: translate(4px, 2px); clip-path: inset(60% 0 5% 0); }
  93% { transform: translate(-3px, 0); clip-path: inset(30% 0 40% 0); }
  95% { transform: translate(2px, -1px); clip-path: inset(0 0 0 0); }
}
@keyframes glitch-shift-b {
  0%, 88%, 100% { transform: translate(-2px, 0); clip-path: inset(0 0 0 0); }
  89% { transform: translate(6px, 1px); clip-path: inset(45% 0 20% 0); }
  91% { transform: translate(-5px, -2px); clip-path: inset(5% 0 70% 0); }
  93% { transform: translate(3px, 1px); clip-path: inset(65% 0 10% 0); }
  95% { transform: translate(-2px, 0); clip-path: inset(0 0 0 0); }
}

/* variante déclenchée au survol (liens de nav, boutons) */
.glitch-hover {
  position: relative;
  isolation: isolate;
}
.glitch-hover::before,
.glitch-hover::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}
.glitch-hover:hover::before,
.glitch-hover:focus-visible::before { color: var(--cyan); opacity: 0.9; transform: translate(2px, 0); transition: none; }
.glitch-hover:hover::after,
.glitch-hover:focus-visible::after { color: var(--magenta); opacity: 0.9; transform: translate(-2px, 0); transition: none; }

/* --- Bordure "cassette" en double-trait décalé --- */
.tape-frame {
  position: relative;
  border: var(--border);
}
.tape-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--cyan);
  opacity: 0.35;
  transform: translate(3px, 3px);
  pointer-events: none;
}
.tape-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--magenta);
  opacity: 0.35;
  transform: translate(-3px, -3px);
  pointer-events: none;
}

/* --- Barre de tracking (déformation horizontale ponctuelle) --- */
@keyframes tracking-jump {
  0%, 96%, 100% { transform: translate(0, 0); }
  97% { transform: translate(-6px, 0); }
  98% { transform: translate(5px, 0); }
  99% { transform: translate(-2px, 0); }
}
.tracking { animation: tracking-jump 9s linear infinite; }