/* css/lazy-loading.css - Styles pour lazy loading des images */

/* Placeholder pendant le chargement */
img[data-src]:not(.lazy-loaded) {
    background: linear-gradient(
        90deg,
        #2a2a2a 0%,
        #353535 50%,
        #2a2a2a 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    opacity: 1 !important; /* Forcer la visibilité du placeholder */
    position: relative;
    z-index: 1;
}

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

/* Image chargée avec fade-in */
img.lazy-loaded {
    /* Animation gérée par game-cards.css pour éviter les conflits */
    position: relative;
    z-index: 1;
}

/* Image en erreur */
img.lazy-error {
    opacity: 0.5;
    filter: grayscale(100%);
    background: #3a2a2a;
}

/* Améliorer le rendu pendant le chargement */
img[data-src] {
    will-change: opacity, transform;
}

/* Optimisation pour les images de couverture */
.game-card img[data-src]:not(.lazy-loaded),
.banner-slide img[data-src]:not(.lazy-loaded) {
    aspect-ratio: 3 / 4; /* Ratio standard des covers IGDB */
    object-fit: cover;
}

/* Blur-up effect pour les images de haute qualité */
img.lazy-placeholder {
    filter: blur(10px);
    transition: filter var(--transition-normal) ease-out;
}

img.lazy-loaded.lazy-placeholder {
    filter: blur(0);
}

/* Performance: GPU acceleration */
img[data-src],
img.lazy-loaded {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Responsive: différentes tailles d'images */
@media (max-width: 768px) {
    img[data-src]:not(.lazy-loaded) {
        background-size: 400% 100%;
    }
}

/* Mode sombre optimisé */
body.dark-mode img[data-src]:not(.lazy-loaded) {
    background: linear-gradient(
        90deg,
        #1a1a1a 0%,
        #252525 50%,
        #1a1a1a 100%
    );
}

/* Accessibilité: réduire les animations si préféré */
@media (prefers-reduced-motion: reduce) {
    img[data-src]:not(.lazy-loaded) {
        animation: none;
        background: var(--surface-secondary, #2a2a2a);
    }
    
    img.lazy-loaded {
        animation: none;
    }
}