/**
 * Trust bar count-up states.
 *
 * The bar's own layout and typography live in style.css; this file is only the
 * animation, so it can be loaded alongside js/trust-bar.js and nowhere else.
 *
 * `.trust-bar--armed` is added BY JAVASCRIPT, never by the template. That is
 * the whole safety net: if the script fails to load, no rule here matches and
 * the figures in the markup stay on screen. Hiding them in CSS and revealing
 * them with JS would leave a blank row on any failure.
 */

.trust-bar--armed .trust-stat-num {
    opacity: 0;
    /* Held slightly low so the fade reads as arriving rather than blinking. */
    transform: translateY(6px);
}

.trust-bar--armed.is-visible .trust-stat-num {
    opacity: 1;
    transform: none;
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* The label sits still — only the figure animates, so the row keeps its shape
   and nothing reflows around it. */
.trust-bar--armed .trust-stat-label {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .trust-bar--armed .trust-stat-num,
    .trust-bar--armed.is-visible .trust-stat-num {
        opacity: 1;
        transform: none;
        transition: none;
    }
}