/* Lazy Loading Styles */
[data-bg] {
    background-color: #f8f9fa;
    background-image: none !important;
    transition: background-image 0.3s ease-in-out;
}

[data-bg].loaded {
    background-image: var(--bg-image) !important;
}

img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

img[loading="lazy"].loaded,
img[loading="lazy"]:not([src]) {
    opacity: 1;
}

/* Image optimization */
.img-fluid {
    max-width: 100%;
    height: auto;
}

/* WebP support fallback */
.webp .no-webp {
    display: none;
}

.no-webp .webp-only {
    display: none;
}

/* Performance optimizations */
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}