/* fx.css · shader/liquid-image, the photograph ripples like water under the pointer · owner: Lizzy East · all rights reserved */

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