/* scroll fedein with transform position */

/* @keyframes scrlupanim {
    0% {
        transform: translateY(4em);
    }

    100% {
        transform: translateY(0);
    }
} */

/* slide up */
.scrl_up:not(.wp-block-image),
.scrl_up-start:not(.wp-block-image) ,
.scrl_up.wp-block-image img,
.scrl_up-start.wp-block-image img {
    opacity: 0;
    will-change: transform;
    transform: translateY(3rem);
    transition: transform .5s ease, opacity .5s ease;
}

.scrl_up:not(.wp-block-image).on,
.scrl_up-start:not(.wp-block-image).on ,
.scrl_up.wp-block-image.on img,
.scrl_up-start.wp-block-image.on img {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

.scrl_up-L:not(.wp-block-image) ,
.scrl_up-L.wp-block-image img {
    opacity: 0;
    transform: translateY(5rem);
    transition: transform .5s ease, opacity .5s ease;
}

.scrl_up-L:not(.wp-block-image).on ,
.scrl_up-L.wp-block-image.on img {
    opacity: 1;
    transform: translateY(0);
}

.scrl_up-delay:not(.wp-block-image) ,
.scrl_up-delay.wp-block-image img {
    opacity: 0;
    transform: translateY(3rem);
    transition: transform .5s .5s ease, opacity .5s .5s ease;
}

.scrl_up-delay:not(.wp-block-image).on ,
.scrl_up-delay.wp-block-image.on img {
    opacity: 1;
    transform: translateY(0);
}

.scrl_up-slow:not(.wp-block-image) ,
.scrl_up-slow.wp-block-image img {
    opacity: 0;
    transform: translateY(100%);
    transition: transform 1s ease, opacity 1s ease;
}

.scrl_up-slow:not(.wp-block-image).on ,
.scrl_up-slow.wp-block-image.on img {
    opacity: 1;
    transform: translateY(0);
}

/* slide in */
.scrl_inL:not(.wp-block-image) ,
.scrl_inL.wp-block-image img {
    opacity: 0;
    transform: translateX(-25%);
    transition: transform .75s ease, opacity .5s ease;
}

.scrl_inL:not(.wp-block-image).on ,
.scrl_inL.wp-block-image.on img {
    opacity: 1;
    transform: translateX(0);
    transition: transform .75s ease, opacity .5s ease;
}

.scrl_inR:not(.wp-block-image) ,
.scrl_inR.wp-block-image img {
    opacity: 0;
    transform: translateX(25%);
    transition: transform .75s ease, opacity .5s ease;
}

.scrl_inR:not(.wp-block-image).on ,
.scrl_inR.wp-block-image.on img {
    opacity: 1;
    transform: translateX(0);
    transition: transform .75s ease, opacity .5s ease;
}

/* zoom */
.scrl_zoom-start:not(.wp-block-image) ,
.scrl_zoom-start.wp-block-image img {
    opacity: 0;
    transform: scale(1.1);
    transition: all .5s .1s ease;
}

.scrl_zoom:not(.wp-block-image) ,
.scrl_zoom:not(.wp-block-image) img {
    opacity: 0;
    transform: scale(1.1);
    transition: all .5s ease;
}

.scrl_zoom-start:not(.wp-block-image).on,
.scrl_zoom-start.wp-block-image.on img ,
.scrl_zoom:not(.wp-block-image).on,
.scrl_zoom.wp-block-image.on img {
    opacity: 1;
    will-change: transform;
    transform: scale(1);
    transition: all .5s ease;
}

.scrl_zoom2:not(.wp-block-image) ,
.scrl_zoom2.wp-block-image img {
    opacity: 0;
    transform: scale(1.05);
    transition: all 1s .5s ease;
}

.scrl_zoom2:not(.wp-block-image).on ,
.scrl_zoom2.wp-block-image.on img {
    opacity: 1;
    transform: scale(1);
    transition: all 1s .5s ease;
}

.scrl_zoom3:not(.wp-block-image) ,
.scrl_zoom3.wp-block-image img {
    opacity: 0;
    transform: scale(1.05);
    transition: all 1s 1s ease;
}

.scrl_zoom3:not(.wp-block-image).on ,
.scrl_zoom3.wp-block-image.on img {
    opacity: 1;
    transform: scale(1);
    transition: all 1s 1s ease;
}

/* fade in */
.scrl_fadein-start:not(.wp-block-image) ,
.scrl_fadein-start.wp-block-image img ,
.scrl_fadein:not(.wp-block-image) ,
.scrl_fadein.wp-block-image img {
    opacity: 0;
    transition: all .5s ease;
}

.scrl_fadein-start:not(.wp-block-image).on ,
.scrl_fadein-start.wp-block-image.on img ,
.scrl_fadein:not(.wp-block-image).on ,
.scrl_fadein.wp-block-image.on img {
    opacity: 1;
    transition: all .5s ease;
}

/* fade out */
.scrl_fadeout:not(.wp-block-image) ,
.scrl_fadeout.wp-block-image img {
    opacity: 1;
    transition: all .5s ease;
}

.scrl_fadeout:not(.wp-block-image).on ,
.scrl_fadeout.wp-block-image.on img {
    opacity: 0;
    transition: all .5s ease;
}