/* ===========================
Animation Classes
=========================== */
.swayLeft {
    animation: swayLeft 5s ease-in-out infinite;
}

.swayRight {
    animation: swayRight 5s ease-in-out infinite;
}

.swayLeftRight {
    animation: swayLeftRight 5s ease-in-out infinite;
}

.fadeInLeft {
    animation: fadeInLeft 1s linear;
}

.fadeInRight {
    animation: fadeInRight 1s linear;
}

.fadeZoomIn {
    animation: fadeZoomIn 1.5s ease-in-out forwards;
    animation-delay: 1s;
}

/* --- Combined Animations --- */

.fadeZoomIn-swayLeft {
    animation: fadeZoomIn 1.5s linear, swayLeft 5s ease-in-out infinite;
}

.fadeZoomIn-swayRight {
    animation: fadeZoomIn 2s linear, swayRight 5s ease-in-out infinite;
    animation-delay: 0s, 2s;
}

.fadeInLeft-swayLeft {
    animation: fadeInLeft 2s linear, swayLeft 5s ease-in-out infinite;
    animation-delay: 0s, 2s;
}

.fadeInLeft-swayRight {
    animation: fadeInLeft 2s linear, swayRight 5s ease-in-out infinite;
    animation-delay: 0s, 2s;
}

.fadeInLeft-swayRightLeft {
    animation: fadeInLeft 2s linear, swayRightLeft 5s ease-in-out infinite;
    animation-delay: 0s, 2s;
}

.fadeInRight-swayLeft {
    animation: fadeInRight 2s linear, swayLeft 5s ease-in-out infinite;
    animation-delay: 0s, 2s;
}

.fadeInRight-swayRight {
    animation: fadeInRight 2s linear, swayRight 5s ease-in-out infinite;
    animation-delay: 0s, 2s;
}

.fadeInRight-swayRightLeft {
    animation: fadeInRight 2s linear, swayRightLeft 5s ease-in-out infinite;
    animation-delay: 0s, 2s;
}

.fadeInUp-swayLeft {
    animation: fadeInUp 2s linear, swayLeft 5s ease-in-out infinite;
    animation-delay: 0s, 2s;
}

.fadeInUp-swayRight {
    animation: fadeInUp 2s linear, swayRight 5s ease-in-out infinite;
    animation-delay: 0s, 2s;
}

.fadeInUp-swayRightLeft {
    animation: fadeInUp 2s linear, swayRightLeft 5s ease-in-out infinite;
    animation-delay: 0s, 2s;
}

.fadeInDown-swayLeft {
    animation: fadeInDown 2s linear, swayLeft 5s ease-in-out infinite;
    animation-delay: 0s, 2s;
}

.fadeInDown-swayRight {
    animation: fadeInDown 2s linear, swayRight 5s ease-in-out infinite;
    animation-delay: 0s, 2s;
}

.fadeInDown-swayRightLeft {
    animation: fadeInDown 2s linear, swayRightLeft 5s ease-in-out infinite;
    animation-delay: 0s, 2s;
}

/* --- Utilities & Helpers --- */

.infiniteRight5s {
    animation: infiniteRight 5s linear infinite;
}

.infiniteRight6s {
    animation: infiniteRight 6s linear infinite;
}

.outLeft {
    animation: outLeft 3s ease-in forwards;
}

.outRight {
    animation: outRight 3s ease-in forwards;
}

.transformBottomCenter {
    transform-origin: bottom center;
}

.transformTopLeft {
    transform-origin: top left;
}

.transformTopRight {
    transform-origin: top right;
}

.transformBottomLeft {
    transform-origin: bottom left;
}

.transformBottomRight {
    transform-origin: bottom right;
}

.transformCenterLeft {
    transform-origin: center left;
}

.transformCenterRight {
    transform-origin: center right;
}

.delay500ms {
    animation-delay: 0.5s;
}

.delay1s {
    animation-delay: 1s;
}

.delay2s {
    animation-delay: 2s;
}

.zoomIn {
    animation: zoomIn 2s ease-in-out forwards;
    animation-delay: 1s;
}

/* ===========================
Keyframes Definitions
=========================== */

@keyframes swayLeft {
    0% { transform: translateX(0px) rotate(0deg); }
    50% { transform: translateX(-10px) rotate(-5deg); }
    100% { transform: translateX(0px) rotate(0deg); }
}

@keyframes swayRight {
    0% { transform: translateX(0px) rotate(0deg); }
    50% { transform: translateX(10px) rotate(10deg); }
    100% { transform: translateX(0px) rotate(0deg); }
}

@keyframes swayLeftRight {
    0% { transform: translateX(-10px); }
    50% { transform: translateX(10px); }
    100% { transform: translateX(-10px); }
}

/* ADDED: Definisi ini hilang di kode asli, 
padahal dipanggil di kelas .fadeInRight-swayRightLeft dll.
*/
@keyframes swayRightLeft {
    0% { transform: translateX(10px); }
    50% { transform: translateX(-10px); }
    100% { transform: translateX(10px); }
}

@keyframes infiniteRight {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(100vw + 150%)); }
}

@keyframes outLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-100vw - 150%)); }
}

@keyframes outRight {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(100vw + 150%)); }
}

@keyframes zoomIn {
    from { transform: scale(1); }
    to { transform: scale(1.5); }
}

@keyframes fadeZoomIn {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translate3d(-100%, 0, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translate3d(100%, 0, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0, -100%, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translate3d(0, 100%, 0); }
    to { opacity: 1; transform: none; }
}