/* webgl-distortion.css — Phase 4 WebGL canvas overlay styles */

/* Container must be a positioning context — JS appends canvas inside. */
[data-webgl-distort] {
  position: relative;
}

/* Canvas overlay — fills container exactly, sits above source image.
   pointer-events:none so the original element (link, button) stays interactive.
   display:none by default — JS adds .webgl-distort-active to container on success,
   which reveals the canvas and hides the source img (img is now the WebGL texture). */
.webgl-distort-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: none;
  /* Crisp pixel output — no browser upscaling blur on the canvas element itself.
     The WebGL framebuffer is already DPR-scaled via canvas.width/height in JS. */
  image-rendering: pixelated;
}

/* Active state — container confirmed WebGL init success.
   Show canvas, suppress source img to avoid double-render. */
[data-webgl-distort].webgl-distort-active .webgl-distort-canvas {
  display: block;
}

[data-webgl-distort].webgl-distort-active > img,
[data-webgl-distort].webgl-distort-active .webgl-distort-source {
  visibility: hidden;
}

/* Reduced-motion / mobile / narrow viewport — canvas is never created by JS,
   but belt-and-suspenders rule keeps source img visible if state somehow leaks. */
@media (prefers-reduced-motion: reduce) {
  [data-webgl-distort].webgl-distort-active > img,
  [data-webgl-distort].webgl-distort-active .webgl-distort-source {
    visibility: visible;
  }
  .webgl-distort-canvas { display: none !important; }
}

@media (pointer: coarse), (max-width: 767px) {
  [data-webgl-distort].webgl-distort-active > img,
  [data-webgl-distort].webgl-distort-active .webgl-distort-source {
    visibility: visible;
  }
  .webgl-distort-canvas { display: none !important; }
}