/* scroll fedein with transform position */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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