/* * DANA Premium Animation Suite
 * Menggunakan cubic-bezier untuk efek gerakan yang lebih organik dan premium.
 */

/* 1. Konten Halaman (Fade & Slide Up) */
.fade-in {
    animation: fadeSlideUp 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes fadeSlideUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 2. Tombol & Icon (Pop In / Bouncy) */
.pop-in {
    animation: popIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}

@keyframes popIn {
    0% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

/* 3. Notifikasi Toast (Slide In from Right) */
.slide-in-right {
    animation: slideInRight 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes slideInRight {
    0% { transform: translateX(120%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

.slide-out-right {
    animation: slideOutRight 0.4s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;
}

@keyframes slideOutRight {
    0% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(120%); opacity: 0; }
}

/* 4. Loader Pulse (Logo Denyut) */
.pulse-premium {
    animation: pulsePremium 2s infinite ease-in-out;
}

@keyframes pulsePremium {
    0% { transform: scale(0.9); opacity: 0.8; }
    50% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.8; }
}

/* 5. Shimmer Effect (Untuk Loading Skeleton) */
.shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* 6. Scan Button Pulse (Ring Efek Biru) */
.pulse-custom {
    box-shadow: 0 0 0 0 rgba(17, 142, 234, 0.7);
    animation: pulseBlue 2s infinite;
}

@keyframes pulseBlue {
    0% { box-shadow: 0 0 0 0 rgba(17, 142, 234, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(17, 142, 234, 0); }
    100% { box-shadow: 0 0 0 0 rgba(17, 142, 234, 0); }
}

/* 7. Staggered Delay Classes 
   Gunakan class ini pada item list agar muncul bergantian
*/
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }