/**
 * Lazy Loading CSS
 * Styles for lazy-loaded images with smooth transitions
 */

/* Lazy loading image states */
img.lazy-loading {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.05) 25%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0.05) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

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

/* Loading animation */
@keyframes loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Noscript fallback - show images if JS is disabled */
noscript img {
    opacity: 1 !important;
}