/* Image Optimization CSS
 * Improves image loading performance, prevents layout shifts, and enhances UX
 */

/* Base image optimization */
img {
    max-width: 100%;
    height: auto;
    display: block;
    
    /* Improve image rendering quality */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    
    /* Smooth transitions */
    transition: opacity 0.3s ease-in-out;
}

/* Prevent layout shift with explicit dimensions */
img[width][height] {
    aspect-ratio: attr(width) / attr(height);
}

/* Picture element optimization */
picture {
    display: block;
    line-height: 0;
}

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

/* Lazy loading placeholder with shimmer effect */
img[loading="lazy"]:not([src*=".avif"]):not([src*=".webp"]) {
    background: linear-gradient(
        90deg,
        #f0f0f0 0%,
        #f8f8f8 20%,
        #f0f0f0 40%,
        #f0f0f0 100%
    );
    background-size: 200% 100%;
    animation: shimmerLoading 1.8s ease-in-out infinite;
}

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

/* Fade in effect when image loads */
img {
    opacity: 0;
    animation: fadeInImage 0.3s ease-in forwards;
}

@keyframes fadeInImage {
    to {
        opacity: 1;
    }
}

/* Immediate display for above-fold images */
img[loading="eager"],
img[fetchpriority="high"],
.slider-section img {
    animation: none;
    opacity: 1;
}

/* Exclude specific images from optimization */

/* Responsive images */
img.img-fluid,
img.img-responsive {
    max-width: 100%;
    height: auto;
}

/* Object-fit utilities for better image scaling */

/* Loading state improvements */
img:not([src]) {
    visibility: hidden;
}

/* Prevent broken image icon */
img::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f5f5f5;
}

img::after {
    content: '📷 Image';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    color: #999;
    text-align: center;
}

/* Remove placeholder content when image loads successfully */
img[src]:not([src=""]) {
    &::before,
    &::after {
        display: none;
    }
}

/* Picture source optimization */
picture source {
    display: none;
}

/* WebP/AVIF detection fallback */

/* Performance optimization for background images */
[style*="background-image"] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: auto;
}

/* Lazy loaded background images */

/* Optimize hero images */

.slider-bg-media img {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Thumbnail optimization */

.card-img-top {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Avatar/profile images */

/* Icon images */

.feature-icon img {
    width: auto;
    height: auto;
    max-width: 64px;
    max-height: 64px;
}

/* Logo optimization */
.logo img,
.navbar-brand img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Print optimization - don't print decorative images */
@media print {
    img[aria-hidden="true"],
    .bg-image,
    .slider-decor {
        display: none !important;
    }
    
    img {
        page-break-inside: avoid;
        max-width: 100% !important;
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    img,
    picture {
        animation: none !important;
        transition: none !important;
    }
}

/* Dark mode optimization */
@media (prefers-color-scheme: dark) {
    img:not([src*=".svg"]) {
        filter: brightness(0.9);
    }
    
    img[loading="lazy"]:not([src*=".avif"]):not([src*=".webp"]) {
        background: linear-gradient(
            90deg,
            #2a2a2a 0%,
            #333333 20%,
            #2a2a2a 40%,
            #2a2a2a 100%
        );
    }
}

/* Mobile optimization */
@media (max-width: 768px) {
    /* Reduce quality on mobile to save bandwidth */
    img {
        image-rendering: auto;
    }
    
    /* Smaller placeholders on mobile */
    img[loading="lazy"] {
        min-height: 200px;
    }
}

/* Retina/High DPI optimization */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Loading skeleton for image containers */

@keyframes skeletonLoading {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

/* Fade-in loaded images */

@keyframes imageReveal {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Blur-up technique for progressive loading */

/* Responsive image grid optimization */

/* Critical CSS for above-fold images */