/* fx.css · draw/counter-ring, a ring fills to its percentage as it arrives · owner: Lizzy East · all rights reserved */

/* An SVG ring: a pale track and an arc (pathLength="1") whose own attribute
   stroke-dashoffset="0.08" is the finished amount (1 minus the share: 0.08 is 92%).
   The number in the middle is written in the page, so it is right with no script.
   Still to come with motion allowed, the arc waits empty and sweeps round to its
   amount while fx.js counts the number up beside it, once. A visually hidden
   sentence (data-fx-sr) says the figure for screen readers; the counting number
   is hidden from them. */
[data-fx~="draw/counter-ring"] [data-fx-sr] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
[data-fx~="draw/counter-ring"] [data-fx-ring] {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, var(--fx-ring-size, 11rem));
  aspect-ratio: 1;
}
[data-fx~="draw/counter-ring"] [data-fx-ring] > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  rotate: -90deg;
}
[data-fx~="draw/counter-ring"] [data-fx-ring] circle {
  fill: none;
  stroke-width: var(--fx-ring-width, 9);
}
[data-fx~="draw/counter-ring"] [data-fx-ring] circle:first-child { stroke: var(--fx-ring-track, #c7ccd8); }
[data-fx~="draw/counter-ring"] [data-fx-arc] {
  stroke: var(--fx-ring-ink, #2340ff);
  stroke-dasharray: 1;
}
[data-fx~="draw/counter-ring"] [data-fx-ring] > p {
  position: relative;
  margin: 0;
  color: var(--fx-ring-text, #111117);
  font: 400 clamp(2.4rem, 5vw, 3.2rem) / 1 var(--fx-ring-font, var(--demo-serif, Georgia, serif));
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
[data-fx~="draw/counter-ring"] [data-fx-ring] > p small { font-size: 0.5em; letter-spacing: 0; }
[data-fx~="draw/counter-ring"] [data-fx-count] { display: inline-block; text-align: right; }

html.fx-armed [data-fx~="draw/counter-ring"].is-pending [data-fx-arc] { stroke-dashoffset: 1; }
html.fx-armed [data-fx~="draw/counter-ring"].is-in [data-fx-arc] {
  transition: stroke-dashoffset var(--fx-ring-dur, calc(var(--fx-dur) * 2.2)) var(--fx-ease);
  transition-delay: calc(var(--fx-delay) + var(--fx-i) * var(--fx-stagger));
}