/*
=====================================================
DIGITAL IPSUM
ELEMENTOR ANIMATION UTILITIES
=====================================================
*/


/*
=====================================================
BASE
=====================================================
*/

.di-fade-up,
.di-fade-down,
.di-fade-left,
.di-fade-right,
.di-fade-in,
.di-zoom-in,
.di-zoom-out {

    opacity: 0;

    animation-duration:
        .8s;

    animation-timing-function:
        cubic-bezier(.22, 1, .36, 1);

    animation-fill-mode:
        both;
}


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

.di-fade-up {

    animation-name:
        diFadeUp;
}


@keyframes diFadeUp {

    from {

        opacity: 0;

        transform:
            translateY(40px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


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

.di-fade-down {

    animation-name:
        diFadeDown;
}


@keyframes diFadeDown {

    from {

        opacity: 0;

        transform:
            translateY(-40px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


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

.di-fade-left {

    animation-name:
        diFadeLeft;
}


@keyframes diFadeLeft {

    from {

        opacity: 0;

        transform:
            translateX(40px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}


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

.di-fade-right {

    animation-name:
        diFadeRight;
}


@keyframes diFadeRight {

    from {

        opacity: 0;

        transform:
            translateX(-40px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}


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

.di-fade-in {

    animation-name:
        diFadeIn;
}


@keyframes diFadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}


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

.di-zoom-in {

    animation-name:
        diZoomIn;
}


@keyframes diZoomIn {

    from {

        opacity: 0;

        transform:
            scale(.92);

    }

    to {

        opacity: 1;

        transform:
            scale(1);

    }

}


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

.di-zoom-out {

    animation-name:
        diZoomOut;
}


@keyframes diZoomOut {

    from {

        opacity: 0;

        transform:
            scale(1.08);

    }

    to {

        opacity: 1;

        transform:
            scale(1);

    }

}


/*
=====================================================
SPEED
=====================================================
*/

.di-fast {

    animation-duration:
        .5s !important;
}


.di-slow {

    animation-duration:
        1.2s !important;
}


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

.di-delay-1 {
    animation-delay: .1s;
}

.di-delay-2 {
    animation-delay: .2s;
}

.di-delay-3 {
    animation-delay: .3s;
}

.di-delay-4 {
    animation-delay: .4s;
}

.di-delay-5 {
    animation-delay: .5s;
}

.di-delay-6 {
    animation-delay: .6s;
}

.di-delay-7 {
    animation-delay: .7s;
}

.di-delay-8 {
    animation-delay: .8s;
}


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

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

    .di-fade-up,
    .di-fade-down,
    .di-fade-left,
    .di-fade-right,
    .di-fade-in,
    .di-zoom-in,
    .di-zoom-out {

        opacity: 1;

        animation:
            none !important;

        transform:
            none !important;
    }

}