/* ==========================================================
   MetaTechX Enterprise Appointment Platform
   animations.css
   Version 2.0
========================================================== */

/* ==========================================================
   GLOBAL ANIMATION VARIABLES
========================================================== */

:root{

    --animation-fast:.25s;
    --animation-normal:.45s;
    --animation-slow:.8s;

}

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

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

.fade-in{

    animation:fadeIn .8s ease both;

}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fade-up{

    animation:fadeUp .8s ease both;

}

/* ==========================================================
   FADE DOWN
========================================================== */

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fade-down{

    animation:fadeDown .8s ease both;

}

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

@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(-80px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.slide-left{

    animation:slideLeft .8s ease both;

}

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

@keyframes slideRight{

    from{

        opacity:0;

        transform:translateX(80px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.slide-right{

    animation:slideRight .8s ease both;

}

/* ==========================================================
   ZOOM IN
========================================================== */

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

.zoom-in{

    animation:zoomIn .7s ease both;

}

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

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}

.float{

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

}

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

@keyframes glow{

    0%{

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

    }

    50%{

        box-shadow:0 0 40px rgba(255,122,0,.45);

    }

    100%{

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

    }

}

.glow{

    animation:glow 3s infinite;

}

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

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

.pulse{

    animation:pulse 2s infinite;

}

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

@keyframes rotate360{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.rotate{

    animation:rotate360 12s linear infinite;

}

/* ==========================================================
   BUTTON SHINE
========================================================== */

.btn-primary{

    position:relative;

    overflow:hidden;

}

.btn-primary::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

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

        transparent

    );

}

.btn-primary:hover::after{

    animation:shine .8s;

}

@keyframes shine{

    from{

        left:-120%;

    }

    to{

        left:150%;

    }

}

/* ==========================================================
   CARD LIFT
========================================================== */

.service-card,
.glass-card,
.feature,
.contact-card{

    transition:.35s;

}

.service-card:hover,
.glass-card:hover,
.feature:hover,
.contact-card:hover{

    transform:translateY(-10px);

}

/* ==========================================================
   RIPPLE
========================================================== */

.ripple{

    position:relative;

    overflow:hidden;

}

.ripple span{

    position:absolute;

    border-radius:50%;

    transform:scale(0);

    animation:ripple .6s linear;

    background:rgba(255,255,255,.35);

}

@keyframes ripple{

    to{

        transform:scale(4);

        opacity:0;

    }

}

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

.loader-circle{

    animation:

    rotate360 1s linear infinite,

    glow 2s infinite;

}

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

.counter{

    animation:zoomIn 1s;

}

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

.hero-right{

    animation:

    floating 6s ease-in-out infinite;

}

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

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:1s;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/* ==========================================================
   STAGGER
========================================================== */

.stagger>*{

    opacity:0;

}

.stagger>*:nth-child(1){

    animation:fadeUp .6s .1s forwards;

}

.stagger>*:nth-child(2){

    animation:fadeUp .6s .2s forwards;

}

.stagger>*:nth-child(3){

    animation:fadeUp .6s .3s forwards;

}

.stagger>*:nth-child(4){

    animation:fadeUp .6s .4s forwards;

}

.stagger>*:nth-child(5){

    animation:fadeUp .6s .5s forwards;

}

.stagger>*:nth-child(6){

    animation:fadeUp .6s .6s forwards;

}

/* ==========================================================
   TOAST
========================================================== */

@keyframes toastIn{

    from{

        transform:translateX(120%);

        opacity:0;

    }

    to{

        transform:translateX(0);

        opacity:1;

    }

}

@keyframes toastOut{

    from{

        transform:translateX(0);

        opacity:1;

    }

    to{

        transform:translateX(120%);

        opacity:0;

    }

}

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

.modal.active{

    animation:fadeIn .25s;

}

.modal-content{

    animation:zoomIn .35s;

}

/* ==========================================================
   SUCCESS
========================================================== */

@keyframes successPop{

    0%{

        transform:scale(.5);

        opacity:0;

    }

    70%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

.success-animation{

    animation:successPop .6s;

}

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

@keyframes shake{

    0%,100%{

        transform:translateX(0);

    }

    20%{

        transform:translateX(-8px);

    }

    40%{

        transform:translateX(8px);

    }

    60%{

        transform:translateX(-6px);

    }

    80%{

        transform:translateX(6px);

    }

}

.error{

    animation:shake .45s;

}

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

.whatsapp-float{

    animation:

    floating 4s ease-in-out infinite,

    glow 3s infinite;

}

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

#scrollTop:hover{

    animation:pulse .8s;

}

/* ==========================================================
   BACKGROUND GRADIENT
========================================================== */

@keyframes gradientMove{

    0%{

        background-position:0 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0 50%;

    }

}

.gradient-bg{

    background-size:300% 300%;

    animation:gradientMove 12s ease infinite;

}

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

@keyframes skeleton{

    0%{

        background-position:-300px 0;

    }

    100%{

        background-position:300px 0;

    }

}

.skeleton{

    background:

    linear-gradient(

    90deg,

    #1a2f4d 25%,

    #29486f 37%,

    #1a2f4d 63%

    );

    background-size:400px 100%;

    animation:skeleton 1.2s infinite;

}

/* ==========================================================
   END
========================================================== */