/* Numeric and bar motion share the same animation frame and upstream target. */
#result-progress-text { font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }
#result-progress-bar { position: relative; overflow: hidden; transition: none; }
.redeem-progress-stage { margin: -2px 0 12px; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.redeem-progress-wait { margin: 10px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.6; }
.check-progress-wait { margin: 12px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.6; }
#preflight-progress .check-progress-steps li.active::before {
  width: 12px;
  height: 12px;
  top: .3em;
  border: 2px solid rgba(48, 111, 241, .2);
  border-top-color: var(--primary);
  background: transparent;
  box-shadow: none;
  animation: cdk-preflight-spin .8s linear infinite;
}
#preflight-progress .check-progress-steps li.active:nth-child(3)::before { animation-delay: -.3s; }
@keyframes cdk-preflight-spin { to { transform: rotate(360deg); } }
#result-progress.is-waiting .redeem-progress-track { animation: cdk-progress-wait 1.5s ease-in-out infinite; }
#result-progress.is-moving #result-progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 15%, rgba(255,255,255,.55) 50%, transparent 85%);
  transform: translateX(-100%);
  animation: cdk-progress-shine 1.5s linear infinite;
}
/* Keep the final animated approach to 100 visible on the success card. */
#recharge-result.is-completed #result-progress:not([hidden]) { display: block; }
@keyframes cdk-progress-shine { to { transform: translateX(100%); } }
@keyframes cdk-progress-wait { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  #preflight-progress .check-progress-steps li.active::before { animation: none; }
  #result-progress.is-moving #result-progress-bar::after { animation: none; display: none; }
  #result-progress.is-waiting .redeem-progress-track { animation: none; }
}