/* Stat reel — "Spinning counter" (port av transitions.dev) för siffrorna i
   Brokk Around The World. Hakas på klassen .stat-reel, som sätts i elementets
   CSS-klassfält i byggaren och bär ingen egen stil.

   En klippt kolumn per siffra med en 0–9-remsa som translateras uppåt N celler
   och landar på målsiffran. Cellen är 1lh — exakt textens radbox — så
   siffran hamnar där den stod och kortet ändrar inte höjd. Typografin ärvs
   från elementet. Rullen är aria-hidden; talet ligger kvar som skärmläsartext. */

.t-reel {
    --reel-ease: cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: flex-start;
    height: 1lh;
    font-variant-numeric: tabular-nums;
    vertical-align: top;
}

.t-reel__col {
    position: relative;
    width: 1ch;
    height: 1lh;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.t-reel__strip {
    display: flex;
    flex-direction: column;
    will-change: transform, filter;
}

.t-reel__digit,
.t-reel__sep {
    height: 1lh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.t-reel__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .t-reel__strip {
        transition: none !important;
        filter: none !important;
    }
}