/* fx.css · reveal/pixelate, the photograph resolves from coarse to sharp · owner: Lizzy East · all rights reserved */

/* Put it on the frame around a photograph (the frame clips). Waiting, the picture
   is heavily softened and a touch large; arriving, it sharpens in six hard steps,
   like an image loading in passes, and settles to its size. */
[data-fx~="reveal/pixelate"] { overflow: clip; }
html.fx-armed [data-fx~="reveal/pixelate"].is-pending img {
  filter: blur(var(--fx-pixel-blur, 14px));
  scale: var(--fx-reveal-scale, 1.06);
}
html.fx-armed [data-fx~="reveal/pixelate"].is-in img {
  transition: filter var(--fx-reveal-dur, 960ms) steps(6, end), scale var(--fx-reveal-dur, 960ms) steps(6, end);
  transition-delay: calc(var(--fx-delay, 0ms) + var(--fx-i, 0) * var(--fx-stagger));
}