/**
 * AccuWeather Blocks - Global Animations
 * 
 * Sistema de animaciones reutilizable para todos los bloques
 * Uso: Simplemente agrega las clases 'fade-in-up' o 'fade-in-right' a cualquier elemento
 */

/* =============================================
   CONFIGURACIÓN BASE
   ============================================= */
.fade-in-up,
.fade-in-right {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

/* =============================================
   FADE IN UP - De abajo hacia arriba
   ============================================= */
.fade-in-up {
    transform: translateY(40px);
}

.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================
   FADE IN RIGHT - De izquierda a derecha
   ============================================= */
.fade-in-right {
    transform: translateX(-40px);
}

.fade-in-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* =============================================
   VARIANTES DE VELOCIDAD (opcional)
   ============================================= */

/* Rápida - 0.5s */
.fade-in-up.fade-fast,
.fade-in-right.fade-fast {
    transition-duration: 0.5s;
}

/* Lenta - 1.2s */
.fade-in-up.fade-slow,
.fade-in-right.fade-slow {
    transition-duration: 1.2s;
}

/* =============================================
   DELAYS OPCIONALES - Para animaciones escalonadas
   ============================================= */
.fade-delay-1 {
    transition-delay: 0.1s;
}

.fade-delay-2 {
    transition-delay: 0.2s;
}

.fade-delay-3 {
    transition-delay: 0.3s;
}

.fade-delay-4 {
    transition-delay: 0.4s;
}

.fade-delay-5 {
    transition-delay: 0.5s;
}

/* =============================================
   PERFORMANCE - Reducir motion para usuarios con preferencias
   ============================================= */
@media (prefers-reduced-motion: reduce) {
    .fade-in-up,
    .fade-in-right {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =============================================
   RESPONSIVE - Ajustar distancia en móviles
   ============================================= */
@media (max-width: 768px) {
    .fade-in-up {
        transform: translateY(30px);
    }
    
    .fade-in-right {
        transform: translateX(-30px);
    }
    
    .fade-in-up.is-visible,
    .fade-in-right.is-visible {
        transform: translate(0, 0);
    }
}