/* fx.css · draw/icon-animate, line icons redraw themselves on hover or focus · owner: Lizzy East · all rights reserved */

/* Give every stroked shape in the icon pathLength="1". At rest each icon is simply
   drawn. When its card is pointed at, or reached with the keyboard, the lines
   rub out and draw themselves again, one stroke after another, once per visit.
   Only on a mouse-like pointer for hover; focus-visible gets the same everywhere;
   with motion off the icons just sit there, drawn. Decorative: aria-hidden. */
[data-fx~="draw/icon-animate"] svg :is(path, line, polyline, polygon, circle, rect, ellipse) {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
[data-fx~="draw/icon-animate"] svg :is(path, line, polyline, polygon, circle, rect, ellipse):nth-child(2) { --fx-i: 1; }
[data-fx~="draw/icon-animate"] svg :is(path, line, polyline, polygon, circle, rect, ellipse):nth-child(3) { --fx-i: 2; }
[data-fx~="draw/icon-animate"] svg :is(path, line, polyline, polygon, circle, rect, ellipse):nth-child(4) { --fx-i: 3; }
[data-fx~="draw/icon-animate"] svg :is(path, line, polyline, polygon, circle, rect, ellipse):nth-child(5) { --fx-i: 4; }
[data-fx~="draw/icon-animate"] svg :is(path, line, polyline, polygon, circle, rect, ellipse):nth-child(6) { --fx-i: 5; }
[data-fx~="draw/icon-animate"] svg :is(path, line, polyline, polygon, circle, rect, ellipse):nth-child(7) { --fx-i: 6; }
[data-fx~="draw/icon-animate"] svg :is(path, line, polyline, polygon, circle, rect, ellipse):nth-child(8) { --fx-i: 7; }

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  [data-fx~="draw/icon-animate"]:hover svg :is(path, line, polyline, polygon, circle, rect, ellipse) {
    animation: fx-icon-draw var(--fx-icon-dur, 900ms) var(--fx-ease) both;
    animation-delay: calc(var(--fx-i) * var(--fx-icon-stagger, 140ms));
  }
}
@media (prefers-reduced-motion: no-preference) {
  [data-fx~="draw/icon-animate"]:focus-visible svg :is(path, line, polyline, polygon, circle, rect, ellipse) {
    animation: fx-icon-draw var(--fx-icon-dur, 900ms) var(--fx-ease) both;
    animation-delay: calc(var(--fx-i) * var(--fx-icon-stagger, 140ms));
  }
}
@keyframes fx-icon-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}