/*======================================
EIVOX ANIMATION CSS
Version: 1.0
======================================*/


/*======================================
DEFAULT TRANSITIONS
======================================*/

.transition{

    transition:var(--transition);

}

.transition-fast{

    transition:.2s ease;

}

.transition-slow{

    transition:.5s ease;

}


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

.fade-in{

    animation:fadeIn .5s ease both;

}

.fade-out{

    animation:fadeOut .5s ease both;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes fadeOut{

    from{

        opacity:1;

    }

    to{

        opacity:0;

    }

}


/*======================================
SLIDE UP
======================================*/

.slide-up{

    animation:slideUp .5s ease both;

}

@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*======================================
SLIDE DOWN
======================================*/

.slide-down{

    animation:slideDown .5s ease both;

}

@keyframes slideDown{

    from{

        opacity:0;

        transform:translateY(-40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

.slide-left{

    animation:slideLeft .5s ease both;

}

@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


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

.slide-right{

    animation:slideRight .5s ease both;

}

@keyframes slideRight{

    from{

        opacity:0;

        transform:translateX(-40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


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

.zoom-in{

    animation:zoomIn .4s ease both;

}

.zoom-out{

    animation:zoomOut .4s ease both;

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes zoomOut{

    from{

        opacity:1;

        transform:scale(1);

    }

    to{

        opacity:0;

        transform:scale(.8);

    }

}


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

.float{

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

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}


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

.pulse{

    animation:pulse 1.8s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}


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

.rotate{

    animation:rotate 2s linear infinite;

}

@keyframes rotate{

    to{

        transform:rotate(360deg);

    }

}


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

.shake{

    animation:shake .5s;

}

@keyframes shake{

    0%,100%{

        transform:translateX(0);

    }

    20%{

        transform:translateX(-8px);

    }

    40%{

        transform:translateX(8px);

    }

    60%{

        transform:translateX(-6px);

    }

    80%{

        transform:translateX(6px);

    }

}


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

.bounce{

    animation:bounce 1.2s infinite;

}

@keyframes bounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}


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

.hover-lift{

    transition:var(--transition);

}

.hover-lift:hover{

    transform:translateY(-6px);

}

.hover-scale{

    transition:var(--transition);

}

.hover-scale:hover{

    transform:scale(1.05);

}

.hover-rotate{

    transition:var(--transition);

}

.hover-rotate:hover{

    transform:rotate(3deg);

}


/*======================================
BUTTON EFFECT
======================================*/

.btn-animate{

    position:relative;

    overflow:hidden;

}

.btn-animate::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );

    transition:.6s;

}

.btn-animate:hover::after{

    left:120%;

}


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

.card-hover{

    transition:var(--transition);

}

.card-hover:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-xl);

}


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

.delay-1{

    animation-delay:.1s;

}

.delay-2{

    animation-delay:.2s;

}

.delay-3{

    animation-delay:.3s;

}

.delay-4{

    animation-delay:.4s;

}

.delay-5{

    animation-delay:.5s;

}


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

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}