/* ============================================================
   BRANDFLASHERS ANIMATIONS
============================================================ */


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

.reveal {

    opacity: 0;

    transform: translateY(30px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;

}


.reveal.active {

    opacity: 1;

    transform: translateY(0);

}


.reveal-left {

    opacity: 0;

    transform: translateX(-40px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;

}


.reveal-left.active {

    opacity: 1;

    transform: translateX(0);

}


.reveal-right {

    opacity: 0;

    transform: translateX(40px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;

}


.reveal-right.active {

    opacity: 1;

    transform: translateX(0);

}


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

.scale-in {

    opacity: 0;

    transform: scale(0.94);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;

}


.scale-in.active {

    opacity: 1;

    transform: scale(1);

}


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

.float {

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

}


@keyframes floating {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

}


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

.glow-pulse {

    animation:
        glowPulse 3s ease-in-out infinite;

}


@keyframes glowPulse {

    0%,
    100% {

        opacity: 0.7;

    }

    50% {

        opacity: 1;

    }

}


/* ============================================================
   GRADIENT MOVEMENT
============================================================ */

.animated-gradient {

    background-size: 200% 200%;

    animation:
        gradientMovement 5s ease infinite;

}


@keyframes gradientMovement {

    0% {

        background-position: 0% 50%;

    }

    50% {

        background-position: 100% 50%;

    }

    100% {

        background-position: 0% 50%;

    }

}


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

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

    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;

    }

}