/* Progressive Image Loading Styles for Optimized Performance */

/* Aspect Ratio Containers - Prevent CLS */
.aspect-ratio-box {
    position: relative;
    width: 100%;
    overflow: hidden;
}

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

.aspect-ratio-box.aspect-16-9 {
    aspect-ratio: 16/9;
}

.aspect-ratio-box.aspect-3-2 {
    aspect-ratio: 3/2;
}

/* Legacy browser support for aspect-ratio */
@supports not (aspect-ratio: 1) {
    .aspect-ratio-box.aspect-4-3::before {
        content: "";
        display: block;
        padding-top: 75%; /* 3:4 ratio */
    }

    .aspect-ratio-box.aspect-16-9::before {
        content: "";
        display: block;
        padding-top: 56.25%; /* 9:16 ratio */
    }

    .aspect-ratio-box.aspect-3-2::before {
        content: "";
        display: block;
        padding-top: 66.67%; /* 2:3 ratio */
    }

    .aspect-ratio-box > * {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* Progressive Image Container */
.progressive-image {
    position: relative;
    background: var(--color-surface-secondary, #1a1a1a);
}

/* LQIP Blur Effect */
.progressive-image[data-lqip-loaded="true"] {
    background-size: cover;
    background-position: center;
    filter: blur(20px);
    transform: scale(1.1); /* Prevent blur edges from showing */
}

/* Main Image Styles */
.progressive-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease-in-out;
}

/* Loading State */
.progressive-image.is-loading img {
    opacity: 0;
}

/* Loaded State */
.progressive-image.is-loaded img {
    opacity: 1;
}

/* Remove blur when image loads */
.progressive-image.is-loaded {
    filter: none;
    transform: none;
}

/* Skeleton Loading Animation */
@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.progressive-image.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-surface-secondary, #1a1a1a) 0%,
        var(--color-surface-primary, #0a0a0a) 50%,
        var(--color-surface-secondary, #1a1a1a) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
}

/* Gallery Slide Optimization */
.slide-image-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.slide-image-container picture {
    display: contents; /* Make picture element not affect layout */
}

.slide-main-image {
    width: auto;
    height: auto;
    max-width: 80vw;
    max-height: 80vh;
    object-fit: contain;
}

/* Preload next slide hint */
.slide[data-slide-index="1"] img {
    content-visibility: auto;
    contain-intrinsic-size: 1600px 1067px;
}

/* Performance optimizations for hidden slides */
.fp-slide:not(.active) img {
    content-visibility: auto;
}

/* Hero Image Specific Optimizations */
.hero-image {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .progressive-image img {
        transition: none;
    }

    .progressive-image.skeleton {
        animation: none;
        background: var(--color-surface-secondary, #1a1a1a);
    }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .slide-main-image {
        max-width: 90vw;
        max-height: 70vh;
    }

    /* Reduce quality expectations on mobile */
    .progressive-image[data-network="slow"] img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* High DPI Display Optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .progressive-image img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Print Styles */
@media print {
    .progressive-image {
        filter: none !important;
        transform: none !important;
    }

    .progressive-image img {
        opacity: 1 !important;
    }
}