/**
 * IMAGE PERFORMANCE OPTIMIZATION
 * Lazy loading, placeholder, and loading states
 */

/* ============================================
   IMAGE LOADING STATES
   ============================================ */

/* Only lazy-loaded images start hidden */
img[loading="lazy"] {
    /* Lazy loaded images start hidden, fade in when loaded */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

img[loading="lazy"].loaded {
    /* Lazy images fade in when loaded */
    opacity: 1;
}

/* High priority images show immediately */
img[fetchpriority="high"] {
    opacity: 1;
}

/* Images without loading attribute show immediately */
img:not([loading="lazy"]):not([fetchpriority="high"]) {
    opacity: 1;
}

/* ============================================
   PLACEHOLDER FOR LOADING IMAGES
   ============================================ */

img[loading="lazy"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(10, 77, 104, 0.1) 0%,
        rgba(136, 212, 209, 0.1) 50%,
        rgba(10, 77, 104, 0.1) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    z-index: -1;
}

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

/* ============================================
   HERO SECTION OPTIMIZATION
   ============================================ */

.hero-section {
    /* Ensure gradient shows immediately */
    background: linear-gradient(135deg, #0A4D68 0%, #053447 50%, #0A4D68 100%) !important;
}

.hero-background {
    /* Gradient overlay shows before image loads */
    background: linear-gradient(
        135deg,
        rgba(10, 77, 104, 0.95) 0%,
        rgba(5, 52, 71, 0.9) 50%,
        rgba(10, 77, 104, 0.95) 100%
    ) !important;
}

.hero-background img {
    /* Hero image loads but doesn't block */
    opacity: 0.2;
    transition: opacity 0.5s ease-in-out;
}

.hero-background img.loaded {
    opacity: 0.2;
}

/* ============================================
   LAZY LOADING INTERSECTION OBSERVER
   ============================================ */

/* Images fade in when they come into view */
img[loading="lazy"] {
    will-change: opacity;
}

/* ============================================
   MOBILE OPTIMIZATION
   ============================================ */

@media (max-width: 768px) {
    /* Reduce image quality hints on mobile */
    img[loading="lazy"] {
        image-rendering: -webkit-optimize-contrast;
    }
    
    /* Faster fade-in on mobile */
    img {
        transition: opacity 0.2s ease-in-out;
    }
}

/* ============================================
   PERFORMANCE HINTS
   ============================================ */

img[fetchpriority="high"] {
    /* Critical images load first */
    content-visibility: auto;
}

img[loading="lazy"] {
    /* Lazy images are lower priority */
    content-visibility: auto;
    contain-intrinsic-size: 300px 200px;
}