/**
 * Das Zählwerk — Stilregeln zur Signaturbewegung (Phase 1b, Schritt 4).
 *
 * ============================================================================
 * NOCH NICHT LIVE. Diese Datei lädt nur das Vorschau-Skript
 * (scripts/leaderboard-preview.mjs über `v2PageStyles`). Die echte Startseite
 * lädt sie nicht — dort ändert sich vorerst nichts.
 * ============================================================================
 *
 * Sie gehört zu public/js/zaehlwerk.js: Das Skript kapselt jede Ziffer in
 * `.zw-stelle`, hier bekommt sie ihre Bewegung.
 *
 * WARUM DIE ZIFFERN GLEICH BREIT SEIN MÜSSEN
 *
 * Ohne `tabular-nums` ist eine „1" schmaler als eine „8". Beim Rollen würde
 * die Zahl dann bei jedem Zwischenschritt ihre Breite ändern und der Text
 * daneben zappeln — aus einer ruhigen Bewegung würde ein Wackeln. JetBrains
 * Mono liefert beides und ist bereits installiert.
 */

@import url('/css/tokens.css');

[data-zaehlwerk] {
    font-family: var(--jt-schrift-zahl);
    font-variant-numeric: tabular-nums;
    /* Sonst schneidet die überschwingende Ziffer oben und unten ab. */
    display: inline-block;
}

/**
 * Zahl und Einheit bleiben zusammen.
 *
 * Das Skript legt diese Gruppe um jedes „Zahl + Einheit"-Paar und lässt nur
 * dort eine Fuge, wo eine neue Zahl beginnt. Ohne `nowrap` trennt der Browser
 * zwischen den Ziffernkapseln — sie sind `inline-block` und damit jede für
 * sich eine Bruchgelegenheit —, und „152 Std. 29 Min." bricht als
 * „152 Std. 29" / „Min." um.
 */
.zw-gruppe {
    white-space: nowrap;
}

.zw-stelle {
    display: inline-block;
    /* Das Fenster, durch das die Walze läuft. Die Höhe muss zur Zeilenhöhe
       passen, sonst ist die Ziffer beim Stillstand angeschnitten. */
    overflow: hidden;
    height: 1.15em;
    line-height: 1.15em;
    vertical-align: bottom;
}

.zw-stelle > span {
    display: block;
}

/**
 * Der Walzenstopp.
 *
 * Die Verzögerung wächst von links nach rechts (`--zw-i` setzt das Skript je
 * Stelle). So kommen die grossen Stellen zuerst zur Ruhe und die kleinste
 * zuletzt — wie an einem mechanischen Zählwerk, dessen rechtes Rad am
 * schnellsten läuft.
 *
 * 45 ms je Stelle: Bei „155 Std. 58 Min." sind das rund 0,2 Sekunden vom
 * ersten bis zum letzten Rad. Mehr wirkt zäh, weniger nimmt der Bewegung ihre
 * Richtung.
 */
.zw-rollt .zw-stelle > span {
    animation: jt-zaehlwerk var(--jt-zeit-lang) var(--jt-kurve) both;
    animation-delay: calc(var(--zw-i, 0) * 45ms);
}

/**
 * Ohne Bewegung: nur die Zahl.
 *
 * Das Skript setzt `.zw-rollt` gar nicht erst, wenn `prefers-reduced-motion`
 * gilt. Diese Regel ist der zweite Riegel — falls die Klasse doch einmal
 * gesetzt wird, etwa weil jemand sie später von Hand vergibt.
 */
@media (prefers-reduced-motion: reduce) {
    .zw-rollt .zw-stelle > span { animation: none; }
}