/* Odhalení výsledku: celá choreografie je CSS časová osa (UX §5). Žádný Task.Delay, žádné StateHasChanged po krocích.
   Výchozí styl prvků = FINÁLNÍ stav. Animace („jen from“) se zapnou třídou .rv--live; .rv--skip je zkrátí na nulu.
   Časová osa (ms): 0 napětí | 1500 roztočení | 3700 zásah | 4500 osa | 5300 tipy | 8300 vítěz | 9300 pořadí | 10800 zajímavost. */

.tt-rv {
    --t-reel: 1500ms;
    --t-hit: 3700ms;
    --t-axis: 4500ms;
    --t-mark: 5300ms;
    --t-win: 8300ms;
    --t-rank: 9300ms;
    --t-fact: 10800ms;
    --mk-step: 350ms;
}

/* ---------- DigitReel ---------- */
.tt-reel {
    display: inline-block;
    width: 1ch;
    height: 1em;
    line-height: 1;
    overflow: hidden;
    text-align: center;
    vertical-align: top;
}

/* Za \A musí být mezera, jinak by \A1 byl znak U+00A1. Pás má dvě sady číslic, aby se dalo „točit“ dopředu. */
.tt-reel::before {
    content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";
    white-space: pre;
    display: block;
    transform: translateY(calc((var(--d) + 10) * -1em));
}

.tt-reel-sep { display: inline-block; text-align: center; }

/* ---------- živá časová osa ---------- */
.rv--live .rv-lead { animation: tt-fade-in .5s both; }
.rv--live .rv-dots { display: inline-flex; }
.rv--live .rv-value { animation: tt-fade-in .25s var(--t-reel) both; }

.rv--live .tt-reel::before {
    animation: tt-reel 1.3s var(--ease-out) both;
    animation-delay: calc(var(--t-reel) + var(--i) * var(--step, 150ms));
}

.rv--live .rv-value-bounce { animation: tt-bounce .6s var(--ease-pop) var(--t-hit) both; }
.rv--live .rv-hit { animation: tt-stamp .6s var(--ease-pop) var(--t-hit) both; }
.rv--live .rv-confetti > i { animation: tt-confetti 1.5s ease-out calc(var(--t-hit) + var(--cd, 0ms)) both; }
.rv--live .rv-axis { animation: tt-slide-up .5s var(--ease-out) var(--t-axis) both; }
.rv--live .rv-correct { animation: tt-drop .55s var(--ease-pop) calc(var(--t-axis) + 250ms) both; }

.rv--live .rv-marker {
    animation: tt-marker-in .5s var(--ease-pop) calc(var(--t-mark) + var(--k) * var(--mk-step)) both;
}

.rv--live .rv-marker.is-winner .tt-marker__inner { animation: tt-winner .7s var(--ease-pop) var(--t-win) both; }
.rv--live .rv-marker.is-winner .tt-marker__crown { animation: tt-pop-in .5s var(--ease-pop) var(--t-win) both; }
.rv--live .rv-marker.is-winner .tt-marker__ring { animation: tt-ring 1.1s ease-out var(--t-win) 2 both; }
.rv--live .rv-marker.is-winner .tt-marker__link { animation: tt-fade-in .5s var(--t-win) both; }

.rv--live .rv-row {
    animation: tt-slide-up .4s var(--ease-out) calc(var(--t-rank) + var(--ri) * 120ms) both;
}

.rv--live .rv-pts {
    animation: tt-pop-in .4s var(--ease-pop) calc(var(--t-rank) + var(--ri) * 120ms + 280ms) both;
}

.rv--live .rv-fact { animation: tt-slide-up .55s var(--ease-out) var(--t-fact) both; }
.rv--live .rv-comments { animation: tt-fade-in .5s var(--t-rank) both; }

/* Přeskočit: všechno hned do finálního stavu (animation-fill-mode: both). */
.rv--skip *, .rv--skip *::before, .rv--skip *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
}

/* Konfety a tlačítko přeskočení (jen živý režim, konfety pryč při reduced motion). */
.rv-confetti { display: none; position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.rv--live .rv-confetti { display: var(--fx-display); }
.rv-confetti > i {
    position: absolute;
    left: 50%;
    top: 55%;
    width: 9px;
    height: 14px;
    border-radius: 2px;
    background: hsl(var(--h) 95% 60%);
    border: 2px solid var(--c-ink);
    opacity: 0;
}

.rv-skip { display: none; }
.rv--live .rv-skip { display: inline-flex; animation: tt-hide 0s linear 11s forwards; }

/* „A správná odpověď je…“: tři tečky se vidí jen při živé animaci a zmizí s odhalením (hned po roztočení). */
.rv-dots { display: none; gap: 3px; margin-left: 4px; vertical-align: baseline; }
.rv-dots i { width: 6px; height: 6px; margin-top: .75em; border-radius: 50%; background: currentColor; animation: tt-dots 1.2s infinite; }
.rv-dots i:nth-child(2) { animation-delay: .2s; }
.rv-dots i:nth-child(3) { animation-delay: .4s; }
.rv--live .rv-dots { display: inline-flex; animation: tt-hide 0s linear var(--t-hit) forwards; }

/* Podium (Finished): stupně rostou 3. → 2. → 1., korunka dopadne. */
.fin--live .tt-step { animation: tt-grow .6s var(--ease-pop) calc((3 - var(--place)) * 450ms) both; }
.fin--live .tt-step__who { animation: tt-slide-up .5s var(--ease-out) calc((3 - var(--place)) * 450ms + 350ms) both; }
.fin--live .tt-step__crown { animation: tt-drop .6s var(--ease-pop) 1.5s both; }
.fin--live .rv-confetti { display: var(--fx-display); }
.fin--live .rv-confetti > i { animation: tt-confetti 1.8s ease-out calc(1.5s + var(--cd, 0ms)) both; }