/* Animation keyframes */
@keyframes introImg1 {
    0% {
        transform: translate(100vw, 10px);
    }

    100% {
        transform: translate(0, 10px);
    }
}

@keyframes stayImg1 {
    0% {
        transform: translateY(10px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(10px);
    }
}

@keyframes introImg2 {
    0% {
        transform: translateX(-100vw) rotateZ(-10deg);
    }

    100% {
        transform: translateX(0) rotateZ(-10deg);
    }
}

@keyframes stayImg2 {
    0% {
        transform: rotateZ(-10deg);
    }

    50% {
        transform: rotateZ(10deg);
    }

    100% {
        transform: rotateZ(-10deg);
    }
}

@keyframes introImg3 {
    0% {
        transform: translate(-100vw, 0) scale(1.05, 1.05);
    }

    100% {
        transform: translate(0, 0) scale(1.05, 1.05);
    }
}

@keyframes stayImg3 {
    0% {
        transform: rotateX(0) rotateY(0) scale(1.05, 1.05);
        transform-origin: 0% 50%;
    }

    5% {
        transform: rotateX(10deg) rotateY(10deg) scale(1, 1);
        transform-origin: 0% 50%;
    }

    10% {
        transform: rotateX(0) rotateY(0) scale(1.05, 1.05);
        transform-origin: 0% 50%;
    }

    100% {
        transform: rotateX(0) rotateY(0) scale(1.05, 1.05);
        transform-origin: 0% 50%;
    }
}

@keyframes introImg4 {
    0% {
        transform: translate(100vw, 10px);
    }

    100% {
        transform: translate(0, 10px);
    }
}

@keyframes introImg4Mobile {
    0% {
        transform: translate(-100vw, 10px);
    }

    100% {
        transform: translate(0, 10px);
    }
}

@keyframes stayImg4 {
    0% {
        transform: translateY(10px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(10px);
    }
}

@keyframes shakyImg4 {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    10% {
        transform: translate(5px, 5px) rotate(4deg);
    }

    20% {
        transform: translate(-5px, -5px) rotate(-5deg);
    }

    30% {
        transform: translate(5px, -5px) rotate(3deg);
    }

    40% {
        transform: translate(-5px, 5px) rotate(-6deg);
    }

    50% {
        transform: translate(0, 0) rotate(0deg);
    }

    60% {
        transform: translate(10px, 10px) rotate(7deg);
    }

    70% {
        transform: translate(-10px, -10px) rotate(-4deg);
    }

    80% {
        transform: translate(10px, -10px) rotate(5deg);
    }

    90% {
        transform: translate(-10px, 10px) rotate(-7deg);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

@keyframes fadeTextIn {
    0% {
        opacity: 0;
        transform: translateX(-25px);
    }

    100% {
        opacity: 1;
        transform: translate(0);
    }
}