/* ============================================================
   FILE: assets/css/animation.css
   CHỨC NĂNG: Hiệu ứng animation
   ============================================================ */

/* Fade In */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in {
    animation: fadeIn 0.4s ease forwards;
}

/* Slide In */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
.slide-up {
    animation: slideUp 0.4s ease forwards;
}

/* Pulse Glow */
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(0, 229, 255, 0.2); }
    50% { box-shadow: 0 0 30px rgba(0, 229, 255, 0.5); }
}
.pulse-glow {
    animation: pulseGlow 2s infinite;
}

/* Spin */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.spin {
    animation: spin 1s linear infinite;
}

/* Scale Press */
.scale-press:active {
    transform: scale(0.95);
    transition: transform 0.1s;
}

/* Stagger children */
.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.10s; }
.stagger > *:nth-child(3) { animation-delay: 0.15s; }
.stagger > *:nth-child(4) { animation-delay: 0.20s; }
.stagger > *:nth-child(5) { animation-delay: 0.25s; }
.stagger > *:nth-child(6) { animation-delay: 0.30s; }

/* Ripple effect cho button */
.ripple {
    position: relative;
    overflow: hidden;
}
.ripple::after {
    content: '';
    position: absolute;
    width: 100%;
    padding-top: 100%;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    transform: scale(0);
    opacity: 0;
    left: 50%;
    top: 50%;
    transform-origin: center;
}
.ripple:active::after {
    animation: ripple-effect 0.5s ease;
}
@keyframes ripple-effect {
    from {
        transform: scale(0);
        opacity: 0.6;
    }
    to {
        transform: scale(2.5);
        opacity: 0;
    }
}