/* fx.css · shader/glass, blobs of frosted glass gliding over the photograph, drawn on the graphics card · owner: Lizzy East · all rights reserved */

/* The glass is drawn over the photograph, in the same crop. Without script or WebGL
   the photograph simply shows; with motion off, one still frame of the glass. */
[data-fx~="shader/glass"] { position: relative; isolation: isolate; overflow: clip; }
[data-fx~="shader/glass"] > img { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-fx~="shader/glass"] > canvas[data-fx-ambient] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}
[data-fx~="shader/glass"] > canvas[data-fx-on] { opacity: 1; }
html.fx-armed [data-fx~="shader/glass"] > canvas[data-fx-ambient] { transition: opacity 900ms var(--fx-ease); }
[data-fx~="shader/glass"] > [data-fx-pause] { position: absolute; right: clamp(0.75rem, 2vw, 1.25rem); bottom: clamp(0.75rem, 2vw, 1.25rem); z-index: 1; }