/* Lazy Loading Styles */

/* Initial state for lazy images */
img[data-src],
video[data-src],
[data-bg] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Loading state */
.lazy-loading {
    opacity: 0.5;
    background-color: #f0f0f0;
}

/* Loaded state */
.lazy-loaded {
    opacity: 1;
}

/* Optional: Add blur-up effect for better UX */
img[data-src].blur-up {
    filter: blur(5px);
    transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

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

/* Placeholder for images while loading */
img[data-src]::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

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

/* Remove placeholder when loaded */
.lazy-loaded::before {
    display: none;
}

/* Ensure native lazy loading images don't flash */
img.native-lazy {
    opacity: 1;
}