/* fx.css · shader/ripple, a click or tap sends rings of ripples across the photograph · owner: Lizzy East · all rights reserved */

/* The canvas steps in only while the rings run, over the photograph in the same
   crop, and steps aside when they fade. Without script or WebGL, and with motion
   off, the photograph simply sits there. */
[data-fx~="shader/ripple"] { position: relative; isolation: isolate; overflow: clip; }
[data-fx~="shader/ripple"] > img { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-fx~="shader/ripple"] > canvas[data-fx-ambient] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}
[data-fx~="shader/ripple"] > canvas[data-fx-on] { opacity: 1; }
[data-fx~="shader/ripple"] > [data-fx-pause] { position: absolute; right: clamp(0.75rem, 2vw, 1.25rem); bottom: clamp(0.75rem, 2vw, 1.25rem); z-index: 1; }