/* 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 */
img.no-img-optimization {
    opacity: 1 !important;
    animation: none !important;
    background: none !important;
}

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

/* Object-fit utilities for better image scaling */
.img-cover {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.img-contain {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.img-fill {
    object-fit: fill;
    width: 100%;
    height: 100%;
}

/* 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 */
@supports (image-set: url('test.avif') 1x) {
    .avif-supported {
        /* AVIF is supported */
    }
}

@supports (image-set: url('test.webp') 1x) {
    .webp-supported {
        /* WebP is supported */
    }
}

/* 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 */
.bg-lazy {
    background-image: none !important;
    background-color: #f0f0f0;
    animation: shimmerLoading 1.8s ease-in-out infinite;
}

.bg-lazy.loaded {
    animation: none;
    background-color: transparent;
}

/* Optimize hero images */
.hero-image,
.slider-bg-media img,
.banner-image {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Thumbnail optimization */
.thumbnail,
.card-img-top,
.post-thumbnail {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Avatar/profile images */
.avatar,
.profile-img,
.user-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
}

/* Icon images */
.icon-img,
.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,
    .bg-lazy {
        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 */
.image-skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 37%,
        #f0f0f0 63%
    );
    background-size: 400% 100%;
    animation: skeletonLoading 1.4s ease infinite;
}

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

/* Fade-in loaded images */
.image-loaded {
    animation: imageReveal 0.5s ease-in;
}

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

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

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

/* Responsive image grid optimization */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.image-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Critical CSS for above-fold images */
.critical-image {
    content-visibility: auto;
    contain-intrinsic-size: 800px 600px;
}