/* Lazy Loading Styles */

/* Placeholder for images that haven't loaded yet */
img[data-src] {
    background-color: #f3f4f6;
    background-image: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

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

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

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

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

/* Placeholder content for loading images */
img[data-src]::before {
    content: "🖼️";
    font-size: 2rem;
    color: #9ca3af;
    display: block;
}

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

.lazy-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.lazy-image-container:hover img {
    transform: scale(1.05);
}