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

/* Images with data-src that haven't loaded yet */
img[data-src]:not([data-lazy-loaded]) {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    background-color: #f0f0f0;
    min-height: 100px;
}

/* Images that have been lazy loaded */
img[data-src][data-lazy-loaded],
img.lazy-loaded {
    opacity: 1;
}

/* Optional blur-up effect */
img[data-src]:not([data-lazy-loaded]) {
    filter: blur(5px);
}

img[data-src][data-lazy-loaded] {
    filter: blur(0);
}

/* For images in post content */
.entry-content img[data-src]:not([data-lazy-loaded]),
.post-content img[data-src]:not([data-lazy-loaded]) {
    width: 100%;
    height: auto;
}

/* Prevent layout shift */
img[data-src] {
    display: block;
}