/**
 * Lazy Loading CSS
 * Styles for lazy-loaded images and placeholders
 */

/* ============================================
   1. LAZY LOADING PLACEHOLDERS
   ============================================ */

/* Placeholder background for images being lazy loaded */
img[data-src],
img[data-bg] {
    /* background-color: #f0f0f0; */
    /* background-image: linear-gradient(90deg, */
            /* #f0f0f0 0%, */
            /* #e0e0e0 50%, */
            /* #f0f0f0 100%); */
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

/* Shimmer animation for loading state */
@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

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

/* ============================================
   2. LAZY LOADED IMAGES
   ============================================ */

/* Fade in animation for loaded images */
img.lazy-loaded {
    animation: fadeInImage 0.3s ease-in-out;
}

@keyframes fadeInImage {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ============================================
   3. NATIVE LAZY LOADING
   ============================================ */

/* Images with native lazy loading */
img[loading="lazy"] {
    /* Prevent layout shift */
    min-height: 1px;
    min-width: 1px;
}

/* ============================================
   4. RESPONSIVE IMAGES
   ============================================ */

/* Responsive image container */
.lazy-image-container {
    position: relative;
    overflow: hidden;
}

/* Aspect ratio preservation */
.lazy-image-container img {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================
   5. BACKGROUND IMAGES
   ============================================ */

/* Lazy loaded background images */
[data-bg] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ============================================
   6. LOADING STATE
   ============================================ */

/* Show loading indicator for slow connections */
@media (prefers-reduced-data: reduce) {

    img[data-src],
    img[data-bg] {
        animation: none;
        background-image: none;
        background-color: #e0e0e0;
    }
}

/* ============================================
   7. NOSCRIPT FALLBACK
   ============================================ */

/* Ensure images display without JavaScript */
noscript img {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================
   8. PERFORMANCE OPTIMIZATION
   ============================================ */

/* Prevent layout shift with aspect ratio */
img {
    aspect-ratio: auto;
}

/* Use contain for better performance */
img {
    contain: layout style paint;
}

/* ============================================
   9. MOBILE OPTIMIZATION
   ============================================ */

@media only screen and (max-width: 767px) {

    /* Disable shimmer animation on mobile for better performance */
    img[data-src],
    img[data-bg] {
        animation: none;
        background-image: none;
        background-color: #f0f0f0;
    }

    /* Faster fade-in on mobile */
    img.lazy-loaded {
        animation: fadeInImage 0.15s ease-in-out;
    }
}

/* ============================================
   10. ACCESSIBILITY
   ============================================ */

/* Ensure lazy loaded images are accessible */
img[data-src],
img[data-bg] {
    /* Maintain alt text visibility */
    font-size: 0;
}

/* ============================================
   11. DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {

    img[data-src],
    img[data-bg] {
        background-color: #333;
        background-image: linear-gradient(90deg,
                #333 0%,
                #444 50%,
                #333 100%);
    }
}

/* ============================================
   12. PRINT STYLES
   ============================================ */

@media print {

    img[data-src],
    img[data-bg] {
        animation: none;
        background-image: none;
    }

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