/* fx.css · story/odometer, numbers roll into place digit by digit · owner: Lizzy East · all rights reserved */

/* The number as written is the finished look. fx.js turns a number still to come into
   one column of 0-9 per digit (hidden from screen readers, which read the number whole
   from a visually hidden copy); each column waits at 0, then rolls to its digit when
   the block arrives. Tabular figures and a one-line box in every state, so splitting
   never changes the number's width or height. */
[data-fx~="story/odometer"] [data-fx-odometer] {
  position: relative;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
[data-fx~="story/odometer"] .fx-odo-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
[data-fx~="story/odometer"] .fx-odo-col { display: inline-block; height: 1em; overflow: clip; vertical-align: top; }
[data-fx~="story/odometer"] .fx-odo-reel { display: block; translate: 0 calc(var(--fx-n, 0) * -10%); }
[data-fx~="story/odometer"] .fx-odo-reel > span { display: block; height: 1em; }
html.fx-armed [data-fx~="story/odometer"].is-pending .fx-odo-reel { translate: 0 0; }
html.fx-armed [data-fx~="story/odometer"].is-in .fx-odo-reel {
  transition: translate var(--fx-odo-dur, 1400ms) cubic-bezier(0.16, 0.8, 0.2, 1);
  transition-delay: var(--fx-d, 0ms);
}