/* * Custom Animation Bundle - Wijaya Abadi Update
 * Versi: 1.0.2
 */

/* --- 1. BASE SETTINGS --- */
.cab-anim {
    /* Elemen tidak terlihat di awal untuk mencegah kedipan (Glitch) */
    opacity: 0; 
    display: inline-block;
    will-change: transform, opacity;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-play-state: paused; /* Ditahan sampai class .cab-play masuk */
}

/* Pemicu utama dari JavaScript */
.cab-play {
    opacity: 1 !important;
    animation-play-state: running !important;
}

/* --- 2. FADE EFFECTS --- */
@keyframes cabFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.cab-fade-in.cab-play { 
    animation-name: cabFadeIn; 
}

@keyframes cabFadeInUp {
    from { 
        opacity: 0; 
        transform: translate3d(0, 40px, 0); 
    }
    to { 
        opacity: 1; 
        transform: translate3d(0, 0, 0); 
    }
}
.cab-fade-up.cab-play { 
    animation-name: cabFadeInUp; 
}

/* --- 3. ZOOM EFFECTS --- */
@keyframes cabZoomIn {
    from { 
        opacity: 0; 
        transform: scale3d(0.3, 0.3, 0.3); 
    }
    50% { opacity: 1; }
}
.cab-zoom-in.cab-play { 
    animation-name: cabZoomIn; 
}

@keyframes cabZoomInUp {
    from {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3) translate3d(0, 80px, 0);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    }
}
.cab-zoom-up.cab-play { 
    animation-name: cabZoomInUp; 
}

/* --- 4. SLIDE EFFECTS --- */
@keyframes cabSlideInLeft {
    from { 
        transform: translate3d(-100%, 0, 0); 
        opacity: 0; 
    }
    to { 
        transform: translate3d(0, 0, 0); 
        opacity: 1; 
    }
}
.cab-slide-left.cab-play { 
    animation-name: cabSlideInLeft; 
}

@keyframes cabSlideInRight {
    from { 
        transform: translate3d(100%, 0, 0); 
        opacity: 0; 
    }
    to { 
        transform: translate3d(0, 0, 0); 
        opacity: 1; 
    }
}
.cab-slide-right.cab-play { 
    animation-name: cabSlideInRight; 
}

/* --- 5. ATTENTION SEEKER --- */
@keyframes cabPulse {
    0% { transform: scale3d(1, 1, 1); }
    50% { transform: scale3d(1.05, 1.05, 1.05); }
    100% { transform: scale3d(1, 1, 1); }
}
.cab-pulse.cab-play { 
    animation-name: cabPulse; 
    animation-iteration-count: infinite; 
}

/* --- 6. UTILITY CLASSES --- */
.cab-fast { animation-duration: 0.5s !important; }
.cab-slow { animation-duration: 2s !important; }

/* Menghargai pengaturan 'Reduced Motion' di OS User */
@media (prefers-reduced-motion: reduce) {
    .cab-anim {
        animation: none !important;
        opacity: 1 !important;
        transition: none !important;
    }
}