/* =========================================================
   TVG PLAYZ — GLOBAL ANIMATIONS
   Clean • Premium • Subtle
========================================================= */


/* =========================================================
   SCROLL REVEAL
========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(18px);

    transition:
        opacity 0.65s ease,
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);

    will-change: opacity, transform;
}


.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   REVEAL DELAYS
========================================================= */

.reveal-delay-1 {
    transition-delay: 0.06s;
}

.reveal-delay-2 {
    transition-delay: 0.12s;
}

.reveal-delay-3 {
    transition-delay: 0.18s;
}

.reveal-delay-4 {
    transition-delay: 0.24s;
}

.reveal-delay-5 {
    transition-delay: 0.30s;
}


/* =========================================================
   PAGE TITLE
========================================================= */

.tvg-page .page-heading h1 {
    animation:
        tvgTitleIn
        0.8s
        cubic-bezier(0.22, 1, 0.36, 1)
        both;
}


@keyframes tvgTitleIn {

    from {
        opacity: 0;
        transform: translateY(16px);
        filter: blur(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }

}


/* =========================================================
   SECTION LABEL
========================================================= */

.tvg-page .section-label {

    animation:
        tvgFadeUp
        0.6s
        ease
        both;

}


@keyframes tvgFadeUp {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   STICKY STAKE CODE
========================================================= */

.tvg-page .sticky-stake-code {

    animation:
        tvgFloatIn
        0.8s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.4s
        both;

}


@keyframes tvgFloatIn {

    from {
        opacity: 0;
        transform:
            translate(-50%, 18px)
            scale(0.97);
    }

    to {
        opacity: 1;
        transform:
            translate(-50%, 0)
            scale(1);
    }

}


/* =========================================================
   BUTTON HOVER
========================================================= */

.tvg-page a,
.tvg-page button {

    transition:
        transform 0.2s ease,
        opacity 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;

}


.tvg-page button:hover,
.tvg-page .btn:hover {

    transform: translateY(-1px);

}


/* =========================================================
   LEADERBOARD ROW HOVER
========================================================= */

.tvg-leaderboard-page
.leaderboard-table tbody tr {

    transition:
        background 0.2s ease,
        transform 0.2s ease;

}


.tvg-leaderboard-page
.leaderboard-table tbody tr:hover {

    transform: translateX(2px);

}


/* =========================================================
   TOP THREE CARDS
========================================================= */

.tvg-leaderboard-page
.top-three > * {

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;

}


.tvg-leaderboard-page
.top-three > *:hover {

    transform: translateY(-4px);

}


/* =========================================================
   PLAYER PROFILE
========================================================= */

.tvg-leaderboard-page
.player-profile-container {

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;

}


/* =========================================================
   SEARCH INPUT
========================================================= */

.tvg-leaderboard-page
.search-box input {

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;

}


.tvg-leaderboard-page
.search-box input:focus {

    outline: none;

    box-shadow:
        0 0 0 3px rgba(32, 199, 107, 0.08),
        0 0 24px rgba(32, 199, 107, 0.06);

}


/* =========================================================
   MONTH SELECT
========================================================= */

.tvg-leaderboard-page
.month-selector select {

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;

}


.tvg-leaderboard-page
.month-selector select:focus {

    outline: none;

    box-shadow:
        0 0 0 3px rgba(32, 199, 107, 0.08);

}


/* =========================================================
   LOADING
========================================================= */

.tvg-leaderboard-page
.loading {

    animation:
        tvgLoadingPulse
        1.4s
        ease-in-out
        infinite;

}


@keyframes tvgLoadingPulse {

    0%,
    100% {
        opacity: 0.45;
    }

    50% {
        opacity: 1;
    }

}


/* =========================================================
   SUBTLE GREEN GLOW
========================================================= */

.tvg-page .accent-glow {

    animation:
        tvgGlow
        3s
        ease-in-out
        infinite alternate;

}


@keyframes tvgGlow {

    from {
        opacity: 0.65;
    }

    to {
        opacity: 1;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .reveal {

        transform: translateY(12px);

        transition-duration: 0.55s;

    }


    .tvg-leaderboard-page
    .leaderboard-table tbody tr:hover {

        transform: none;

    }


    .tvg-leaderboard-page
    .top-three > *:hover {

        transform: translateY(-2px);

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;

    }


    .reveal {

        opacity: 1 !important;
        transform: none !important;

    }

}