/**
 * Lazy Loading CSS - Simplified Implementation
 * Provides smooth fade-in effects for lazy-loaded images
 * Part of BSAPP-228: 100% Lazy Loading Implementation
 * Updated: 2025-08-15 - Removed blur effects per industry best practices
 */

/* Base lazy loading styles - Simple fade-in approach */
img[loading="lazy"] {
    /* Start with 0.8 opacity - visible by default with subtle fade-in */
    opacity: 0.8;
    transition: opacity 0.4s ease-in-out;
}

/* Loaded state - full opacity */
img[loading="lazy"].loaded,
img[loading="lazy"][data-loaded="true"],
img.loaded {
    opacity: 1;
}

/* Images that are already complete should be visible */
img[loading="lazy"][complete] {
    opacity: 1;
}

/* Grid item images - slightly faster transition */
.song-card img[loading="lazy"],
.video-card img[loading="lazy"],
.mixtape-card img[loading="lazy"],
.artist-card img[loading="lazy"] {
    transition: opacity 0.3s ease-out;
}

/* Swiper slide images - fast transitions */
.swiper-slide img[loading="lazy"] {
    transition: opacity 0.25s ease-out;
}

/* Hero section images - slower, smoother transitions */
.hero-background img[loading="lazy"],
.artist-hero img[loading="lazy"] {
    transition: opacity 0.5s ease-out;
}

/* Fade in animation for new content (infinite scroll) */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply fade-in to newly loaded infinite scroll items */
.song-card[data-new="true"],
.video-card[data-new="true"],
.mixtape-card[data-new="true"],
.artist-card[data-new="true"] {
    animation: fadeIn 0.4s ease-out;
}

/* Optimize for mobile devices */
@media (max-width: 768px) {
    /* Faster transitions on mobile */
    img[loading="lazy"] {
        transition: opacity 0.2s ease-out;
    }
}

/* Reduced motion preference - respect user settings */
@media (prefers-reduced-motion: reduce) {
    img[loading="lazy"],
    .song-card,
    .video-card,
    .mixtape-card,
    .artist-card {
        transition: none !important;
        animation: none !important;
    }
    
    /* Immediately show images for users with motion sensitivity */
    img[loading="lazy"] {
        opacity: 1 !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    /* Full opacity immediately in high contrast mode */
    img[loading="lazy"] {
        opacity: 1 !important;
        transition: none !important;
    }
}

/* Fallback for browsers that don't support loading attribute */
img:not([loading]) {
    opacity: 1;
}