/**
 * Lazy Loading Styles
 * Smooth transitions for images as they load
 */

img.lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    background-color: #f0f0f0;
}

img.lazy-loaded {
    opacity: 1;
}

img.lazy-error {
    opacity: 0.5;
    filter: grayscale(100%);
}

/* Loading animation for lazy images */
@keyframes shimmer {
    0% {
        background-position: -468px 0;
    }
    100% {
        background-position: 468px 0;
    }
}

img.lazy-load {
    background: linear-gradient(
        to right,
        #f0f0f0 0%,
        #e0e0e0 20%,
        #f0f0f0 40%,
        #f0f0f0 100%
    );
    background-size: 800px 100%;
    animation: shimmer 1.5s infinite linear;
}

img.lazy-loaded {
    background: none;
    animation: none;
}