/* fx.css · reveal/curtain, the photograph is uncovered from one side · owner: Lizzy East · all rights reserved */

/* Put it on the frame around a photograph. Waiting, the photograph is clipped
   away to one edge and held a touch large; arriving, the curtain draws back and the
   picture settles to its size. data-fx-from="right" (or "top", "bottom") draws it
   from another side. Only the photograph moves: captions and text never hide. */
[data-fx~="reveal/curtain"] { overflow: clip; }
html.fx-armed [data-fx~="reveal/curtain"].is-pending img {
  clip-path: inset(0 100% 0 0);
  scale: var(--fx-reveal-scale, 1.12);
}
html.fx-armed [data-fx~="reveal/curtain"][data-fx-from="right"].is-pending img { clip-path: inset(0 0 0 100%); }
html.fx-armed [data-fx~="reveal/curtain"][data-fx-from="top"].is-pending img { clip-path: inset(0 0 100% 0); }
html.fx-armed [data-fx~="reveal/curtain"][data-fx-from="bottom"].is-pending img { clip-path: inset(100% 0 0 0); }
html.fx-armed [data-fx~="reveal/curtain"].is-in img {
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--fx-reveal-dur, 1200ms) var(--fx-reveal-ease, cubic-bezier(0.77, 0, 0.18, 1)), scale calc(var(--fx-reveal-dur, 1200ms) * 1.4) var(--fx-ease);
  transition-delay: calc(var(--fx-delay, 0ms) + var(--fx-i, 0) * var(--fx-stagger));
}