/* ===================================================
   ANIMATIONS.CSS - Animaciones y transiciones
   =================================================== */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Transiciones de Alpine.js */
.fade-in { animation: fadeIn 0.4s ease; }
.fade-out { animation: fadeIn 0.3s ease reverse; }
.modal-enter { animation: scaleIn 0.3s ease; }
.modal-leave { animation: scaleIn 0.2s ease reverse; }