/* Image Optimization and Loading States */

/* Image Loading Placeholder */
img {
    display: block;
}

/* Lazy loaded images - fade in animation */
img.loaded {
    animation: imageLoad 0.4s ease-in-out;
}

@keyframes imageLoad {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Placeholder background while loading */
img[data-src] {
    background-color: #f0f0f0;
    background-image: linear-gradient(
        90deg,
        #f0f0f0 0%,
        #e0e0e0 50%,
        #f0f0f0 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

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

/* Dark mode placeholder */
.dark img[data-src] {
    background-color: #2a2a2a;
    background-image: linear-gradient(
        90deg,
        #2a2a2a 0%,
        #3a3a3a 50%,
        #2a2a2a 100%
    );
}

/* Optimize images for performance */
img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    /* Enable hardware acceleration for image rendering */
    will-change: transform;
}

/* Critical images (hero) - load immediately */
img[fetchpriority="high"] {
    /* Faster initial paint for critical images */
    content-visibility: auto;
}

/* Below-the-fold images - load later */
img[loading="lazy"] {
    content-visibility: auto;
}

/* Prevent cumulative layout shift */
img {
    aspect-ratio: auto;
}

/* Optimize aspect ratios for common image containers */
.aspect-square {
    aspect-ratio: 1 / 1;
}

.aspect-\[4\/5\] {
    aspect-ratio: 4 / 5;
}

/* Decoding optimization - handled by HTML attributes */
/* Decoding is set via HTML img attributes, not CSS */

/* Image containers with background color to prevent flash */
.bg-\[\#EAEAEA\] {
    background-color: #EAEAEA;
    overflow: hidden;
}

.dark .bg-\[\#1a1a1a\] {
    background-color: #1a1a1a;
}

/* Optimize image display for different screen sizes */
@media (max-width: 768px) {
    img {
        /* Reduce motion on mobile for better performance */
        animation-duration: 0.3s;
    }
}

/* Improve perceived performance with contain */
img[loading="lazy"] {
    contain: layout style paint;
}

/* Hero image optimization */
.img-zoom {
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.group:hover .img-zoom {
    transform: scale(1.05);
}

/* Image loading state transitions */
img[loading="eager"] {
    /* Prioritize rendering for modal images */
    image-rendering: high-quality;
}

/* Smooth fade-in on color change */
@keyframes fadeInImage {
    from {
        opacity: 0.8;
    }
    to {
        opacity: 1;
    }
}

img[decoding="sync"] {
    animation: fadeInImage 0.3s ease-out;
}

/* Loading skeleton for images */
.image-loading-placeholder {
    background: linear-gradient(
        90deg,
        #e0e0e0 0%,
        #f0f0f0 50%,
        #e0e0e0 100%
    );
    background-size: 200% 100%;
    animation: shimmerFast 1.5s infinite;
}

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

.dark .image-loading-placeholder {
    background: linear-gradient(
        90deg,
        #2a2a2a 0%,
        #3a3a3a 50%,
        #2a2a2a 100%
    );
}

/* Reduce animation complexity for performance */
@media (prefers-reduced-motion: reduce) {
    img.loaded,
    img[data-src],
    .img-zoom,
    img[decoding="sync"],
    .image-loading-placeholder {
        animation: none !important;
        transition: none !important;
    }
}

/* Optimize text rendering while loading fonts */
/* Note: @font-face is defined in main stylesheets with proper src and font-family */

/* Reduce jank during image loading - use content-visibility instead */
img {
    content-visibility: auto;
}