/* Lazy Load Styles - Smooth Loading Experience */
img[data-src] {
    background: #f0f0f0;
    min-height: 50px;
}

img.lazy {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

img.lazy-loaded {
    opacity: 1;
}

/* Placeholder animation while loading */
img[data-src]:not(.lazy-loaded) {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% {
        background-color: #f0f0f0;
    }
    50% {
        background-color: #e0e0e0;
    }
}

/* WebP fallback for no-webp browsers */
.no-webp img[data-srcset] {
    /* Fallback handled by JavaScript */
}