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

/* Base styles for lazy-loaded images */
img[loading="lazy"],
[data-bg] {
    transition: opacity 0.3s ease-in-out;
}

/* Loaded state */
img[loading="lazy"].loaded,
[data-bg].loaded {
    opacity: 1;
}

/* Error state */
img[loading="lazy"].error {
    opacity: 0.5;
    filter: grayscale(100%);
}

/* Placeholder while loading */
img[loading="lazy"]:not(.loaded) {
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Ensure images don't cause layout shift */
img[loading="lazy"] {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Picture element support */
picture {
    display: block;
}

picture img {
    display: block;
    width: 100%;
    height: auto;
}

/* Responsive images */
.responsive-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Image container to prevent layout shift */
.image-container {
    position: relative;
    overflow: hidden;
}

.image-container::before {
    content: '';
    display: block;
    padding-top: 56.25%; /* 16:9 aspect ratio by default */
}

.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Aspect ratio utilities */
.aspect-ratio-1-1::before { padding-top: 100%; }
.aspect-ratio-4-3::before { padding-top: 75%; }
.aspect-ratio-16-9::before { padding-top: 56.25%; }
.aspect-ratio-21-9::before { padding-top: 42.86%; }

/* Blur-up effect for progressive loading */
.blur-up {
    filter: blur(10px);
    transition: filter 0.3s ease-in-out;
}

.blur-up.loaded {
    filter: blur(0);
}

/* Fade-in effect */
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Prevent cumulative layout shift */
img[width][height] {
    height: auto;
}

/* WebP support detection */
.no-webp picture source[type="image/webp"] {
    display: none;
}