/* fx.css · tools/self-draw, lines draw themselves in · owner: Lizzy East · all rights reserved */

/* Give every shape pathLength="1". Drawn already unless it is still to come with
   motion allowed; then it draws once as it arrives. Decorative: aria-hidden. */
[data-fx~="tools/self-draw"] :is(path, line, polyline, polygon, circle, rect, ellipse) {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
html.fx-armed [data-fx~="tools/self-draw"].is-pending :is(path, line, polyline, polygon, circle, rect, ellipse) {
  stroke-dashoffset: 1;
}
html.fx-armed [data-fx~="tools/self-draw"].is-in :is(path, line, polyline, polygon, circle, rect, ellipse) {
  transition: stroke-dashoffset var(--fx-draw-dur, 1400ms) var(--fx-ease);
  transition-delay: calc(var(--fx-delay, 0ms) + var(--fx-i, 0) * var(--fx-stagger));
}