/* =========================================
   LOS SANTOS RP
   ANIMATIONS
========================================= */



/* =========================================
   PAGE LOAD
========================================= */


@keyframes pageFade {


    from {

        opacity:
        0;

    }


    to {

        opacity:
        1;

    }


}



body {


    animation:
    pageFade 1s ease forwards;


}







/* =========================================
   LOADER ANIMATION
========================================= */



.loader-logo {


    animation:
    loaderPulse 1.5s infinite;


}



@keyframes loaderPulse {


    0% {


        opacity:
        .4;


        transform:
        scale(.95);


    }



    50% {


        opacity:
        1;


        transform:
        scale(1.05);


    }



    100% {


        opacity:
        .4;


        transform:
        scale(.95);


    }


}








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



.hero .subtitle {


    animation:
    slideDown 1s ease .3s both;


}



.hero h1 {


    animation:
    slideUp 1s ease .5s both;


}




.hero .description {


    animation:
    slideUp 1s ease .8s both;


}




.hero-buttons {


    animation:
    slideUp 1s ease 1s both;


}



.hero-stats {


    animation:
    slideUp 1s ease 1.2s both;


}







@keyframes slideUp {


    from {


        opacity:
        0;


        transform:
        translateY(50px);


    }


    to {


        opacity:
        1;


        transform:
        translateY(0);


    }


}




@keyframes slideDown {


    from {


        opacity:
        0;


        transform:
        translateY(-30px);


    }


    to {


        opacity:
        1;


        transform:
        translateY(0);


    }


}









/* =========================================
   SERVER ONLINE DOT
========================================= */



.dot {


    animation:
    onlinePulse 2s infinite;


}





@keyframes onlinePulse {


    0% {


        box-shadow:
        0 0 0 0 rgba(33,224,101,.7);


    }



    70% {


        box-shadow:
        0 0 0 15px rgba(33,224,101,0);


    }



    100% {


        box-shadow:
        0 0 0 0 rgba(33,224,101,0);


    }


}








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



.stat-card {


    animation:
    cardAppear .8s ease both;


}




.stat-card:nth-child(1){

    animation-delay:
    .2s;

}


.stat-card:nth-child(2){

    animation-delay:
    .4s;

}


.stat-card:nth-child(3){

    animation-delay:
    .6s;

}





@keyframes cardAppear {


    from {


        opacity:
        0;


        transform:
        translateY(30px);


    }



    to {


        opacity:
        1;


        transform:
        translateY(0);


    }


}








/* =========================================
   GLOW MOVEMENT
========================================= */



@keyframes glowMove {


    0% {


        filter:
        blur(30px);


        opacity:
        .3;


    }


    50% {


        filter:
        blur(60px);


        opacity:
        .7;


    }



    100% {


        filter:
        blur(30px);


        opacity:
        .3;


    }


}








.gradient {


    animation:
    glowMove 8s infinite ease-in-out;


}








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



.play-btn {


    animation:
    buttonFloat 4s infinite ease-in-out;


}



@keyframes buttonFloat {


    0% {


        transform:
        translateY(0);


    }


    50% {


        transform:
        translateY(-5px);


    }


    100% {


        transform:
        translateY(0);


    }


}









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


.reveal {


    opacity:
    0;


    transform:
    translateY(60px);


    transition:
    1s ease;


}




.reveal.active {


    opacity:
    1;


    transform:
    translateY(0);


}









/* =========================================
   SCALE HOVER
========================================= */



.scale-hover {


    transition:
    .4s;


}



.scale-hover:hover {


    transform:
    scale(1.05);


}








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


.gallery-item img {


    transition:
    transform 1s ease;


}







/* =========================================
   SHINE EFFECT
========================================= */


.shine {


    position:
    relative;


    overflow:
    hidden;


}




.shine::after {


    content:
    "";


    position:
    absolute;


    top:
    0;


    left:
    -150%;


    width:
    100%;


    height:
    100%;


    background:
    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );


    transition:
    .8s;


}




.shine:hover::after {


    left:
    150%;


}







/* =========================================
   COUNTER POP
========================================= */


.counter {


    animation:
    counterPop .8s ease;


}



@keyframes counterPop {


    from {


        transform:
        scale(.7);


        opacity:
        0;


    }


    to {


        transform:
        scale(1);


        opacity:
        1;


    }


}







/* =========================================
   PAGE TRANSITION
========================================= */


.fade-page {


    animation:
    fadePage .6s ease;


}



@keyframes fadePage {


    from {


        opacity:
        0;


    }


    to {


        opacity:
        1;


    }


}