/* Alignment fallbacks */
.wp-block-c2-rolling-numbers.has-text-align-left { text-align: left; }
.wp-block-c2-rolling-numbers.has-text-align-center { text-align: center; }
.wp-block-c2-rolling-numbers.has-text-align-right { text-align: right; }

/* Hide template (JS source) */
.wp-block-c2-rolling-numbers.c2rn .c2rn__template { display: none; }
.wp-block-c2-rolling-numbers.c2rn .c2rn__display { display: inline; }

/* --- Initial server placeholder (pre-JS) --- */
.wp-block-c2-rolling-numbers.c2rn .c2rn__phch{
  display: inline-block;
  vertical-align: baseline;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.wp-block-c2-rolling-numbers.c2rn .c2rn__ph-digit{
  width: 1ch;
}
.wp-block-c2-rolling-numbers.c2rn .c2rn__ph-nondigit{
  opacity: 0; /* invisible, but reserves width/baseline */
}
.wp-block-c2-rolling-numbers.c2rn .c2rn__phspace{
  display: inline-block;
}

/* --- Rolling slots (post-JS) --- */
.wp-block-c2-rolling-numbers.c2rn .c2rn__slot{
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: baseline;
  font-variant-numeric: tabular-nums;
  height: 1em;
}

.wp-block-c2-rolling-numbers.c2rn .c2rn__measure{
  visibility: hidden; /* defines width + baseline */
  display: inline-block;
  height: 1em;
  line-height: 1em;
}

.wp-block-c2-rolling-numbers.c2rn .c2rn__strip{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.wp-block-c2-rolling-numbers.c2rn .c2rn__row{
  display: block;
  width: 100%;
  height: 1em;
  line-height: 1em;
  text-align: center;
}

/* Use 1lh when supported so it matches paragraph line-height exactly */
@supports (height: 1lh) {
  .wp-block-c2-rolling-numbers.c2rn .c2rn__slot{ height: 1lh; }
  .wp-block-c2-rolling-numbers.c2rn .c2rn__measure,
  .wp-block-c2-rolling-numbers.c2rn .c2rn__row{
    height: 1lh;
    line-height: 1lh;
  }
}

/* The actual roll */
.wp-block-c2-rolling-numbers.c2rn.is-animating .c2rn__strip{
  transition: transform var(--duration, 1400ms) cubic-bezier(.16, 1, .3, 1);
  transform: translate3d(0, calc(var(--target) * -1em), 0);
}
@supports (height: 1lh) {
  .wp-block-c2-rolling-numbers.c2rn.is-animating .c2rn__strip{
    transform: translate3d(0, calc(var(--target) * -1lh), 0);
  }
}

/* --- Key change: non-digit slots are invisible while rolling --- */
/* Hide ALL rows (digits) in non-digit slots */
.wp-block-c2-rolling-numbers.c2rn .c2rn__is-nondigit .c2rn__row{
  opacity: 0;
}
/* But allow the final row container itself to be "visible" (glyph still hidden) */
.wp-block-c2-rolling-numbers.c2rn .c2rn__is-nondigit .c2rn__finalrow{
  opacity: 1;
}

/* Final glyph appears only after animation completes */
.wp-block-c2-rolling-numbers.c2rn .c2rn__finalglyph{
  opacity: 0;
  transition: opacity 250ms ease;
}
.wp-block-c2-rolling-numbers.c2rn.is-revealed .c2rn__finalglyph{
  opacity: 1;
}