/* ==========================================================================
   ANIMATIONS.CSS - REPRODUCTOR ORO
   Todas las animaciones y transiciones del sistema
   ========================================================================== */

/* ==========================================================================
   1. UTILIDADES DE TRANSICIÓN
   ========================================================================== */
.transition-smooth {
    transition: all var(--transition-smooth);
}

.transition-slow {
    transition: all var(--transition-slow);
}

/* ==========================================================================
   2. FADE ANIMATIONS
   ========================================================================== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

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

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

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ==========================================================================
   3. SCALE ANIMATIONS
   ========================================================================== */
@keyframes scaleUp {
    from { transform: scale(0.95); }
    to { transform: scale(1); }
}

@keyframes scalePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ==========================================================================
   4. SLIDE ANIMATIONS
   ========================================================================== */
@keyframes slideUpNav {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDownHeader {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

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

/* ==========================================================================
   5. ROTATION ANIMATIONS
   ========================================================================== */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   6. PULSE ANIMATIONS
   ========================================================================== */
@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

@keyframes pulse-wave {
    0%, 100% {
        height: 15px;
        opacity: 0.6;
    }
    50% {
        height: 25px;
        opacity: 1;
    }
}

@keyframes pulse-loading {
    0%, 100% {
        box-shadow: 
            0 8px 25px rgba(0, 0, 0, 0.4),
            0 0 30px rgba(var(--primary-rgb), 0.3);
    }
    50% {
        box-shadow: 
            0 8px 25px rgba(0, 0, 0, 0.4),
            0 0 50px rgba(var(--primary-rgb), 0.6);
    }
}

@keyframes pulse-radar {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.3);
    }
}

/* ==========================================================================
   7. GLOW ANIMATIONS
   ========================================================================== */
@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 
            var(--shadow-depth),
            0 0 20px rgba(var(--primary-rgb), 0.3);
    }
    50% {
        box-shadow: 
            var(--shadow-depth),
            0 0 40px rgba(var(--primary-rgb), 0.6);
    }
}

@keyframes text-glow-pulse {
    0%, 100% {
        text-shadow: 0 0 10px rgba(var(--primary-rgb), 0.3);
    }
    50% {
        text-shadow: 0 0 20px rgba(var(--primary-rgb), 0.6);
    }
}

/* ==========================================================================
   8. SHAKE ANIMATIONS
   ========================================================================== */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes shake-vertical {
    0%, 100% { transform: translateY(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateY(-5px); }
    20%, 40%, 60%, 80% { transform: translateY(5px); }
}

/* ==========================================================================
   9. BOUNCE ANIMATIONS
   ========================================================================== */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

@keyframes bounce-scale {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ==========================================================================
   10. SKELETON LOADING
   ========================================================================== */
@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   11. MARQUEE ANIMATION
   ========================================================================== */
@keyframes marquee-infinite {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ==========================================================================
   12. BACKGROUND BREATH
   ========================================================================== */
@keyframes backgroundBreath {
    0% { transform: translate(-50%, -50%) scale(1.1); }
    100% { transform: translate(-50%, -50%) scale(1.25); }
}

/* ==========================================================================
   13. BANNER SLIDE UP
   ========================================================================== */
@keyframes bannerSlideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ==========================================================================
   14. RIPPLE EFFECT
   ========================================================================== */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* ==========================================================================
   15. UTILITY CLASSES
   ========================================================================== */
.animate-fade-in {
    animation: fadeIn 0.3s ease;
}

.animate-fade-in-up {
    animation: fadeInUp 0.4s ease;
}

.animate-scale-up {
    animation: scaleUp 0.3s ease;
}

/* Delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* ==========================================================================
   16. HOVER UTILITIES (Solo Desktop)
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
    .hover-lift:hover {
        transform: translateY(-5px);
    }
    
    .hover-glow:hover {
        box-shadow: 
            var(--shadow-depth),
            0 0 30px rgba(var(--primary-rgb), 0.5);
    }
    
    .hover-scale:hover {
        transform: scale(1.05);
    }
}

/* ==========================================================================
   17. WILL-CHANGE OPTIMIZATION
   ========================================================================== */
.will-change-transform {
    will-change: transform;
}

.will-change-opacity {
    will-change: opacity;
}

.will-change-filter {
    will-change: filter;
}

/* ==========================================================================
   18. ACCESIBILIDAD (Respeto por preferencias)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    /* Excepciones necesarias para UX */
    .skeleton {
        animation: skeleton-loading 1.5s infinite;
    }
}

/* ==========================================================================
   FIN DE ANIMATIONS.CSS
   ========================================================================== */