/* Actual new digits arrive through a clipped reel. Old digits are visual only. */
.number-motion-value {
  /* Existing hero/percentage rules size direct child spans as units. This
     temporary complete-value wrapper must retain the metric's full typography. */
  font: inherit !important;
  letter-spacing: inherit;
  margin: 0 !important;
  padding: 0;
  color: inherit;
  font-variant-numeric: tabular-nums;
}
.number-motion-glyph {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  font-variant-numeric: tabular-nums;
  clip-path: inset(0);
}
.number-motion-current {
  display: inline-block;
  font: inherit;
  color: inherit;
  font-variant-numeric: tabular-nums;
}
.number-motion-previous {
  /* Keep this empty DOM layer inline. A positioned/block DOM layer can insert
     line breaks into innerText even though its visible glyph is generated. */
  display: inline;
  pointer-events: none;
  font: inherit;
  color: inherit;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.number-motion-previous::before {
  content: attr(data-previous);
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}
body[data-motion="paused"] .number-motion-current,
body[data-motion="reduced"] .number-motion-current { transform: none !important; opacity: 1 !important; }
body[data-motion="paused"] .number-motion-previous,
body[data-motion="reduced"] .number-motion-previous { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .number-motion-current { transform: none !important; opacity: 1 !important; }
  .number-motion-previous { visibility: hidden; }
}