/* =============================================================================
   IMAGE LAZY LOADING STYLES
   Simple opacity transitions for lazy loaded images
   ============================================================================= */

/* Loading state for images */
.lazy-loading-img {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Loaded state */
.lazy-loaded-img {
    opacity: 1;
    animation: lazy-fade-in 0.3s ease;
}

/* Error state */
.lazy-error-img {
    opacity: 0.5;
    filter: grayscale(100%);
}

/* Fade in animation */
@keyframes lazy-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Disable animations for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .lazy-loaded-img {
        animation: none;
    }
}