/* Lazy Loading Styles */

/* Placeholder styling for lazy images */
img.lazy,
img.lazy-placeholder {
    background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
    background-size: 200% 100%;
    animation: lazy-shimmer 1.5s ease-in-out infinite;
}

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

/* Fade-in animation when image loads */
img.lazy-loaded {
    animation: lazy-fade-in 0.3s ease-in;
}

@keyframes lazy-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Error state styling */
img.lazy-error {
    background: #f8d7da;
    border: 1px solid #f5c2c7;
    position: relative;
}

img.lazy-error::after {
    content: '⚠ Failed to load';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #842029;
    font-size: 12px;
    white-space: nowrap;
}

/* Loading state */
img.lazy-loading {
    opacity: 0.7;
}

/* Ensure images maintain aspect ratio during loading */
img.lazy[width][height] {
    height: auto;
}

/* Print styles - ensure all images are visible */
@media print {
    img.lazy,
    img.lazy-placeholder,
    img.lazy-loading {
        background: none;
        animation: none;
    }
}