/* ==========================================================================
   Count up
   ==========================================================================
   The odometer reel. Structure is built by js/count-up.js; this is only the
   geometry that makes a column show one glyph at a time.

   Sizing comes from whatever the number sits inside, so a reel inherits the
   stat's 48px or the marquee tile's smaller size with no extra rules.
   ========================================================================== */

/* Plain inline until the reel exists. The measured height that sizes every
   column is taken from this element BEFORE it is built, and an inline box and
   an inline-flex box do not measure the same: the first reports the font's
   own metrics, the second reports the line box. Applying the flex display up
   front changes the reel height and shortens the whole card. */
.count-up[data-built="true"] {
  display: inline-flex;
  align-items: center;
}

/* Zero-width text anchor. Every column is an overflow-hidden inline-block
   whose baseline is its bottom edge, so without a real text item first the
   number hangs low and drags baseline-aligned labels down with it. */
.count-up__anchor { width: 0; }

.count-up__reel {
  display: inline-flex;
  align-items: center;
  white-space: pre;
  /* Tabular figures, or the columns jitter as digits change width. */
  font-variant-numeric: tabular-nums;
}

.count-up__column {
  position: relative;
  display: inline-block;
  width: 1ch;
  overflow: hidden;
  vertical-align: top;
  transition: opacity 200ms ease;
}

.count-up__strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
}

.count-up__glyph {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .count-up__column { transition: none; }
}