/* scroll fedein with transform position */

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

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

.scrup {
    opacity: 0;
    will-change: transform;
    transform: translateY(3rem);
    transition: transform .5s ease, opacity .5s ease;
}

.scrstart {
    opacity: 0;
    will-change: transform;
    transform: translateY(3rem);
    transition: transform 1s ease, opacity .5s ease;
}

.scrup.on,
.scrstart.on {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

.scrup05s {
    opacity: 0;
    transform: translateY(3rem);
    transition: transform .5s .5s ease, opacity .5s .5s ease;
}

.scrup05s.on {
    opacity: 1;
    transform: translateY(0);
}

.scin {
    opacity: 0;
    transform: translateX(5rem);
    transition: transform 1s ease, opacity 1s ease;
}

.scin.on {
    opacity: 1;
    transform: translateX(0);
    transition: transform 1s 0.2s ease, opacity 1s 0.2s ease;
}

.sczoomstart,
.sczoom {
    opacity: 0;
    transform: scale(1.2);
    transition: all 1.5s 0 ease;
}

.sczoomstart.on,
.sczoom.on {
    opacity: 1;
    will-change: transform;
    transform: scale(1);
    transition: all 1.5s .5s ease;
}

.sczoom2 {
    opacity: 0;
    transform: scale(1.05);
    transition: all 1s .5s ease;
}

.sczoom2.on {
    opacity: 1;
    transform: scale(1);
    transition: all 1s .5s ease;
}

.sczoom3 {
    opacity: 0;
    transform: scale(1.05);
    transition: all 1s 1s ease;
}

.sczoom3.on {
    opacity: 1;
    transform: scale(1);
    transition: all 1s 1s ease;
}

.scrfade {
    opacity: 1;
    transition: all .5s ease;
}

.scrfade.off {
    opacity: 0;
    transition: all .5s ease;
}