/**
 * Lazy Loading Styles
 * Provides blur-up effect and smooth transitions
 */

/* Lazy image default state - blurred placeholder */
.lazy-image {
    filter: blur(10px);
    opacity: 0.6;
    transition: filter 0.3s ease-out, opacity 0.3s ease-out;
    will-change: filter, opacity;
}

/* Loading state with subtle pulse animation */
.lazy-loading {
    filter: blur(8px);
    opacity: 0.7;
    animation: lazy-pulse 1.5s ease-in-out infinite;
}

@keyframes lazy-pulse {

    0%,
    100% {
        opacity: 0.7;
    }

    50% {
        opacity: 0.5;
    }
}

/* Loaded state - sharp and fully visible */
.lazy-loaded {
    filter: blur(0);
    opacity: 1;
}

/* Error state - reduced opacity with grayscale */
.lazy-error {
    filter: grayscale(100%) blur(0);
    opacity: 0.5;
}

/*
 * Blur-up technique with low-quality placeholder
 * Use this class on a container with a background placeholder
 */
.lazy-container {
    position: relative;
    overflow: hidden;
    background-color: var(--color-bg-secondary, #f3f4f6);
}

.lazy-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0) 100%);
    animation: lazy-shimmer 1.5s ease-in-out infinite;
    z-index: 1;
}

@keyframes lazy-shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.lazy-container img {
    position: relative;
    z-index: 2;
}

/*
 * Aspect ratio preservation
 * Prevents layout shift while images load
 */
.lazy-image-16-9 {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.lazy-image-4-3 {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.lazy-image-1-1 {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.lazy-image-square {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/*
 * Fade-in animation for loaded images
 */
@keyframes lazy-fade-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.lazy-fade {
    animation: lazy-fade-in 0.4s ease-out;
}

/*
 * Skeleton loader alternative
 * Use this instead of blur for a different loading effect
 */
.lazy-skeleton {
    background: linear-gradient(90deg,
            #f0f0f0 25%,
            #e0e0e0 50%,
            #f0f0f0 75%);
    background-size: 200% 100%;
    animation: lazy-skeleton 1.5s ease-in-out infinite;
}

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

    100% {
        background-position: -200% 0;
    }
}

/*
 * Print optimization
 * Remove blur and load all images when printing
 */
@media print {

    .lazy-image,
    .lazy-loading {
        filter: none !important;
        opacity: 1 !important;
    }
}

/*
 * Reduced motion preference
 * Respect user's motion preferences
 */
@media (prefers-reduced-motion: reduce) {

    .lazy-image,
    .lazy-loading,
    .lazy-loaded {
        transition: none !important;
        animation: none !important;
    }

    .lazy-container::before {
        animation: none !important;
    }
}

/*
 * Dark mode support
 */
@media (prefers-color-scheme: dark) {
    .lazy-container {
        background-color: #1f2937;
    }

    .lazy-skeleton {
        background: linear-gradient(90deg,
                #2d3748 25%,
                #4a5568 50%,
                #2d3748 75%);
        background-size: 200% 100%;
    }
}

/*
 * Image container fixes - ensures images fill their containers properly
 */
.pet-image-box img,
.shop-image-box img,
.lazy-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Ensure picture elements also fill their containers */
.pet-image-box picture,
.shop-image-box picture,
.lazy-image-wrapper picture {
    width: 100%;
    height: 100%;
    display: block;
}

.pet-image-box picture img,
.shop-image-box picture img,
.lazy-image-wrapper picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}