/* ===================================================================
   IMAGE OPTIMIZATION & PERFORMANCE CSS
   ================================================================= */

/* ===================================================================
   RESPONSIVE IMAGE LOADING
   ================================================================= */

/* Base responsive image rules */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Lazy loading placeholder */
img.lazy {
    opacity: 0;
    transition: opacity 0.3s;
}

img.lazy.loaded {
    opacity: 1;
}

/* Progressive loading effect */
img[data-src] {
    background: linear-gradient(90deg, #262626 25%, #404040 50%, #262626 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

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

/* ===================================================================
   IMAGE OPTIMIZATION BY TYPE
   ================================================================= */

/* Logo optimization */
.logo-image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Sports images optimization */
.sports-image {
    object-fit: cover;
    object-position: center;
    border-radius: 16px;
    transition: transform 0.3s ease;
}

.sports-image:hover {
    transform: scale(1.05);
}

/* Commentator images optimization */
.commentator-image {
    object-fit: cover;
    object-position: center top;
    border-radius: 16px;
}

/* Background images optimization */
.background-image {
    object-fit: cover;
    object-position: center;
    filter: brightness(0.7);
}

/* ===================================================================
   RESPONSIVE IMAGE SIZES
   ================================================================= */

/* Mobile optimization */
@media (max-width: 767px) {
    /* Reduce image quality on mobile for better performance */
    img {
        image-rendering: auto;
    }

    /* Stadium background mobile */
    .background-image {
        filter: brightness(0.5);
        opacity: 0.8;
    }

    /* Sports images mobile sizing */
    .sports-image {
        height: 120px !important;
        min-height: 120px;
    }

    /* Commentator images mobile */
    .commentator-image {
        width: 100px !important;
        height: 100px !important;
    }

    /* Logo mobile sizing */
    .logo-image {
        max-width: 100px;
        height: auto;
    }
}

/* Tablet optimization */
@media (min-width: 768px) and (max-width: 1023px) {
    .sports-image {
        height: 150px !important;
    }

    .commentator-image {
        width: 150px !important;
        height: 150px !important;
    }
}

/* Desktop optimization */
@media (min-width: 1024px) {
    /* High quality images for desktop */
    img {
        image-rendering: auto;
    }

    .sports-image:hover {
        transform: scale(1.03);
        box-shadow: 0 8px 25px rgba(131, 255, 101, 0.3);
    }
}

/* ===================================================================
   PERFORMANCE OPTIMIZATIONS
   ================================================================= */

/* GPU acceleration for image transforms */
.gpu-accelerated-image {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform;
}

/* Optimized image loading */
img[loading="lazy"] {
    content-visibility: auto;
}

/* WebP support detection */
.webp img {
    /* WebP optimizations when supported */
}

.no-webp img {
    /* Fallback optimizations */
}

/* ===================================================================
   ACCESSIBILITY IMPROVEMENTS
   ================================================================= */

/* High contrast mode */
@media (prefers-contrast: high) {
    img {
        filter: contrast(1.2);
    }

    .background-image {
        filter: brightness(0.4) contrast(1.3);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sports-image,
    img.lazy {
        transition: none !important;
        animation: none !important;
    }

    .sports-image:hover {
        transform: none !important;
    }

    img[data-src] {
        animation: none !important;
        background: #262626;
    }
}

/* ===================================================================
   PRINT STYLES
   ================================================================= */

@media print {
    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    .background-image {
        display: none !important;
    }
}

/* ===================================================================
   ERROR HANDLING
   ================================================================= */

/* Broken image fallback */
img::before {
    content: '';
    display: block;
    background: #262626;
    border-radius: 8px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

img::after {
    content: '🖼️ Image not available';
    display: block;
    color: #737373;
    text-align: center;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
}