/* Image Optimization Styles */
/* Optimized for performance and smooth loading */

/* Image Loading States */
.img-loading {
    background: linear-gradient(135deg, #f5f5f5 25%, #e0e0e0 50%, #f5f5f5 75%);
    background-size: 400% 400%;
    animation: shimmer 2s ease-in-out infinite;
    position: relative;
    overflow: hidden;
    min-height: 200px; /* Prevent layout shift */
}

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

/* Image loaded state */
.img-loaded {
    animation: fadeIn 0.4s ease-out;
}

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

/* Error state */
.img-error {
    background: #f5f5f5;
    position: relative;
}

.img-error::after {
    content: '⚠️';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: #999;
}

/* Prevent layout shift for lazy loaded images */
img[data-src] {
    display: block;
    width: 100%;
    height: auto;
    background: #f0f0f0;
}

/* Aspect ratio preservation */
img[style*="aspect-ratio"] {
    width: 100%;
    height: auto;
}

/* Service card images optimization */
[data-service-card] img {
    will-change: transform, filter;
    transition: filter 0.4s ease-out, transform 0.4s ease-out;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Blur effect for loading images */
.img-loading[src*="data:image"] {
    filter: blur(20px);
    transform: scale(1.1);
}

/* Performance optimizations */
img {
    /* Use GPU acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    
    /* Optimize rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    
    /* Prevent text selection on images */
    user-select: none;
    -webkit-user-select: none;
    
    /* Optimize paint operations */
    contain: layout style paint;
}

/* High-priority images */
img[data-critical="true"] {
    /* Force immediate rendering */
    content-visibility: auto;
    contain-intrinsic-size: 500px 300px;
}

/* Smooth scroll performance */
#scroll-container img {
    /* Reduce repaints during scroll */
    will-change: auto;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .img-loading {
        min-height: 150px;
    }
    
    /* Reduce blur on mobile for performance */
    .img-loading[src*="data:image"] {
        filter: blur(10px);
    }
    
    /* Disable complex animations on mobile */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* Service cards specific optimizations */
.services-cards-container img {
    /* Optimize for horizontal scroll */
    contain: size layout style paint;
    content-visibility: auto;
}

/* Video section optimization */
.hero-video-wrapper img {
    /* Video poster optimization */
    object-fit: cover;
    object-position: center;
}

/* Progressive enhancement for modern browsers */
@supports (content-visibility: auto) {
    .services-cards-container > * {
        content-visibility: auto;
        contain-intrinsic-size: 507px 600px;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .img-loading {
        animation: none;
        background: #f5f5f5;
    }
    
    .img-loaded {
        animation: none;
    }
    
    img {
        transition: none !important;
    }
}

/* High resolution displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure crisp images on retina displays */
    img {
        image-rendering: -webkit-optimize-contrast;
        -webkit-font-smoothing: subpixel-antialiased;
    }
}

/* Print styles */
@media print {
    img[data-src] {
        display: none;
    }
    
    .img-loading {
        display: none;
    }
}

/* Accessibility improvements */
img:not([alt]) {
    outline: 2px solid red;
}

/* Loading skeleton for better UX */
.img-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

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

/* Optimize paint operations for smooth scrolling */
.optimized-for-scroll {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
}

/* Force hardware acceleration on problematic elements */
.force-gpu {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}