/* ==========================================================================
   Fluxoweby
   Animations
   Version: 1.0
   ========================================================================== */

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes scaleIn{

    from{

        opacity:0;

        transform:scale(.92);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes rotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes shine{

    from{

        transform:translateX(-100%);

    }

    to{

        transform:translateX(200%);

    }

}

@keyframes progress{

    from{

        width:0;

    }

    to{

        width:100%;

    }

}

/* ==========================================================================
   GENERIC ANIMATIONS
   ========================================================================== */

.fade-in{

    animation:

        fadeIn

        var(--animation-duration)

        var(--animation-easing)

        both;

}

.fade-up{

    animation:

        fadeUp

        var(--animation-duration)

        var(--animation-easing)

        both;

}

.fade-down{

    animation:

        fadeDown

        var(--animation-duration)

        var(--animation-easing)

        both;

}

.fade-left{

    animation:

        fadeLeft

        var(--animation-duration)

        var(--animation-easing)

        both;

}

.fade-right{

    animation:

        fadeRight

        var(--animation-duration)

        var(--animation-easing)

        both;

}

.scale-in{

    animation:

        scaleIn

        .7s

        var(--animation-easing)

        both;

}

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

.floating{

    animation:

        floating

        5s

        ease-in-out

        infinite;

}

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

.pulse{

    animation:

        pulse

        2s

        infinite;

}

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

.rotate{

    animation:

        rotate

        8s

        linear

        infinite;

}

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

.shine{

    position:relative;

    overflow:hidden;

}

.shine::after{

    content:"";

    position:absolute;

    inset:0;

    width:40%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.25),

            transparent

        );

    transform:translateX(-120%);

}

.shine:hover::after{

    animation:

        shine

        .8s

        ease;

}

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

.hover-lift{

    transition:

        transform var(--transition),

        box-shadow var(--transition);

}

.hover-lift:hover{

    transform:translateY(-8px);

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

}

.hover-scale{

    transition:transform var(--transition);

}

.hover-scale:hover{

    transform:scale(1.04);

}

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

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.reveal.is-visible{

    opacity:1;

    transform:none;

}

/* ==========================================================================
   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;

}

/* ==========================================================================
   DASHBOARD
   ========================================================================== */

.cloud-dashboard{

    animation:

        fadeLeft

        1s

        ease

        both;

}

/* ==========================================================================
   HERO CONTENT
   ========================================================================== */

.hero-content{

    animation:

        fadeRight

        1s

        ease

        both;

}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

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

    *{

        animation:none !important;

        transition:none !important;

    }

}