/* ==========================================================================
   IMAGE OPTIMIZATION CSS
   Enterprise-grade image loading optimizations for faster page loads
   ========================================================================== */

/* --------------------------------------------------------------------------
   LAZY LOADING FADE-IN EFFECT
   Images start invisible and fade in when loaded
   -------------------------------------------------------------------------- */
img[loading="lazy"] {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

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

/* Immediate display for eager-loaded images */
img:not([loading="lazy"]) {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   CONTENT VISIBILITY OPTIMIZATION
   Reduces rendering work for off-screen content
   -------------------------------------------------------------------------- */
.gallery-grid,
.news-grid,
.team-grid,
.programs-grid,
.projects-grid,
.partners-grid {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* Gallery section - many images, significant optimization */
#galleryPage .gallery-grid {
    contain-intrinsic-size: auto 1200px;
}

/* Team section */
.team-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

/* Partners section */
.partners-carousel-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 400px;
}

/* --------------------------------------------------------------------------
   IMAGE RENDERING OPTIMIZATION
   -------------------------------------------------------------------------- */
img {
    /* Optimize rendering performance */
    image-rendering: auto;

    /* Prevent layout shift by maintaining aspect ratio */
    height: auto;

    /* Optimize compositing */
    will-change: opacity;

    /* Force GPU acceleration for smooth animations */
    backface-visibility: hidden;
}

/* High-priority images - no animation delay */
img[fetchpriority="high"] {
    opacity: 1;
    transform: none;
    transition: none;
}

/* --------------------------------------------------------------------------
   PLACEHOLDER / SKELETON LOADING
   Optional: Use for even smoother experience
   -------------------------------------------------------------------------- */
.img-wrapper {
    position: relative;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.05) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    overflow: hidden;
}

.img-wrapper img.loaded+.placeholder {
    display: none;
}

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

    100% {
        background-position: 200% 0;
    }
}

/* --------------------------------------------------------------------------
   RESPONSIVE IMAGE OPTIMIZATION
   -------------------------------------------------------------------------- */
/* Hide images below a certain size breakpoint for performance */
@media (max-width: 480px) {

    /* Reduce image quality expectations on mobile for faster loads */
    img {
        image-rendering: optimizeSpeed;
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    img[loading="lazy"] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .img-wrapper {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   GALLERY SPECIFIC OPTIMIZATIONS
   -------------------------------------------------------------------------- */
.gallery-item img {
    /* Ensure smooth transitions in gallery */
    transition: opacity 0.4s ease-out, transform 0.3s ease;
}

.gallery-item img.loaded {
    opacity: 1;
}

/* Gallery lightbox optimization */
.lightbox img {
    /* Don't lazy load lightbox images - they need instant display */
    opacity: 1;
    will-change: transform;
}

/* --------------------------------------------------------------------------
   CAROUSEL OPTIMIZATION
   -------------------------------------------------------------------------- */
.carousel-slide img {
    /* Preload carousel images but optimize rendering */
    will-change: transform, opacity;
}

.carousel-slide:not(.active) img {
    /* Reduce paint for non-visible slides */
    visibility: hidden;
}

.carousel-slide.active img,
.carousel-slide.prev img,
.carousel-slide.next img {
    /* Show active and adjacent slides */
    visibility: visible;
}

/* --------------------------------------------------------------------------
   NEWS IMAGES OPTIMIZATION
   -------------------------------------------------------------------------- */
.news-card .news-image img {
    transition: opacity 0.4s ease, transform 0.5s ease;
}

.news-card:hover .news-image img {
    transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   CRITICAL ABOVE-THE-FOLD STYLES
   Ensure fast LCP and immediate visibility
   -------------------------------------------------------------------------- */
.hero-carousel .carousel-slide:first-child img,
.hero-left img,
.logo-image,
.footer-logo-image {
    /* Critical images - no lazy loading animation */
    opacity: 1 !important;
    transform: none !important;
}

/* --------------------------------------------------------------------------
   HERO TEXT - IMMEDIATE VISIBILITY
   Ensure hero section text loads instantly without animation delay
   -------------------------------------------------------------------------- */
.hero-content,
.hero-overline,
.hero-title,
.hero-description,
.btn-hero-outline,
.hero-quote,
.hero-badge,
.hero-actions,
.scroll-indicator {
    /* Force immediate visibility on page load */
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}