/* 
 * Lazy Loading & Image Optimization CSS
 * Styling for lazy loading states, transitions, and optimized image display
 */

/* Critical navbar styling to prevent layout shift */
.navbar-custom {
    background: var(--navbar-bg, #0F172A) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: var(--shadow-soft, 0 12px 36px rgba(15, 23, 42, 0.03)) !important;
    min-height: 64px !important;
    top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure navbar stays at top during CSS loading */
.navbar {
    position: relative !important;
}

.navbar.sticky-top {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1040 !important;
}

/* Base Lazy Image Styles */
.lazy-image {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    background-color: #f8f9fa;
}

.lazy-loaded {
    opacity: 1;
}

.lazy-error {
    opacity: 0.7;
    filter: grayscale(100%);
}

/* Loading Spinner Styles */
.lazy-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.lazy-image-container {
    position: relative;
    overflow: hidden;
    background-color: #f8f9fa;
}

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

.lazy-loaded.lazy-image-container::before {
    animation: none;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Progressive Image Loading */
.progressive-image {
    transition: filter 0.3s ease-in-out;
}

.progressive-small {
    filter: blur(5px);
}

.progressive-large {
    filter: blur(0);
}

/* Background Lazy Loading */
.lazy-background {
    background-color: #f8f9fa;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-color 0.3s ease-in-out;
}

.lazy-background.bg-loaded {
    background-color: transparent;
}

.bg-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(248, 249, 250, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.bg-loaded .bg-loading-overlay {
    display: none;
}

.bg-content {
    position: relative;
    z-index: 1;
}

/* Video Lazy Loading */
.lazy-video {
    background-color: #f8f9fa;
    min-height: 200px;
}

.lazy-loaded.lazy-video {
    background-color: transparent;
}

/* Responsive Image Container */
.responsive-image-container {
    width: 100%;
    max-width: 100%;
}

.responsive-image-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* Aspect Ratio Preservation */
.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-3-2 {
    aspect-ratio: 3/2;
}

/* Image Gallery Lazy Loading */
.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background-color: #f8f9fa;
}

.gallery-item .lazy-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Card Image Lazy Loading */
.card .lazy-image {
    border-radius: 8px 8px 0 0;
    object-fit: cover;
}

/* Profile Picture Lazy Loading */
.profile-picture-container {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #f8f9fa;
}

.profile-picture-container .lazy-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hero Section Background Lazy Loading */
.hero-section {
    min-height: 400px;
    position: relative;
    overflow: hidden;
}

.hero-section .lazy-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-section .bg-content {
    position: relative;
    z-index: 1;
}

/* Error State Styling */
.image-error-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background-color: #f8f9fa;
    color: #6c757d;
    font-size: 0.9rem;
}

.image-error-placeholder i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* Performance Optimization */
.lazy-image,
.lazy-background,
.lazy-video {
    will-change: opacity, background-color, transform;
}

/* Intersection Observer Optimizations */
.lazy-image[data-src],
.lazy-background[data-bg-src] {
    content-visibility: auto;
    contain-intrinsic-size: auto 300px;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .lazy-image {
        transition: none;
    }
    
    .lazy-background {
        transition: none;
    }
    
    .progressive-image {
        transition: none;
    }
    
    .lazy-image-container::before {
        animation: none;
    }
}

/* High DPI Display Optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .lazy-image-container::before {
        background: linear-gradient(90deg, 
            transparent, 
            rgba(255,255,255,0.2), 
            transparent);
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) and (min-width: 99999px) {
    .lazy-image-container {
        background-color: #343a40;
    }
    
    .lazy-background {
        background-color: #343a40;
    }
    
    .bg-loading-overlay {
        background-color: rgba(52, 58, 64, 0.9);
    }
    
    .image-error-placeholder {
        background-color: #343a40;
        color: #adb5bd;
    }
}

/* Print Optimization */
@media print {
    .lazy-loading-spinner,
    .bg-loading-overlay {
        display: none !important;
    }
    
    .lazy-image {
        opacity: 1 !important;
    }
    
    .lazy-background {
        background-color: transparent !important;
    }
}

/* Small Screen Optimization */
@media (max-width: 576px) {
    .lazy-image-container::before {
        animation-duration: 1s;
    }
    
    .lazy-image {
        transition-duration: 0.2s;
    }
}

/* Large Screen Enhancement */
@media (min-width: 1200px) {
    .lazy-image-container::before {
        animation-duration: 2s;
    }
}