/* ============================================================
   Screen glitch overlay — reusable, dependency-free.
   Pairs with glitch.js (createGlitch). Works on any page.

   Datamosh look: a field of small rectangular "chips" (macroblocks)
   that cluster into parts of the screen, displace, and smear like
   corrupted motion vectors. Chips can freely overlap.

   Brand palette (chip tints):
     Ice Blue   #528fa3   (a — overlay blend)
     Beast Gray #d1d1d1   (b — difference flash)
     Black      #10090b   (c — multiply, dark blocks)
   ============================================================ */

.glitch-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: var(--glitch-z, 9999);

  /* per-burst state, driven from JS */
  --glitch-on: 0; /* 0 idle, 1 active — gates all chips */
  --glitch-i: 1;  /* intensity scalar */
}

/* ---------- a single macroblock chip ---------- */
.glitch-overlay .glitch-chip {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  /* --chip-a set per-flicker; gated by the global on-switch */
  opacity: calc(var(--chip-a, 0) * var(--glitch-on));
  will-change: transform, opacity, width, height;
}

/* tint variants */
.glitch-overlay .glitch-chip.a {
  background: rgba(82, 143, 163, 0.55); /* Ice Blue */
  mix-blend-mode: overlay;
}
.glitch-overlay .glitch-chip.b {
  background: rgba(209, 209, 209, 0.8); /* Beast Gray */
  mix-blend-mode: difference;
}
.glitch-overlay .glitch-chip.c {
  background: rgba(16, 9, 11, 0.72); /* Black */
  mix-blend-mode: multiply;
}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .glitch-overlay.glitch-respect-rm {
    display: none;
  }
}