/**
 * Estilos para Lazy Loading con efecto Blur
 *
 * Sistema de carga perezosa con transición suave
 *
 * @package ChicasIndependientes
 */

/* Imagen en estado de carga (blur) */
.lazy-image {
    transition: filter 0.5s ease-out, opacity 0.5s ease-out;
    will-change: filter, opacity;
}

/* Imagen cargada (sin blur) */
.lazy-image.loaded {
    filter: blur(0) !important;
    opacity: 1;
}

/* Estado inicial con blur */
.lazy-image.blur-sm {
    filter: blur(10px);
    opacity: 0.8;
}

/* Animación de pulso para placeholders mientras cargan */
@keyframes pulse-lazy {
    0%, 100% {
        opacity: 0.8;
    }
    50% {
        opacity: 0.6;
    }
}

.lazy-image.blur-sm {
    animation: pulse-lazy 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Optimización de rendimiento */
.lazy-image {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Fallback para navegadores sin soporte de filter */
@supports not (filter: blur(10px)) {
    .lazy-image.blur-sm {
        opacity: 0.5;
    }

    .lazy-image.loaded {
        opacity: 1;
    }
}