/**
 * @file: lazy-loading.css
 * @dependencies: vanilla-lazyload.min.js
 * @created: 2025-01-27
 */

/* Lazybox container for aspect ratio and placeholder management */
.lazybox {
    position: relative;
    display: block;
    overflow: hidden;
    background-color: transparent;
    aspect-ratio: var(--ar, 16/9);
    border-radius: inherit;
}

/* SVG icons - grey background during loading, transparent when loaded */
.lazybox.icon,
.lazybox[style*="width: 20px"],
.lazybox[style*="width: 24px"],
.lazybox[style*="width: 32px"],
.lazybox[style*="width: 40px"],
.lazybox[style*="height: 20px"],
.lazybox[style*="height: 24px"],
.lazybox[style*="height: 32px"],
.lazybox[style*="height: 40px"] {
    background-color: transparent;
    transition: background-color 0.3s ease-in-out;
}

/* Ensure proper sizing for different aspect ratios */
.lazybox[style*="width"] {
    aspect-ratio: unset;
}

.lazybox[style*="height"] {
    aspect-ratio: unset;
}

/* Image inside lazybox */
.lazybox img {
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    transition: opacity 0.4s ease-in-out, filter 0.4s ease-in-out, transform 0.4s ease-in-out;
    opacity: 0;
    filter: blur(0);
    transform: scale(1);
}

/* Blur-up effect for LQIP images (when src is set but not loaded yet) */
.lazybox img[src]:not(.loaded) {
    opacity: 1;
    filter: blur(15px);
    transform: scale(1.1);
}

/* Loading state - show LQIP with blur */
.lazybox.loading img[src] {
    opacity: 1;
    filter: blur(15px);
    transform: scale(1.1);
}

/* Loaded state - clear and sharp */
.lazybox.loaded img,
.lazybox img.loaded {
    opacity: 1 !important;
    filter: blur(0) !important;
    transform: scale(1) !important;
}

/* Remove background for loaded SVG icons - smooth transition to transparent */
.lazybox.loaded.icon,
.lazybox.loaded[style*="width: 20px"],
.lazybox.loaded[style*="width: 24px"],
.lazybox.loaded[style*="width: 32px"],
.lazybox.loaded[style*="width: 40px"],
.lazybox.loaded[style*="height: 20px"],
.lazybox.loaded[style*="height: 24px"],
.lazybox.loaded[style*="height: 32px"],
.lazybox.loaded[style*="height: 40px"] {
    background-color: transparent !important;
}

/* Hero image specific styles - always loaded */
.lazybox.hero-image-container img {
    opacity: 1 !important;
    filter: blur(0) !important;
    transform: scale(1) !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Skeleton shimmer effect */
.lazybox.skeleton::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
    );
    animation: shimmer 1.5s infinite;
    z-index: 1;
}

/* Skeleton shimmer animation */
@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Remove skeleton when image loads */
.lazybox.loaded.skeleton::before {
    display: none;
}

/* Loading state for images without LQIP */
.lazybox:not(.loaded) img[data-src] {
    opacity: 0;
}

/* Ensure proper display for different image types */
.lazybox img[src=""],
.lazybox img:not([src]) {
    opacity: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .lazybox img {
        transition-duration: 0.2s;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .lazybox {
        border: 1px solid #000;
    }
    
    .lazybox.skeleton::before {
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 0, 0, 0.1) 50%,
            transparent 100%
        );
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .lazybox img {
        transition: opacity 0.1s ease-in-out;
        filter: none;
        transform: none;
    }
    
    .lazybox.skeleton::before {
        animation: none;
        background: var(--ph, #f0f0f0);
    }
}

/* Focus styles for accessibility */
.lazybox:focus-within {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Error state for failed image loads */
.lazybox.error {
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lazybox.error::after {
    content: '📷';
    font-size: 2rem;
    opacity: 0.5;
}

/* Specific styles for different content types */
.lazybox.hero-image {
    border-radius: 8px;
}

.lazybox.blog-image {
    border-radius: 4px;
}

.lazybox.avatar {
    border-radius: 50%;
}

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

/* Form icons and social icons - ensure grey background during loading */
.lazybox .form-icon,
.lazybox .social-icon {
    background-color: transparent;
    transition: background-color 0.3s ease-in-out;
}

.lazybox.loaded .form-icon,
.lazybox.loaded .social-icon {
    background-color: transparent !important;
}

/* Performance optimizations */
.lazybox {
    contain: layout style paint;
    will-change: transform;
}

.lazybox img {
    contain: layout style paint;
    will-change: transform;
}

/* Ensure proper stacking context */
.lazybox {
    z-index: 0;
}

.lazybox img {
    z-index: 1;
}

.lazybox.skeleton::before {
    z-index: 2;
}