/* Lazy Loading Styles */

/* Image loading state */
img.lazy-loading {
    opacity: 0.3;
    transition: opacity 0.3s ease-in-out;
    filter: blur(5px);
}

/* Image loaded state */
img.lazy-loaded {
    opacity: 1;
    filter: none;
    transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
}

/* Image load error state */
img.lazy-load-error {
    opacity: 0.5;
    background-color: #f8f9fa;
    border: 1px dashed #dee2e6;
}

/* Prevent layout shift */
img[data-lazy-src] {
    min-height: 100px;
    background-color: #f8f9fa;
    display: block;
}

/* Progressive loading - low quality placeholder */
img[data-progressive-src] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}