/* Všechny sdílené @keyframes jsou tady (CSS isolation by je přepsala na scoped názvy). Komponenty je jen používají.
   Konvence: keyframes jen s „from“ končí ve výchozím (finálním) stylu prvku, takže statický stav = konec animace. */

@property --t {
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}

@keyframes tt-pop {
    0% { transform: scale(.5); opacity: 0; }
    60% { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes tt-pop-in {
    from { transform: scale(.6); opacity: 0; }
}

@keyframes tt-fade-in {
    from { opacity: 0; }
}

@keyframes tt-slide-up {
    from { transform: translateY(18px); opacity: 0; }
}

@keyframes tt-slide-down {
    from { transform: translateY(-120%); opacity: 0; }
}

@keyframes tt-sheet-up {
    from { transform: translateY(100%); }
}

@keyframes tt-bob {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-6px) rotate(2deg); }
}

@keyframes tt-wobble {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(-2deg) translateY(-2px); }
}

@keyframes tt-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
}

@keyframes tt-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.14); }
}

@keyframes tt-pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}

@keyframes tt-spin {
    to { transform: rotate(360deg); }
}

@keyframes tt-dots {
    0%, 60%, 100% { opacity: .25; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

@keyframes tt-drift {
    from { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)); }
    to { transform: translate3d(var(--dx, 12px), var(--dy, -24px), 0) rotate(calc(var(--rot, 0deg) + 6deg)); }
}

@keyframes tt-stamp {
    0% { transform: scale(2.2) rotate(-18deg); opacity: 0; }
    60% { transform: scale(.9) rotate(4deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes tt-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 201, 51, .75); }
    50% { box-shadow: 0 0 0 12px rgba(255, 201, 51, 0); }
}

@keyframes tt-intro-digit {
    0% { transform: scale(.3) rotate(-10deg); opacity: 0; }
    18% { transform: scale(1.15) rotate(3deg); opacity: 1; }
    30% { transform: scale(1) rotate(0); opacity: 1; }
    82% { transform: scale(1) rotate(0); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

@keyframes tt-confetti {
    0% { transform: translate(0, 0) scale(.3) rotate(0deg); opacity: 1; }
    15% { opacity: 1; }
    100% {
        transform: translate(calc(cos(var(--a)) * var(--r)), calc(sin(var(--a)) * var(--r) + 56px)) scale(1) rotate(540deg);
        opacity: 0;
    }
}

/* Časovač: lišta se zmenšuje, číslice počítá. Proměnné --dur, --elapsed, --secs se nastaví JEDNOU při vstupu do fáze. */
@keyframes tt-drain {
    to { transform: scaleX(0); }
}

/* Číslice: celočíselná vlastnost --t skáče po sekundách (steps), zobrazí se přes counter(). Používá se s
   animation-timing-function: steps(var(--secs), end), takže zobrazená hodnota = zaokrouhlení nahoru. */
@keyframes tt-count {
    from { --t: var(--secs); }
    to { --t: 0; }
}

/* Dekorativní plovoucí čísla v pozadí. */
.tt-bgnum {
    position: absolute;
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1;
    color: rgba(255, 255, 255, .06);
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
    animation: tt-drift 14s ease-in-out infinite alternate;
}

/* Přidané keyframes pro odhalení (viz reveal.css). */
@keyframes tt-reel {
    from { transform: translateY(0); }
}

@keyframes tt-bounce {
    0%, 100% { transform: scale(1); }
    40% { transform: scale(1.14); }
}

@keyframes tt-drop {
    from { transform: translateY(-34px) scaleY(.6); opacity: 0; }
}

@keyframes tt-marker-in {
    from { transform: translate(-50%, -30px) scale(.3); opacity: 0; }
}

@keyframes tt-winner {
    from { transform: scale(1); }
}

@keyframes tt-ring {
    0% { transform: scale(.9); opacity: .9; }
    100% { transform: scale(1.9); opacity: 0; }
}

@keyframes tt-hide {
    to { visibility: hidden; opacity: 0; }
}

@keyframes tt-grow {
    from { transform: scaleY(0); }
}