/* ==========================================================
   YouAndYou TV v2.0 RC2
   Animations CSS
   Production Ready
========================================================== */


/* ===================================
   GLOBAL TRANSITIONS
=================================== */

*{
    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease,
        opacity .25s ease,
        box-shadow .25s ease;
}


/* ===================================
   FADE IN
=================================== */

.fade-in{

    animation:fadeIn .4s ease forwards;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


/* ===================================
   FADE UP
=================================== */

.fade-up{

    animation:fadeUp .45s ease forwards;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ===================================
   SLIDE LEFT
=================================== */

.slide-left{

    animation:slideLeft .35s ease;

}

@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(35px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


/* ===================================
   SLIDE RIGHT
=================================== */

.slide-right{

    animation:slideRight .35s ease;

}

@keyframes slideRight{

    from{

        opacity:0;

        transform:translateX(-35px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


/* ===================================
   SCALE IN
=================================== */

.scale-in{

    animation:scaleIn .3s ease;

}

@keyframes scaleIn{

    from{

        opacity:0;

        transform:scale(.92);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}


/* ===================================
   LIVE PULSE
=================================== */

.live-pulse{

    animation:livePulse 1.6s infinite;

}

@keyframes livePulse{

    0%{

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

    }

    70%{

        box-shadow:0 0 0 14px rgba(255,0,51,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(255,0,51,0);

    }

}


/* ===================================
   SPINNER
=================================== */

.spin{

    animation:spin 1s linear infinite;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/* ===================================
   FLOAT
=================================== */

.float{

    animation:float 3s ease-in-out infinite;

}

@keyframes float{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}


/* ===================================
   BOUNCE
=================================== */

.bounce{

    animation:bounce .7s;

}

@keyframes bounce{

    0%{

        transform:scale(.9);

    }

    40%{

        transform:scale(1.06);

    }

    100%{

        transform:scale(1);

    }

}


/* ===================================
   SHAKE
=================================== */

.shake{

    animation:shake .4s;

}

@keyframes shake{

    25%{

        transform:translateX(-5px);

    }

    50%{

        transform:translateX(5px);

    }

    75%{

        transform:translateX(-5px);

    }

}


/* ===================================
   CARD HOVER
=================================== */

.card-hover:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow);

}


/* ===================================
   IMAGE ZOOM
=================================== */

.zoom-hover{

    overflow:hidden;

}

.zoom-hover img{

    transition:transform .35s ease;

}

.zoom-hover:hover img{

    transform:scale(1.06);

}


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

.btn-hover:hover{

    transform:translateY(-2px);

}


/* ===================================
   ICON ROTATE
=================================== */

.rotate-hover:hover{

    transform:rotate(180deg);

}


/* ===================================
   SIDEBAR
=================================== */

.sidebar{

    transition:
        width .25s ease,
        transform .25s ease;

}


/* ===================================
   DROPDOWN
=================================== */

.dropdown-menu{

    animation:dropdownFade .2s ease;

}

@keyframes dropdownFade{

    from{

        opacity:0;

        transform:translateY(-10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ===================================
   MODAL
=================================== */

.modal-content{

    animation:modalIn .25s ease;

}

@keyframes modalIn{

    from{

        opacity:0;

        transform:translateY(30px) scale(.95);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}


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

.fade-player{

    animation:heroFade .35s ease;

}

@keyframes heroFade{

    from{

        opacity:.2;

        transform:scale(.98);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}


/* ===================================
   SKELETON
=================================== */

.skeleton::after{

    animation:skeletonMove 1.2s linear infinite;

}

@keyframes skeletonMove{

    from{

        left:-100%;

    }

    to{

        left:100%;

    }

}


/* ===================================
   REDUCE MOTION
=================================== */

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

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}