/* Lazy Loading Styles */
img.lazy, img[data-src] {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    background-color: #f0f0f0;
}

img.lazy-loaded {
    opacity: 1;
}

img.lazy-error {
    opacity: 1;
    background: #f0f0f0 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><text x="50%" y="50%" text-anchor="middle" dy=".3em" fill="%23999">Failed to load</text></svg>') center no-repeat;
}

/* Placeholder shimmer effect */
img.lazy:not(.lazy-loaded), img[data-src]:not(.lazy-loaded) {
    background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* Background images lazy loading */
div[data-bg] {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    background-color: #f0f0f0;
    background-size: cover;
    background-position: center;
}

div[data-bg].lazy-loaded {
    opacity: 1;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}