/*==================================================
    VETNOL ANIMATIONS
    File : assets/css/animations.css
==================================================*/

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

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

.fade-in{

    animation:fadeIn .8s ease both;

}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fade-up{

    animation:fadeUp .8s ease both;

}

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

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fade-down{

    animation:fadeDown .8s ease both;

}

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

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.fade-left{

    animation:fadeLeft .8s ease both;

}

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

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.fade-right{

    animation:fadeRight .8s ease both;

}

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

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

.zoom-in{

    animation:zoomIn .7s ease both;

}

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

@keyframes zoomOut{

    from{

        opacity:0;

        transform:scale(1.15);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

.zoom-out{

    animation:zoomOut .7s ease both;

}

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

@keyframes rotateIn{

    from{

        opacity:0;

        transform:rotate(-12deg) scale(.9);

    }

    to{

        opacity:1;

        transform:rotate(0) scale(1);

    }

}

.rotate-in{

    animation:rotateIn .8s ease both;

}

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

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

.floating{

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

}

/*==================================================
                HEARTBEAT
==================================================*/

@keyframes heartbeat{

    0%{

        transform:scale(1);

    }

    25%{

        transform:scale(1.08);

    }

    50%{

        transform:scale(.96);

    }

    75%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

.heartbeat{

    animation:heartbeat 2s infinite;

}

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

@keyframes pulse{

    0%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.08);

        opacity:.75;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

.pulse{

    animation:pulse 2s infinite;

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

@keyframes bounce{

    0%,20%,50%,80%,100%{

        transform:translateY(0);

    }

    40%{

        transform:translateY(-18px);

    }

    60%{

        transform:translateY(-8px);

    }

}

.bounce{

    animation:bounce 1.8s infinite;

}

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

@keyframes bounceIn{

    0%{

        opacity:0;

        transform:scale(.3);

    }

    50%{

        opacity:1;

        transform:scale(1.08);

    }

    70%{

        transform:scale(.95);

    }

    100%{

        transform:scale(1);

    }

}

.bounce-in{

    animation:bounceIn .9s both;

}

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

@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(80px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.slide-up{

    animation:slideUp .8s ease both;

}

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

@keyframes slideDown{

    from{

        opacity:0;

        transform:translateY(-80px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.slide-down{

    animation:slideDown .8s ease both;

}

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

@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(-100px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.slide-left{

    animation:slideLeft .8s ease both;

}

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

@keyframes slideRight{

    from{

        opacity:0;

        transform:translateX(100px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.slide-right{

    animation:slideRight .8s ease both;

}

/*==================================================
                BLOB MOVEMENT
==================================================*/

@keyframes blob{

    0%{

        transform:translate(0,0) scale(1);

    }

    33%{

        transform:translate(35px,-25px) scale(1.08);

    }

    66%{

        transform:translate(-20px,30px) scale(.95);

    }

    100%{

        transform:translate(0,0) scale(1);

    }

}

.animate-blob{

    animation:blob 10s ease-in-out infinite;

}

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

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.spin{

    animation:spin 1s linear infinite;

}

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

@keyframes loaderPulse{

    0%{

        transform:scale(.8);

        opacity:.5;

    }

    50%{

        transform:scale(1.1);

        opacity:1;

    }

    100%{

        transform:scale(.8);

        opacity:.5;

    }

}

.loader-pulse{

    animation:loaderPulse 1.5s infinite ease-in-out;

}

/*==================================================
                TYPING DOTS
==================================================*/

@keyframes typing{

    0%{

        transform:translateY(0);

        opacity:.4;

    }

    50%{

        transform:translateY(-6px);

        opacity:1;

    }

    100%{

        transform:translateY(0);

        opacity:.4;

    }

}

.typing-dot{

    animation:typing 1.2s infinite;

}

.typing-dot:nth-child(2){

    animation-delay:.2s;

}

.typing-dot:nth-child(3){

    animation-delay:.4s;

}

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

@keyframes skeletonLoading{

    100%{

        transform:translateX(100%);

    }

}

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

@keyframes ripple{

    from{

        transform:scale(.3);

        opacity:.8;

    }

    to{

        transform:scale(2.4);

        opacity:0;

    }

}

.ripple{

    position:relative;

    overflow:hidden;

}

.ripple::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    border:2px solid currentColor;

    animation:ripple 2s infinite;

}

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

@keyframes shine{

    from{

        left:-120%;

    }

    to{

        left:120%;

    }

}

.shine{

    position:relative;

    overflow:hidden;

}

.shine::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:50%;

    height:100%;

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

    transform:skewX(-25deg);

    animation:shine 2.8s infinite;

}
/*==================================================
                WIGGLE
==================================================*/

@keyframes wiggle{

    0%,100%{

        transform:rotate(0deg);

    }

    25%{

        transform:rotate(-4deg);

    }

    75%{

        transform:rotate(4deg);

    }

}

.wiggle{

    animation:wiggle .8s ease-in-out infinite;

}

/*==================================================
                SWING
==================================================*/

@keyframes swing{

    20%{

        transform:rotate(15deg);

    }

    40%{

        transform:rotate(-10deg);

    }

    60%{

        transform:rotate(6deg);

    }

    80%{

        transform:rotate(-4deg);

    }

    100%{

        transform:rotate(0deg);

    }

}

.swing{

    transform-origin:top center;

    animation:swing 1s ease;

}

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

@keyframes shake{

    0%{

        transform:translateX(0);

    }

    20%{

        transform:translateX(-8px);

    }

    40%{

        transform:translateX(8px);

    }

    60%{

        transform:translateX(-6px);

    }

    80%{

        transform:translateX(6px);

    }

    100%{

        transform:translateX(0);

    }

}

.shake{

    animation:shake .6s ease;

}

/*==================================================
                RUBBER BAND
==================================================*/

@keyframes rubberBand{

    0%{

        transform:scale(1);

    }

    30%{

        transform:scaleX(1.25) scaleY(.75);

    }

    40%{

        transform:scaleX(.75) scaleY(1.25);

    }

    60%{

        transform:scaleX(1.15) scaleY(.85);

    }

    100%{

        transform:scale(1);

    }

}

.rubber-band{

    animation:rubberBand .9s ease;

}

/*==================================================
                JELLO
==================================================*/

@keyframes jello{

    0%,100%{

        transform:none;

    }

    22%{

        transform:skewX(-12deg) skewY(-12deg);

    }

    33%{

        transform:skewX(8deg) skewY(8deg);

    }

    44%{

        transform:skewX(-4deg) skewY(-4deg);

    }

    55%{

        transform:skewX(2deg) skewY(2deg);

    }

}

.jello{

    animation:jello .9s both;

}

/*==================================================
                FLASH
==================================================*/

@keyframes flash{

    0%,50%,100%{

        opacity:1;

    }

    25%,75%{

        opacity:0;

    }

}

.flash{

    animation:flash 1.4s infinite;

}

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

@keyframes glow{

    0%{

        box-shadow:0 0 0 rgba(47,125,27,0);

    }

    50%{

        box-shadow:0 0 25px rgba(47,125,27,.45);

    }

    100%{

        box-shadow:0 0 0 rgba(47,125,27,0);

    }

}

.glow{

    animation:glow 2s ease-in-out infinite;

}

/*==================================================
                FLIP X
==================================================*/

@keyframes flipX{

    from{

        transform:perspective(600px) rotateX(90deg);

        opacity:0;

    }

    to{

        transform:perspective(600px) rotateX(0);

        opacity:1;

    }

}

.flip-x{

    backface-visibility:hidden;

    animation:flipX .8s ease both;

}

/*==================================================
                FLIP Y
==================================================*/

@keyframes flipY{

    from{

        transform:perspective(600px) rotateY(90deg);

        opacity:0;

    }

    to{

        transform:perspective(600px) rotateY(0);

        opacity:1;

    }

}

.flip-y{

    backface-visibility:hidden;

    animation:flipY .8s ease both;

}

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

@keyframes rotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.rotate{

    animation:rotate 8s linear infinite;

}

/*==================================================
                GRADIENT FLOW
==================================================*/

@keyframes gradientFlow{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}

.gradient-flow{

    background-size:300% 300%;

    animation:gradientFlow 8s ease infinite;

}

/*==================================================
                MARQUEE
==================================================*/

@keyframes marquee{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

.marquee{

    display:flex;

    width:max-content;

    animation:marquee 20s linear infinite;

}

/*==================================================
                BACKGROUND PAN
==================================================*/

@keyframes backgroundPan{

    0%{

        background-position:0 0;

    }

    100%{

        background-position:100% 100%;

    }

}

.bg-pan{

    animation:backgroundPan 20s linear infinite;

}

/*==================================================
                FLOATING PARTICLES
==================================================*/

@keyframes particleFloat{

    0%{

        transform:translateY(0) translateX(0);

        opacity:0;

    }

    20%{

        opacity:1;

    }

    80%{

        opacity:1;

    }

    100%{

        transform:translateY(-220px) translateX(40px);

        opacity:0;

    }

}

.particle{

    animation:particleFloat 8s linear infinite;

}

/*==================================================
                ANIMATION DELAYS
==================================================*/

.delay-100{

    animation-delay:.1s;

}

.delay-200{

    animation-delay:.2s;

}

.delay-300{

    animation-delay:.3s;

}

.delay-400{

    animation-delay:.4s;

}

.delay-500{

    animation-delay:.5s;

}

.delay-700{

    animation-delay:.7s;

}

.delay-1000{

    animation-delay:1s;

}

/*==================================================
                ANIMATION DURATIONS
==================================================*/

.duration-fast{

    animation-duration:.4s;

}

.duration-normal{

    animation-duration:.8s;

}

.duration-slow{

    animation-duration:1.5s;

}

.duration-slower{

    animation-duration:3s;

}
/*==================================================
                SCROLL REVEAL HELPERS
==================================================*/

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;

    will-change:opacity,transform;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

.reveal-left{

    opacity:0;

    transform:translateX(-60px);

    transition:all .8s ease;

}

.reveal-left.active{

    opacity:1;

    transform:translateX(0);

}

.reveal-right{

    opacity:0;

    transform:translateX(60px);

    transition:all .8s ease;

}

.reveal-right.active{

    opacity:1;

    transform:translateX(0);

}

.reveal-scale{

    opacity:0;

    transform:scale(.9);

    transition:all .7s ease;

}

.reveal-scale.active{

    opacity:1;

    transform:scale(1);

}

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

.hover-lift{

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

}

.hover-lift:hover{

    transform:translateY(-10px);

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

}

.hover-grow{

    transition:transform .35s ease;

}

.hover-grow:hover{

    transform:scale(1.05);

}

.hover-shrink{

    transition:transform .35s ease;

}

.hover-shrink:hover{

    transform:scale(.96);

}

.hover-rotate{

    transition:transform .35s ease;

}

.hover-rotate:hover{

    transform:rotate(5deg);

}

.hover-bright{

    transition:filter .35s ease;

}

.hover-bright:hover{

    filter:brightness(1.1);

}

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

.float-slow{

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

}

.float-medium{

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

}

.float-fast{

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

}

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

.stagger>*{

    opacity:0;

}

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

    animation-delay:.1s;

}

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

    animation-delay:.2s;

}

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

    animation-delay:.3s;

}

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

    animation-delay:.4s;

}

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

    animation-delay:.5s;

}

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

    animation-delay:.6s;

}

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

    animation-delay:.7s;

}

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

    animation-delay:.8s;

}

/*==================================================
                FILL MODES
==================================================*/

.fill-both{

    animation-fill-mode:both;

}

.fill-forwards{

    animation-fill-mode:forwards;

}

.fill-backwards{

    animation-fill-mode:backwards;

}

/*==================================================
                PLAY STATE
==================================================*/

.pause-animation{

    animation-play-state:paused;

}

.run-animation{

    animation-play-state:running;

}

/*==================================================
                ITERATION HELPERS
==================================================*/

.once{

    animation-iteration-count:1;

}

.twice{

    animation-iteration-count:2;

}

.infinite{

    animation-iteration-count:infinite;

}

/*==================================================
                TRANSFORM ORIGIN
==================================================*/

.origin-top{

    transform-origin:top center;

}

.origin-center{

    transform-origin:center;

}

.origin-bottom{

    transform-origin:bottom center;

}

/*==================================================
                ACCESSIBILITY
==================================================*/

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

    *,

    *::before,

    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }

}

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

.animate{

    animation-duration:.8s;

    animation-fill-mode:both;

}

.animate-fast{

    animation-duration:.5s;

}

.animate-slow{

    animation-duration:1.5s;

}

.animate-slower{

    animation-duration:2.5s;

}

.animate-linear{

    animation-timing-function:linear;

}

.animate-ease{

    animation-timing-function:ease;

}

.animate-ease-in{

    animation-timing-function:ease-in;

}

.animate-ease-out{

    animation-timing-function:ease-out;

}

.animate-ease-in-out{

    animation-timing-function:ease-in-out;

}

/*==================================================
                END OF FILE
==================================================*/