/**
 * Progressive Image Loader Styles
 * Provides smooth blur-up effect and loading states
 */

/* Base image styles with aspect ratio preservation */
.progressive-image-container {
    position: relative;
    overflow: hidden;
    background-color: #F8F9FC;
}

/* Loading state - blurred placeholder */
img.progressive-image-loading {
    filter: blur(20px);
    transform: scale(1.1);
    transition: none;
}

/* Loaded state - remove blur smoothly */
img.progressive-image-loaded {
    filter: blur(0);
    transform: scale(1);
    transition: filter 0.3s ease-out, transform 0.3s ease-out;
}

/* Revealed state - full opacity */
img.progressive-image-revealed {
    opacity: 1;
}

/* Error state */
img.progressive-image-error {
    background-color: #F0F2F6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'%3E%3C/circle%3E%3Cpolyline points='21 15 16 10 5 21'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Skeleton loader for cards without images */
.skeleton-loader {
    background: linear-gradient(
        90deg,
        #F0F2F6 0%,
        #E9EAF2 50%,
        #F0F2F6 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

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

/* Enhanced loading spinner for large images */
.progressive-image-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid #E9EAF2;
    border-top-color: #6758FF;
    border-radius: 50%;
    animation: spinner-rotation 0.8s linear infinite;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.progressive-image-loading ~ .progressive-image-spinner {
    opacity: 1;
}

@keyframes spinner-rotation {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Smooth fade-in for images */
img[loading="lazy"],
img[data-src] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

img[loading="lazy"].progressive-image-revealed,
img.progressive-image-revealed {
    opacity: 1;
}

/* Prevent layout shift with aspect ratio */
.img-aspect-ratio {
    position: relative;
    width: 100%;
    padding-bottom: 62.5%; /* 267:167 = 62.5% for explore cards */
    overflow: hidden;
    background-color: #F8F9FC;
}

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

/* Material card aspect ratio */
.material-aspect-ratio {
    position: relative;
    width: 100%;
    padding-bottom: 62.5%; /* 267.20:167.00 */
    overflow: hidden;
    background-color: #F2F1F1;
}

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

/* Performance optimization: will-change for smoother animations */
img.progressive-image-loading,
img.progressive-image-loaded {
    will-change: filter, transform;
}

img.progressive-image-revealed {
    will-change: auto;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    img.progressive-image-loading,
    img.progressive-image-loaded {
        transition: none;
        filter: none;
        transform: none;
    }

    .skeleton-loader {
        animation: none;
    }

    .progressive-image-spinner {
        animation: none;
    }
}

/* Print optimization - show all images */
@media print {
    img.progressive-image-loading {
        filter: none;
        transform: none;
    }
}