/* fx.css · reveal/blinds, the photograph appears through opening blinds · owner: Lizzy East · all rights reserved */

/* Put it on the frame around a photograph. One clip-path traces six horizontal
   strips; waiting, each strip is closed to a line through its middle, and arriving,
   every strip opens to full height at once, like slats turning. The two polygons
   list the same 24 points in the same order, so they blend smoothly (the open
   strips overlap by a hair so no seam can show). Only the photograph moves. */
[data-fx~="reveal/blinds"] { overflow: clip; }
html.fx-armed [data-fx~="reveal/blinds"].is-pending img {
  clip-path: polygon(
    0 8.333%, 100% 8.333%, 100% 8.333%, 0 8.333%,
    0 25%, 100% 25%, 100% 25%, 0 25%,
    0 41.667%, 100% 41.667%, 100% 41.667%, 0 41.667%,
    0 58.333%, 100% 58.333%, 100% 58.333%, 0 58.333%,
    0 75%, 100% 75%, 100% 75%, 0 75%,
    0 91.667%, 100% 91.667%, 100% 91.667%, 0 91.667%
  );
}
html.fx-armed [data-fx~="reveal/blinds"].is-in img {
  clip-path: polygon(
    0 0, 100% 0, 100% 17%, 0 17%,
    0 16.333%, 100% 16.333%, 100% 34%, 0 34%,
    0 33%, 100% 33%, 100% 50.5%, 0 50.5%,
    0 49.667%, 100% 49.667%, 100% 67%, 0 67%,
    0 66.333%, 100% 66.333%, 100% 83.667%, 0 83.667%,
    0 83%, 100% 83%, 100% 100%, 0 100%
  );
  transition: clip-path var(--fx-reveal-dur, 1100ms) var(--fx-reveal-ease, cubic-bezier(0.65, 0, 0.35, 1));
  transition-delay: calc(var(--fx-delay, 0ms) + var(--fx-i, 0) * var(--fx-stagger));
}