/**
 * Lazy Loading Styles for India Theme
 * Provides smooth fade-in animation for lazy-loaded images
 */

/* Initial state for images being lazy loaded */
img[loading="lazy"],
img[data-lazy-src] {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

/* Loaded state */
img.lazy-loaded,
img[loading="lazy"][src]:not([data-lazy-src]) {
    opacity: 1;
}

/* Native lazy loading support - fade in when loaded */
img[loading="lazy"] {
    animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Blur-up effect (optional, can be enabled for premium feel) */
img.lazy-blur {
    filter: blur(10px);
    transition: filter 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

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

/* Prevent layout shift - ensure images take space even before loading */
img[width][height] {
    height: auto;
}

/* Placeholder background for images */
img[data-lazy-src] {
    background-color: #f0f0f0;
    background-image: linear-gradient(
        90deg,
        #f0f0f0 0%,
        #e0e0e0 20%,
        #f0f0f0 40%,
        #f0f0f0 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

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

/* Disable lazy loading animations if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    img[loading="lazy"],
    img[data-lazy-src],
    img.lazy-loaded {
        opacity: 1;
        animation: none;
        transition: none;
    }
    
    img[data-lazy-src] {
        animation: none;
    }
}

/* Force eager loading for critical above-the-fold images */
img.no-lazy {
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
}

/* Ensure smooth rendering during scroll */
img[loading="lazy"] {
    will-change: opacity;
}