/* WebGL picture glitch (public/js/glitch.js). The canvas sits over the <img>, under .thumb-shade (z 2)
   and the frame (z 3). The img stays in the DOM for alt text; it is only made transparent once
   the first WebGL frame has rendered. */
.glitch-canvas {
  position: absolute; left: 0; top: 0; z-index: 1;
  display: block; pointer-events: none;
  opacity: 0;
}
.glitch-canvas.is-live { opacity: 1; }
.glitch-canvas.glitch-backdrop { z-index: auto; width: 100%; height: 100%; }
img.glitch-covered { opacity: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .glitch-canvas { display: none; }
  img.glitch-covered { opacity: 1 !important; }
}