/**
 * Lazy Loading Styles
 * Adds smooth fade-in effect for lazy loaded images
 */

/* Images with lazy loading */
img[loading="lazy"] {
    opacity: 1;
    transition: opacity 0.3s ease-in;
}

/* Placeholder while loading */
img[loading="lazy"]:not([src]) {
    opacity: 0.3;
    background: #f0f0f0;
}

/* Optional: Add blur effect while loading (better UX) */
img[loading="lazy"].loading {
    filter: blur(5px);
    transition: filter 0.3s ease-in;
}

img[loading="lazy"].loaded {
    filter: blur(0);
}