/**
 * Visual layer for the [mp_odometer] shortcode (functions/shortcode-
 * odometer.php) — a reusable version of the digit roll-up effect first
 * built one-off for the Mespack Calculator plugin (wp-content/plugins/
 * mespack-calculator/{css/styles.css,js/scripts.js}, live on
 * /athena/calculate-your-benefits/). Client request 2026-10-14: reuse
 * that same effect anywhere a single highlighted figure needs to appear
 * in ordinary page content, not just inside that calculator.
 *
 * Class names are `.oc-odometer*`, NOT `.mp-odometer*` like the plugin —
 * deliberately, after that exact collision broke this in testing: the
 * calculator plugin enqueues its own `.mp-odometer-strip` globally, with
 * no page check, so with matching class names whichever of the two
 * stylesheets happens to print later in <head> silently wins the
 * cascade for every shared rule (confirmed: the plugin's was printing
 * second, so its old 0.7s/cubic-bezier transition was overriding this
 * file's, no matter what was changed here). Two independently-deployed
 * codebases reusing the same class name was the actual bug, not a
 * tuning problem — renaming removes the collision instead of depending
 * on load order, which could flip again on any future plugin change.
 *
 * Color and typography are fixed, not configurable per use — client
 * request: "en color dark blue amb el cos de tipografia igual que
 * .mp-odometer-num", i.e. reproduce the calculator's own effective
 * computed style for its digits (mespack-calculator/css/styles.css's
 * `.results div.value`: 40px/700/--color-blue-dark) as this component's
 * one fixed look. Font family is a deliberate departure from that
 * source, though: the calculator inherits plain `--font-aktiv-grotesk`,
 * but the client asked specifically for `--font-aktiv-grotesk-extended`
 * on these numbers (2026-10-14).
 */
.oc-odometer {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-aktiv-grotesk-extended);
  font-weight: 700;
  font-size: 2.5rem; /* 40px */
  line-height: 1;
  color: var(--color-blue-dark);
  font-variant-numeric: tabular-nums;
}

.oc-odometer-digit {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  vertical-align: bottom;
}

.oc-odometer-strip {
  display: block;
  /* Client feedback 2026-10-14: the original 0.7s + the calculator
     plugin's cubic-bezier(0.22, 1, 0.36, 1) (copied from there
     initially) read as too quick/subtle for a single standalone
     figure — and measuring it confirmed why: that curve's control
     points both sit at y=1, so it resolves ~95% of the visual motion
     in the first ~15% of the duration regardless of how long the
     duration is, then crawls imperceptibly for the rest. Longer
     duration alone wouldn't have fixed that. `ease-in-out` spreads the
     motion evenly across the full 2s instead, paired with the pre-roll
     pause in odometer.js's START_DELAY_MS. */
  transition: transform 2s ease-in-out;
}

.oc-odometer-num {
  display: block;
  height: 1em;
  line-height: 1;
  text-align: center;
}

/**
 * Any non-digit character in the shortcode's value (".", "%", "€", a
 * space, "+"...) renders as a plain static span instead of a rolling
 * reel — see odometer.js's buildStructure(). A small side margin keeps
 * it from crowding the digit reels either side of it, same as the
 * calculator's own `.mp-odometer-sep` (there limited to ".").
 */
.oc-odometer-sep {
  display: inline-block;
  margin: 0 0.02em;
}