/* Shared motion language: smooth entrances, springy interactions, live-state energy. */
:root {
    --motion-ease: cubic-bezier(.22, .8, .22, 1);
    --motion-spring: cubic-bezier(.2, 1.35, .45, 1);
}

@keyframes motionFadeRise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes motionSlideIn {
    from { opacity: 0; transform: translateX(26px) scale(.985); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes motionWinnerGlow {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(85,216,138,.12); }
    50% { box-shadow: inset 0 0 0 1px rgba(85,216,138,.36), 0 0 14px rgba(85,216,138,.1); }
}

@keyframes motionAmbientGlow {
    0%, 100% { opacity: .1; transform: translate3d(-2%, -1%, 0) scale(1); }
    50% { opacity: .18; transform: translate3d(2%, 1%, 0) scale(1.03); }
}

@keyframes motionReducedFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

body.motion-ready .header,
body.motion-ready .topbar {
    animation: motionFadeRise .42s var(--motion-ease) both;
}

body.motion-ready main > section,
body.motion-ready .dashboard-grid > * {
    animation: motionFadeRise .48s var(--motion-ease) both;
}

body.motion-ready main > section:nth-of-type(1) { animation-delay: 70ms; }
body.motion-ready main > section:nth-of-type(2) { animation-delay: 130ms; }
body.motion-ready main > section:nth-of-type(3) { animation-delay: 190ms; }
body.motion-ready main > section:nth-of-type(n+4) { animation-delay: 240ms; }

button,
[role="button"],
.session-history-item,
.tournament-match,
.round-robin-round {
    transition:
        transform .22s var(--motion-spring),
        box-shadow .22s ease,
        border-color .22s ease,
        background-color .22s ease;
}

button:hover,
[role="button"]:hover {
    transform: translateY(-1px);
}

button:active,
[role="button"]:active {
    transform: translateY(0) scale(.98);
    transition-duration: .08s;
}

.motion-in,
.tournament-match,
.round-robin-table tbody tr,
.round-robin-round,
.session-history-item {
    animation: motionFadeRise .36s var(--motion-ease) both;
    animation-delay: calc(var(--motion-index, 0) * 38ms);
}

.tournament-match-row.winner {
    animation: motionWinnerGlow .9s ease-in-out 1;
}

.score-motion-active,
.game-score-number {
    font-variant-numeric: tabular-nums;
}

.score-motion-active {
    color: var(--accent);
    transform: scale(1.1);
    text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 48%, transparent);
    transition: color .2s ease, transform .3s var(--motion-spring), text-shadow .3s ease;
}

.modal-overlay,
.tournament-results-overlay,
.mobile-leaderboard-overlay.is-open {
    animation: overlayFadeIn .25s ease-out both;
}

.modal-overlay > .modal,
.tournament-results-modal {
    animation: motionSlideIn .38s var(--motion-spring) both;
}

body.pool-game-live::before {
    content: "";
    position: fixed;
    z-index: -1;
    inset: -25%;
    pointer-events: none;
    background: radial-gradient(circle at 52% 40%, rgba(118,87,255,.22), transparent 36%);
    animation: motionAmbientGlow 8s ease-in-out infinite;
}

@media (max-width: 700px) {
    .modal-overlay > .modal,
    .tournament-results-modal {
        transform-origin: bottom center;
        animation-name: motionFadeRise;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .12s !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .12s !important;
    }

    body.pool-game-live::before { animation: none !important; opacity: .2; }
    button:hover, [role="button"]:hover, button:active, [role="button"]:active { transform: none; }

    body.motion-ready .header,
    body.motion-ready main > section,
    .motion-in,
    .modal-overlay,
    .modal-overlay > .modal,
    .tournament-results-overlay,
    .tournament-results-modal,
    .mobile-leaderboard-overlay.is-open {
        animation: motionReducedFade .12s ease both !important;
        transform: none !important;
    }
}