/**
 * Image Optimization Styles
 * Styles for lazy loading, progressive loading, and image states
 */

/* ===== LAZY LOADING STYLES ===== */

/* Base styles for lazy-loaded images */
img.lazy {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    background-color: #f3f4f6;
    min-height: 200px; /* Prevent layout shift */
}

img.lazy.image-loaded {
    opacity: 1;
}

/* Loading state */
img.image-loading {
    opacity: 0.5;
    filter: blur(5px);
    transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
}

/* Loaded state */
img.image-loaded {
    opacity: 1;
    filter: none;
}

/* Error state */
img.image-error {
    opacity: 0.5;
    background-color: #fee2e2;
    border: 1px dashed #ef4444;
}

/* ===== PROGRESSIVE LOADING (BLUR-UP) ===== */

.progressive-image {
    filter: blur(10px);
    transform: scale(1.05);
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.progressive-image.image-loaded {
    filter: blur(0);
    transform: scale(1);
}

/* ===== FADE-IN ANIMATION ===== */

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

img[loading="lazy"] {
    animation: fadeIn 0.3s ease-in-out;
}

/* ===== PLACEHOLDER STYLES ===== */

.image-placeholder {
    background: linear-gradient(
        90deg,
        #f3f4f6 0%,
        #e5e7eb 50%,
        #f3f4f6 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    min-height: 200px;
    display: block;
}

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

/* ===== RESPONSIVE IMAGE CONTAINERS ===== */

.image-container {
    position: relative;
    overflow: hidden;
    background-color: #f3f4f6;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===== SKELETON LOADER (Alternative to placeholder) ===== */

.image-skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
}

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

/* ===== OPTIMIZED IMAGE WRAPPER ===== */

.optimized-image-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 100%;
    max-width: 100%;
}

.optimized-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== ASPECT RATIO CONTAINER (Prevent Layout Shift) ===== */

.aspect-ratio-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio by default */
    overflow: hidden;
}

.aspect-ratio-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Aspect ratio variants */
.aspect-ratio-16-9 {
    padding-bottom: 56.25%;
}

.aspect-ratio-4-3 {
    padding-bottom: 75%;
}

.aspect-ratio-1-1 {
    padding-bottom: 100%;
}

.aspect-ratio-21-9 {
    padding-bottom: 42.857%;
}

/* ===== HERO IMAGE OPTIMIZATION ===== */

.hero-image img {
    will-change: transform;
    transform: translateZ(0); /* Force GPU acceleration */
}

/* ===== GALLERY IMAGE OPTIMIZATION ===== */

.gallery-item img {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.gallery-item img.image-loading {
    transform: scale(0.95);
}

.gallery-item img.image-loaded {
    transform: scale(1);
}

/* ===== SERVICE CARD IMAGE OPTIMIZATION ===== */

.service-image img {
    transition: transform 0.5s ease-in-out, opacity 0.3s ease-in-out;
}

.service-image img.image-loading {
    transform: scale(1.05);
}

.service-image img.image-loaded {
    transform: scale(1);
}

/* ===== MOBILE OPTIMIZATIONS ===== */

@media (max-width: 768px) {
    /* Reduce blur on mobile for better performance */
    .progressive-image {
        filter: blur(5px);
    }
    
    /* Faster transitions on mobile */
    img.lazy,
    .progressive-image {
        transition-duration: 0.2s;
    }
    
    /* Smaller placeholder on mobile */
    .image-placeholder {
        min-height: 150px;
    }
}

/* ===== REDUCED MOTION (Accessibility) ===== */

@media (prefers-reduced-motion: reduce) {
    img.lazy,
    .progressive-image,
    .image-skeleton,
    .image-placeholder {
        animation: none;
        transition: none;
    }
    
    img.image-loading {
        filter: none;
    }
}

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

@media print {
    img.lazy,
    .image-placeholder,
    .image-skeleton {
        opacity: 1 !important;
        filter: none !important;
        animation: none !important;
    }
}