@keyframes wave-left {
    0% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(5deg);
    }
}

@keyframes wave-right {
    0% {
        transform: rotate(5deg);
    }
    100% {
        transform: rotate(-5deg);
    }
}

@keyframes wave-top {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(3deg);
    }
}

@keyframes wave-bottom {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-3deg);
    }
}

@keyframes float-up-down {
    0% {
        transform: translateY(0);
    }

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

@keyframes float-left-right {
    0% {
        transform: translateX(0);
    }

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

@keyframes move-from-left-frame {
    0% {
        /* Mulai di luar layar kiri */
        transform: translateX(-100%);
    }
    100% {
        /* Berakhir di luar layar kanan */
        /* Sesuaikan dengan lebar layar dan lebar gambar, 100vw adalah batas minimal */
        transform: translateX(30vw);
    }
}

@keyframes rotate-right-frame {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes rotate-left-frame {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

@keyframes down-up {
    0% {
        transform: translateY(0%);
    }
    100% {
        transform: translateY(8%);
    }
}

@keyframes up-down {
    0% {
        transform: translateY(8%);
    }
    100% {
        transform: translateY(0%);
    }
}

.move-from-left img {
    /* Hapus ease-in-out, hanya gunakan linear untuk kecepatan konstan */
    animation: move-from-left-frame 15s linear infinite;
}

.animate-float-up-down img {
    animation: float-up-down 3s ease-in-out infinite alternate;
}

.animate-float-left-right img {
    animation: float-left-right 3s ease-in-out infinite alternate;
}

.animate-right img {
    transform-origin: top left;
    animation: wave-right 4s ease-in-out infinite alternate;
}

.animate-down-up img {
    animation: down-up 3s ease-in-out infinite alternate;
}

.animate-up-down img {
    animation: up-down 3s ease-in-out infinite alternate;
}

.animate-left img {
    transform-origin: top right;
    animation: wave-left 4s ease-in-out infinite alternate;
}

.animate-bottom-right img {
    transform-origin: bottom left;
    animation: wave-right 4s ease-in-out infinite alternate;
}

.animate-bottom-left img {
    transform-origin: bottom right;
    animation: wave-left 4s ease-in-out infinite alternate;
}

.animate-top img {
    transform-origin: top center;
    animation: wave-top 4s ease-in-out infinite alternate;
}

.animate-bottom img {
    transform-origin: bottom center;
    animation: wave-bottom 4s ease-in-out infinite alternate;
}

.rotate-right img {
    /* Hapus ease-in-out, hanya gunakan linear untuk kecepatan konstan */
    animation: rotate-right-frame 15s linear infinite;
    will-change: transform;
}

.rotate-left img {
    /* Hapus ease-in-out, hanya gunakan linear untuk kecepatan konstan */
    animation: rotate-left-frame 15s linear infinite;
    will-change: transform;
}