/* Lazy Loading Styles - Image Optimization */

/* Blur-up effect for lazy loading images */
.blur-up {
    filter: blur(20px);
    transform: scale(1.05);
    transition: filter 0.3s ease, transform 0.3s ease;
    background-size: cover;
    background-position: center;
}

/* Loading state */
.lazy-loading {
    opacity: 0.6;
    animation: pulse 1.5s ease-in-out infinite;
}

/* Loaded state - smooth reveal */
.lazy-loaded {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
    animation: fadeIn 0.4s ease;
}

/* Error state */
.lazy-error {
    opacity: 0.5;
    filter: grayscale(100%);
    position: relative;
}

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

/* Pulse animation for loading */
@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.8;
    }
}

/* Fade in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Image container optimization */
.img-container {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

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

/* Aspect ratio containers */
.aspect-ratio-16-9 {
    aspect-ratio: 16 / 9;
}

.aspect-ratio-4-3 {
    aspect-ratio: 4 / 3;
}

.aspect-ratio-1-1 {
    aspect-ratio: 1 / 1;
}

.aspect-ratio-21-9 {
    aspect-ratio: 21 / 9;
}

/* Skeleton placeholder (alternative to blur) */
.skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 0%,
        #e0e0e0 20%,
        #f0f0f0 40%,
        #f0f0f0 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

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

/* Progressive image loading */
.progressive-image {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.progressive-image__placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(20px);
    transform: scale(1.1);
    transition: opacity 0.3s ease;
}

.progressive-image__full {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.progressive-image__full.loaded {
    opacity: 1;
}

.progressive-image__full.loaded + .progressive-image__placeholder {
    opacity: 0;
}

/* Responsive images optimization */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Native lazy loading support */
img[loading="lazy"] {
    /* Browser will handle lazy loading */
}

/* Performance hints */
img {
    /* Hint to browser about image importance */
    content-visibility: auto;
}

/* Critical images - load immediately */
img[data-critical="true"],
.hero img,
.hero-section img {
    content-visibility: visible;
}

/* Prevent layout shift */
img:not([width]):not([height]) {
    /* Add aspect-ratio if dimensions are unknown */
    aspect-ratio: attr(width) / attr(height);
}

/* Smooth scrolling for better lazy loading UX */
html {
    scroll-behavior: smooth;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .blur-up,
    .lazy-loaded,
    .progressive-image__placeholder,
    .progressive-image__full {
        transition: none !important;
        animation: none !important;
    }
}

/* Dark mode support for placeholders */
@media (prefers-color-scheme: dark) {
    .skeleton {
        background: linear-gradient(
            90deg,
            #2a2a2a 0%,
            #3a3a3a 20%,
            #2a2a2a 40%,
            #2a2a2a 100%
        );
    }

    .lazy-error {
        background: #1a1a1a;
    }
}

/* Performance optimization for large images */
@media (min-width: 1920px) {
    img {
        /* Suggest to browser that large images can be lower priority */
        loading: lazy;
    }
}

/* Mobile optimization */
@media (max-width: 768px) {
    .blur-up {
        /* Reduce blur on mobile for better performance */
        filter: blur(10px);
    }
}