/* ==========================================================================
   IMAGE OPTIMIZATION & PROGRESSIVE LOADING
   ========================================================================== */

/* Image loading optimization */
img {
    /* Enable hardware acceleration for smoother loading */
    transform: translateZ(0);
    backface-visibility: hidden;
    
    /* Optimize image rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    
    /* Default loading state */
    transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Progressive loading states */
.img-loading {
    filter: blur(5px);
    opacity: 0.8;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
}

.img-loaded {
    filter: blur(0);
    opacity: 1;
}

/* Shimmer animation for loading images */
@keyframes loading-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Lazy loading placeholder */
.img-placeholder {
    background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    position: relative;
}

.img-placeholder::before {
    content: "📷";
    font-size: 2rem;
    opacity: 0.3;
}

/* Intersection Observer optimization */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Critical image optimization */
.critical-image {
    /* Prioritize critical images */
    will-change: transform;
    contain: layout style paint;
}

/* Activity section image optimization */
.activity-image img,
.lineup-card img {
    /* Enable GPU acceleration */
    transform: translate3d(0, 0, 0);
    
    /* Smooth transitions */
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Social media icons optimization */
.icon {
    /* Optimize rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* WebP support detection - removed invalid syntax */
.webp .activity-image img {
    /* WebP format will be handled via JavaScript */
    background: transparent;
}

/* Responsive image sizing */
.responsive-img {
    width: 100%;
    height: auto;
    max-width: 100%;
    
    /* Prevent layout shift */
    aspect-ratio: attr(width) / attr(height);
}

/* Performance-optimized image containers */
.img-container {
    position: relative;
    overflow: hidden;
    
    /* GPU acceleration */
    transform: translateZ(0);
    will-change: transform;
    
    /* Prevent reflow */
    contain: layout style paint;
}

/* Blur-up technique for progressive loading */
.blur-up {
    filter: blur(5px);
    transition: filter 400ms ease-out;
}

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

/* Optimize lineup card images */
.lineup-card {
    /* Prevent memory leaks */
    contain: strict;
    
    /* Optimize scrolling performance */
    will-change: transform;
}

/* Mobile-specific optimizations */
@media (max-width: 768px) {
    .activity-image img,
    .lineup-card img {
        /* Reduce quality on mobile to save bandwidth */
        image-rendering: optimizeSpeed;
    }
    
    /* Reduce animation complexity on mobile */
    .img-loading {
        animation: none;
        background: #f0f0f0;
    }
}

/* High DPI display optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    .activity-image img,
    .lineup-card img {
        /* Better quality for retina displays */
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Preload critical images */
.preload-critical {
    /* Ensure critical images are prioritized */
    will-change: transform;
    contain: layout style paint;
}

/* Connection-aware loading */
@media (prefers-reduced-data: reduce) {
    .activity-image img,
    .lineup-card img {
        /* Use lower quality on slow connections */
        filter: contrast(0.9) brightness(1.1);
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .img-loading,
    .fade-in,
    .blur-up {
        animation: none;
        transition: none;
    }
}

/* Error handling for failed image loads */
img[src=""],
img:not([src]) {
    opacity: 0;
    visibility: hidden;
}

img[alt]:after {
    /* Show alt text when image fails */
    content: attr(alt);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px;
    border-radius: 4px;
    font-size: 12px;
}