/* 
    ============================================
    KING OF THE RING 2.0 - Animaciones
    ============================================
    Animaciones suaves inspiradas en Apple y Rockstar Games
    Efectos: fade, slide, parallax ligero
*/

/* 
    ============================================
    ANIMACIONES BASE
    ============================================
*/

/* 
    Fade In - Aparecer gradualmente
    Usado para elementos que entran en viewport
*/
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 
    Fade Up - Aparecer desde abajo
    Efecto elegante de entrada
*/
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 
    Fade Down - Aparecer desde arriba
    Variante del fade up
*/
@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 
    Fade Left - Aparecer desde la izquierda
*/
@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 
    Fade Right - Aparecer desde la derecha
*/
@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 
    Scale In - Aparecer con efecto de escala
    Útil para tarjetas y elementos destacados
*/
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 
    ============================================
    ESTADOS INICIALES
    ============================================
    Los elementos con data-animate empiezan ocultos
    y se animan cuando entran en viewport (via JS)
*/
[data-animate] {
    opacity: 0;
    /* 
        La animación se aplica via JavaScript
        cuando el elemento entra en viewport
    */
}

/* 
    ============================================
    CLASES DE ANIMACIÓN
    ============================================
    Aplicadas dinámicamente por JavaScript
*/
.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

.animate-fade-up {
    animation: fadeUp 0.8s ease-out forwards;
}

.animate-fade-down {
    animation: fadeDown 0.8s ease-out forwards;
}

.animate-fade-left {
    animation: fadeLeft 0.8s ease-out forwards;
}

.animate-fade-right {
    animation: fadeRight 0.8s ease-out forwards;
}

.animate-scale-in {
    animation: scaleIn 0.6s ease-out forwards;
}

/* 
    ============================================
    ANIMACIONES CONTINUAS
    ============================================
    Para elementos que se animan constantemente
*/

/* 
    Pulse - Efecto de pulso sutil
    Para elementos que necesitan atención
*/
@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* 
    Glow - Efecto de brillo
    Para elementos destacados (botones, títulos)
*/
@keyframes glow {
    0%, 100% {
        text-shadow: 0 0 20px rgba(255, 51, 51, 0.5);
    }
    50% {
        text-shadow: 0 0 30px rgba(255, 51, 51, 0.8), 
                     0 0 40px rgba(255, 51, 51, 0.4);
    }
}

.animate-glow {
    animation: glow 3s ease-in-out infinite;
}

/* 
    Float - Flotación suave
    Para elementos decorativos
*/
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* 
    ============================================
    PARALLAX LIGERO
    ============================================
    Efecto parallax sutil para profundidad
    Aplicado via JavaScript en scroll
*/
.parallax-slow {
    transition: transform 0.3s ease-out;
}

.parallax-medium {
    transition: transform 0.2s ease-out;
}

.parallax-fast {
    transition: transform 0.1s ease-out;
}

/* 
    ============================================
    TRANSICIONES DE HOVER
    ============================================
    Mejoras visuales al pasar el mouse
*/

/* 
    Hover Lift - Elevación al hover
    Para tarjetas y botones
*/
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* 
    Hover Scale - Escala al hover
    Para imágenes y elementos destacados
*/
.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* 
    Hover Glow - Brillo al hover
    Para elementos con acento
*/
.hover-glow {
    transition: box-shadow 0.3s ease, text-shadow 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(255, 51, 51, 0.4);
}

/* 
    ============================================
    ANIMACIONES DE SCROLL
    ============================================
    Efectos que se activan durante el scroll
*/

/* 
    Scroll Reveal - Revelar al hacer scroll
    Aplicado automáticamente a elementos con data-animate
*/
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* 
    ============================================
    DELAYS DE ANIMACIÓN
    ============================================
    Para animaciones secuenciales (stagger effect)
*/
.animate-delay-100 {
    animation-delay: 0.1s;
}

.animate-delay-200 {
    animation-delay: 0.2s;
}

.animate-delay-300 {
    animation-delay: 0.3s;
}

.animate-delay-400 {
    animation-delay: 0.4s;
}

.animate-delay-500 {
    animation-delay: 0.5s;
}

.animate-delay-600 {
    animation-delay: 0.6s;
}

/* 
    ============================================
    DURACIONES DE ANIMACIÓN
    ============================================
    Control de velocidad de animaciones
*/
.animate-duration-fast {
    animation-duration: 0.3s;
}

.animate-duration-normal {
    animation-duration: 0.6s;
}

.animate-duration-slow {
    animation-duration: 1s;
}

/* 
    ============================================
    EASING FUNCTIONS
    ============================================
    Curvas de animación personalizadas
*/
.animate-ease-in {
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.animate-ease-out {
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.animate-ease-in-out {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 
    ============================================
    ANIMACIONES ESPECÍFICAS DEL HERO
    ============================================
*/

/* 
    Hero Title Animation - Entrada dramática del título
*/
@keyframes heroTitle {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.hero-title.animate {
    animation: heroTitle 1s ease-out forwards;
}

/* 
    ============================================
    PERFORMANCE OPTIMIZATIONS
    ============================================
    Optimizaciones para mejor rendimiento
*/

/* 
    Usar will-change solo cuando sea necesario
    para mejorar rendimiento de animaciones
*/
[data-animate] {
    will-change: opacity, transform;
}

/* 
    Desactivar will-change después de la animación
    (manejado por JavaScript)
*/
.animation-complete {
    will-change: auto;
}

/* 
    Usar transform y opacity para animaciones
    (mejor rendimiento que cambiar position/width/height)
*/
.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 
    ============================================
    REDUCIR ANIMACIONES (ACCESSIBILITY)
    ============================================
    Respetar preferencias del usuario
*/
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    [data-animate] {
        opacity: 1;
    }
}