/**
 * Estilos para Lazy Loading de Imágenes
 */

/* Imagen con lazy loading pendiente */
img.lazy {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

/* Imagen lazy loading completada */
img.lazy-loaded {
    opacity: 1;
}

/* Error al cargar imagen lazy */
img.lazy-error {
    opacity: 0.3;
    background-color: #f0f0f0;
    border: 1px dashed #ccc;
}

/* Placeholder mientras carga */
img.lazy:not(.lazy-loaded) {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Blur effect durante carga (opcional) */
img.lazy.blur-up {
    filter: blur(10px);
}

img.lazy-loaded.blur-up {
    filter: blur(0);
    transition: filter 0.3s ease-in, opacity 0.3s ease-in;
}

/* Aspect ratio containers para prevenir layout shift */
.lazy-container {
    position: relative;
    overflow: hidden;
}

.lazy-container::before {
    content: '';
    display: block;
    padding-bottom: 56.25%; /* 16:9 aspect ratio por defecto */
}

.lazy-container.aspect-1-1::before {
    padding-bottom: 100%; /* 1:1 */
}

.lazy-container.aspect-4-3::before {
    padding-bottom: 75%; /* 4:3 */
}

.lazy-container.aspect-3-2::before {
    padding-bottom: 66.67%; /* 3:2 */
}

.lazy-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Skeleton loader alternativo */
.lazy-skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.2) 20%,
        rgba(255, 255, 255, 0.5) 60%,
        rgba(255, 255, 255, 0)
    );
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Modo oscuro soporte */
@media (prefers-color-scheme: dark) {
    img.lazy:not(.lazy-loaded) {
        background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    }
    
    img.lazy-error {
        background-color: #1a1a1a;
        border-color: #444;
    }
}

/* Performance: reducir animaciones en preferencias del sistema */
@media (prefers-reduced-motion: reduce) {
    img.lazy,
    img.lazy-loaded,
    img.lazy:not(.lazy-loaded) {
        animation: none;
        transition: none;
    }
}