/* ==========================================================
   RTSC WEBSITE V14 ULTIMATE
   ANIMATIONS.CSS
========================================================== */

/* ---------- Fade ---------- */

@keyframes fadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}

/* ---------- Slide Up ---------- */

@keyframes slideUp {

    from {

        opacity: 0;
        transform: translateY(40px);

    }

    to {

        opacity: 1;
        transform: translateY(0);

    }

}

/* ---------- Slide Down ---------- */

@keyframes slideDown {

    from {

        opacity: 0;
        transform: translateY(-40px);

    }

    to {

        opacity: 1;
        transform: translateY(0);

    }

}

/* ---------- Slide Left ---------- */

@keyframes slideLeft {

    from {

        opacity: 0;
        transform: translateX(50px);

    }

    to {

        opacity: 1;
        transform: translateX(0);

    }

}

/* ---------- Slide Right ---------- */

@keyframes slideRight {

    from {

        opacity: 0;
        transform: translateX(-50px);

    }

    to {

        opacity: 1;
        transform: translateX(0);

    }

}

/* ---------- Zoom ---------- */

@keyframes zoomIn {

    from {

        opacity: 0;
        transform: scale(.90);

    }

    to {

        opacity: 1;
        transform: scale(1);

    }

}

/* ---------- Floating ---------- */

@keyframes floating {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

    100% {

        transform: translateY(0);

    }

}

/* ---------- Glow ---------- */

@keyframes glow {

    0% {

        box-shadow: 0 0 0 rgba(255,193,7,.20);

    }

    50% {

        box-shadow:
            0 0 25px rgba(255,193,7,.45),
            0 0 45px rgba(255,193,7,.25);

    }

    100% {

        box-shadow: 0 0 0 rgba(255,193,7,.20);

    }

}

/* ---------- Pulse ---------- */

@keyframes pulse {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.05);

    }

    100% {

        transform: scale(1);

    }

}

/* ---------- Hero Gradient ---------- */

@keyframes heroGradient {

    0% {

        background-position: 0% 50%;

    }

    50% {

        background-position: 100% 50%;

    }

    100% {

        background-position: 0% 50%;

    }

}

/* ---------- Shimmer ---------- */

@keyframes shimmer {

    0% {

        background-position: -1000px 0;

    }

    100% {

        background-position: 1000px 0;

    }

}

/* ---------- Rotation ---------- */

@keyframes rotate360 {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

/* ---------- Ripple ---------- */

@keyframes ripple {

    from {

        transform: scale(.2);
        opacity: .8;

    }

    to {

        transform: scale(2.2);
        opacity: 0;

    }

}

/* ==========================================================
   REVEAL ANIMATION
========================================================== */

.reveal {

    opacity: 0;
    transform: translateY(50px);
    transition:
        opacity .8s ease,
        transform .8s ease;

}

.reveal.active {

    opacity: 1;
    transform: translateY(0);

}

/* ==========================================================
   HOVER EFFECTS
========================================================== */

.card {

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.card:hover {

    transform: translateY(-8px);

}

.btn {

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.btn:hover {

    transform: translateY(-3px);

}

img {

    transition:
        transform .35s ease;

}

img:hover {

    transform: scale(1.04);

}

/* ==========================================================
   HERO
========================================================== */

.hero {

    animation:
        fadeIn 1.2s ease;

}

.hero-title {

    animation:
        slideDown .9s ease;

}

.hero-subtitle {

    animation:
        slideUp 1.1s ease;

}

.hero-logo {

    animation:
        floating 5s ease-in-out infinite;

}

/* ==========================================================
   MATCH CARDS
========================================================== */

.match-card:hover {

    animation:
        glow 2.5s infinite;

}

/* ==========================================================
   SPOTLIGHT
========================================================== */

.spotlight-player {

    animation:
        zoomIn .8s ease;

}

.spotlight-player:hover {

    transform: translateY(-8px);

}

/* ==========================================================
   DREAM XI
========================================================== */

.player-card:hover {

    transform:
        translateY(-8px)
        scale(1.04);

}

/* ==========================================================
   RTSC TV
========================================================== */

.featured-video {

    animation:
        fadeIn 1s ease;

}

.playlist-item:hover {

    transform: translateX(8px);

}

/* ==========================================================
   NEWS
========================================================== */

.news-card:hover img {

    transform:
        scale(1.08);

}

/* ==========================================================
   SPONSORS
========================================================== */

.sponsor-card:hover {

    animation:
        pulse .7s;

}

/* ==========================================================
   BADGES
========================================================== */

.badge-danger {

    animation:
        pulse 1.8s infinite;

}

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

.skeleton {

    background:

        linear-gradient(
            90deg,
            rgba(255,255,255,.06) 25%,
            rgba(255,255,255,.15) 50%,
            rgba(255,255,255,.06) 75%
        );

    background-size:

        1000px 100%;

    animation:

        shimmer 2s infinite linear;

}

/* ==========================================================
   SCROLL TO TOP
========================================================== */

.scroll-top {

    transition:

        transform .25s ease;

}

.scroll-top:hover {

    transform:

        translateY(-6px);

}

/* ==========================================================
   FOOTER
========================================================== */

.footer-social a:hover {

    transform:

        translateY(-4px);

}

/* ==========================================================
   NAVIGATION
========================================================== */

.navbar a {

    transition:

        color .3s ease;

}

.navbar a::after {

    transition:

        width .3s ease;

}

/* ==========================================================
   UTILITIES
========================================================== */

.fade-in {

    animation:
        fadeIn .8s ease both;

}

.slide-up {

    animation:
        slideUp .8s ease both;

}

.slide-left {

    animation:
        slideLeft .8s ease both;

}

.slide-right {

    animation:
        slideRight .8s ease both;

}

.zoom-in {

    animation:
        zoomIn .8s ease both;

}

.float {

    animation:
        floating 5s ease-in-out infinite;

}

.glow {

    animation:
        glow 3s infinite;

}