/* Count-up counters — see counter/counter.js */

.counter {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.05em;
    line-height: 1.1;
}

.counter .title,
.counter .suffix,
.counter .label {
    font-family: 'Kanit', sans-serif;
    font-weight: 900;
    font-style: italic;
}

.counter .title,
.counter .suffix {
    display: inline-block;
    font-size: 4.5rem;
    color: inherit;
    margin: 0;
}

/* Digits stay put instead of jittering as the value grows. */
.counter .title {
    color: var( --theme_accent, inherit );
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.counter .suffix,
.counter .label {
    color: #fff;
}

/* Optional caption: <div class="label">Members</div> after the number. */
.counter .label {
    display: block;
    flex-basis: 100%;
    font-size: 1.25rem;
    margin-top: 0.35em;
    text-align: center;
}

/* Wrap the number + label onto separate lines when a label is present. */
.counter:has( .label ) {
    flex-wrap: wrap;
}

/* Gentle fade/rise once the counter enters the viewport. */
.counter-ready {
    opacity: 0;
    transform: translateY( 12px );
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.counter-ready.counter-done {
    opacity: 1;
    transform: none;
}

@media ( max-width: 680px ) {
    .counter .title,
    .counter .suffix {
        font-size: 3rem;
    }
}

@media ( prefers-reduced-motion: reduce ) {
    .counter-ready {
        opacity: 1;
        transform: none;
        transition: none;
    }
}