/*====================================================
    BARAN APP LANDING PAGE
    ANIMATIONS STYLE
=====================================================*/


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


.animate-fade-up {

    opacity:0;

    transform:translateY(40px);

    transition:

    opacity .8s ease,

    transform .8s ease;

}


.animate-fade-up.active {

    opacity:1;

    transform:translateY(0);

}



.animate-fade-right {

    opacity:0;

    transform:translateX(50px);

    transition:

    opacity .8s ease,

    transform .8s ease;

}


.animate-fade-right.active {

    opacity:1;

    transform:translateX(0);

}



.animate-fade-left {

    opacity:0;

    transform:translateX(-50px);

    transition:

    opacity .8s ease,

    transform .8s ease;

}


.animate-fade-left.active {

    opacity:1;

    transform:translateX(0);

}



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


.animate-scale {

    opacity:0;

    transform:scale(.85);

    transition:

    opacity .8s ease,

    transform .8s ease;

}


.animate-scale.active {

    opacity:1;

    transform:scale(1);

}



/*====================================================
    DELAY CLASSES
=====================================================*/


.delay-100 {

    transition-delay:.1s;

}


.delay-200 {

    transition-delay:.2s;

}


.delay-300 {

    transition-delay:.3s;

}


.delay-400 {

    transition-delay:.4s;

}


.delay-500 {

    transition-delay:.5s;

}



/*====================================================
    CLOUD FLOAT EFFECT
=====================================================*/


.cloud-animation {

    animation:

    cloudMove 8s ease-in-out infinite;

}


@keyframes cloudMove {


    0% {

        transform:

        translateX(0);

    }


    50% {

        transform:

        translateX(25px);

    }


    100% {

        transform:

        translateX(0);

    }

}



/*====================================================
    RAIN DROP EFFECT
=====================================================*/


.rain-animation {

    animation:

    rainMove 3s linear infinite;

}


@keyframes rainMove {


    0% {

        transform:

        translateY(-10px);

        opacity:.3;

    }


    50% {

        opacity:1;

    }


    100% {

        transform:

        translateY(15px);

        opacity:.3;

    }

}



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


.glow-effect {

    animation:

    glow 3s ease-in-out infinite;

}


@keyframes glow {


    0% {

        box-shadow:

        0 0 0 rgba(18,184,181,0);

    }


    50% {

        box-shadow:

        0 0 50px rgba(18,184,181,.35);

    }


    100% {

        box-shadow:

        0 0 0 rgba(18,184,181,0);

    }

}



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


.rotate-hover {

    transition:.4s ease;

}


.rotate-hover:hover {

    transform:

    rotate(15deg)

    scale(1.1);

}



/*====================================================
    DOWNLOAD BUTTON PULSE
=====================================================*/


.download-pulse {

    animation:

    pulseButton 2.5s infinite;

}


@keyframes pulseButton {


    0% {

        box-shadow:

        0 0 0 0 rgba(18,184,181,.4);

    }


    70% {

        box-shadow:

        0 0 0 18px rgba(18,184,181,0);

    }


    100% {

        box-shadow:

        0 0 0 0 rgba(18,184,181,0);

    }

}



/*====================================================
    QR CODE EFFECT
=====================================================*/


.qr-card {

    animation:

    qrFloat 5s ease-in-out infinite;

}


@keyframes qrFloat {


    0% {

        transform:translateY(0);

    }


    50% {

        transform:translateY(-10px);

    }


    100% {

        transform:translateY(0);

    }

}



/*====================================================
    BACKGROUND BLOBS
=====================================================*/


.blob {

    animation:

    blobMove 12s ease-in-out infinite;

}


@keyframes blobMove {


    0% {

        border-radius:

        45% 55% 60% 40%;

    }


    50% {

        border-radius:

        60% 40% 45% 55%;

    }


    100% {

        border-radius:

        45% 55% 60% 40%;

    }

}



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


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


    * {

        animation-duration:

        0.01ms!important;

        animation-iteration-count:

        1!important;

        transition-duration:

        0.01ms!important;

    }


}