/**
 * 🖼️ Bangalirhaat — Eager Image Loading Optimization
 * ────────────────────────────────────────────────────────
 * Ensures all images load immediately with optimal rendering
 */

/* ────────────────────────────────────────────────────────
   Force Eager Loading
   ──────────────────────────────────────────────────────── */
img {
    /* Prevent lazy loading */
    loading: eager !important;
    
    /* Optimize rendering */
    display: block;
    max-width: 100%;
    height: auto;
    
    /* Prevent CLS (Cumulative Layout Shift) */
    background-color: var(--bg-secondary, #f5f5f5);
    
    /* Smooth loading */
    opacity: 1;
    transition: opacity 0.2s ease-out;
}

/* Placeholder while loading */
img:not([src]),
img[src=""],
img[loading="lazy"] {
    background-color: var(--bg-secondary, #f5f5f5);
    min-height: 120px;
    opacity: 0.8;
}

/* Once loaded */
img[loading="eager"][src]:not([src=""]) {
    opacity: 1;
}

/* ────────────────────────────────────────────────────────
   Picture Element Optimization
   ──────────────────────────────────────────────────────── */
picture {
    display: block;
    line-height: 0; /* Remove extra space */
}

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

/* ────────────────────────────────────────────────────────
   Background Images
   ──────────────────────────────────────────────────────── */
[style*="background-image"] {
    /* Ensure background images load immediately */
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* ────────────────────────────────────────────────────────
   Hero & Critical Images (Load First)
   ──────────────────────────────────────────────────────── */
.hero-slider img,
.hero-image,
.featured-banner img,
.banner-image,
.product-hero img,
[data-critical-image] {
    /* Load immediately */
    loading: eager !important;
    
    /* Higher priority rendering */
    will-change: opacity;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Preload first image immediately */
.carousel:first-of-type img:first-child,
.slider:first-of-type img:first-child,
.hero-slider:first-of-type img:first-child {
    loading: eager !important;
    importance: high;
}

/* ────────────────────────────────────────────────────────
   Product Images (Load Fast)
   ──────────────────────────────────────────────────────── */
.product-grid img,
.product-card img,
.product-image,
.product-thumb,
[data-product-image] {
    loading: eager !important;
    importance: medium;
}

/* ────────────────────────────────────────────────────────
   Thumbnail Images (Lower Priority)
   ──────────────────────────────────────────────────────── */
.thumbnail,
.thumb,
.gallery-thumb,
.carousel-thumb {
    /* These can be lower priority but still eager */
    loading: eager !important;
    importance: low;
}

/* ────────────────────────────────────────────────────────
   Responsive Images
   ──────────────────────────────────────────────────────── */
img[srcset] {
    loading: eager !important;
}

picture source {
    loading: eager !important;
}

/* ────────────────────────────────────────────────────────
   Image Containers (Prevent CLS)
   ──────────────────────────────────────────────────────── */
.image-wrapper,
.img-container,
.image-box,
figure {
    position: relative;
    background-color: var(--bg-secondary, #f5f5f5);
    overflow: hidden;
}

/* Aspect ratio for images */
.image-aspect-1x1 { aspect-ratio: 1 / 1; }
.image-aspect-3x2 { aspect-ratio: 3 / 2; }
.image-aspect-16x9 { aspect-ratio: 16 / 9; }
.image-aspect-4x3 { aspect-ratio: 4 / 3; }

/* ────────────────────────────────────────────────────────
   Optimize for Different Connection Speeds
   ──────────────────────────────────────────────────────── */

/* Fast connection: Load all images immediately */
@media (prefers-reduced-data: no-preference) {
    img {
        loading: eager !important;
    }
}

/* Slow connection: Still load eagerly but with lower quality option */
@media (prefers-reduced-data: reduce) {
    img[data-src-low] {
        content: attr(data-src-low);
    }
}

/* ────────────────────────────────────────────────────────
   Prevent Flash of Unstyled Image (FOUI)
   ──────────────────────────────────────────────────────── */
img[src],
img.loaded {
    animation: fadeInImage 0.3s ease-out;
}

@keyframes fadeInImage {
    from {
        opacity: 0.7;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ────────────────────────────────────────────────────────
   Loading State (While images load)
   ──────────────────────────────────────────────────────── */
img:not([loading="eager"]),
img:not([src]),
img[src=""] {
    /* Skeleton loader effect */
    background: linear-gradient(
        90deg,
        var(--bg-secondary, #f5f5f5) 25%,
        var(--bg-secondary-lighter, #e0e0e0) 50%,
        var(--bg-secondary, #f5f5f5) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

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

/* Stop shimmer when loaded */
img[src][src!=""]:not([src*="placeholder"]) {
    animation: none;
    background: none;
}

/* ────────────────────────────────────────────────────────
   Dark Mode Support
   ──────────────────────────────────────────────────────── */
[data-theme="dark"] img:not([src]),
[data-theme="dark"] img[src=""],
[data-theme="dark"] .image-wrapper {
    background-color: var(--bg-secondary-dark, #2a2a2a);
}

/* ────────────────────────────────────────────────────────
   Mobile Optimization
   ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    img {
        /* Force eager on all mobile images */
        loading: eager !important;
        
        /* Ensure proper display */
        display: block;
        width: 100%;
    }

    .image-wrapper {
        width: 100%;
        max-width: 100%;
    }
}

/* ────────────────────────────────────────────────────────
   Accessibility
   ──────────────────────────────────────────────────────── */
img[alt=""],
img:not([alt]) {
    /* Decorative images should still load eagerly */
    loading: eager !important;
}

/* ────────────────────────────────────────────────────────
   Performance: Prevent Jank
   ──────────────────────────────────────────────────────── */
img {
    /* GPU acceleration for smooth loading */
    transform: translateZ(0);
    will-change: auto;
}

img.loading {
    will-change: opacity;
}

/* ────────────────────────────────────────────────────────
   Reduced Motion Support
   ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    img {
        animation: none !important;
        transition: none !important;
    }
}

/* ────────────────────────────────────────────────────────
   Print Optimization
   ──────────────────────────────────────────────────────── */
@media print {
    img {
        loading: eager !important;
        max-width: 100%;
        page-break-inside: avoid;
    }
}