/**
 * Lazy Loading CSS Styles
 * Provides visual feedback, blur effects, transitions, and loading states
 * for the lazy loading module
 */

/* Base lazy loading element styles */
.lazy-load {
    /* Smooth transition for all lazy loading effects */
    transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out, transform 0.3s ease-in-out;
    
    /* Initial state - slightly transparent and blurred */
    opacity: 0.1;
    filter: blur(5px);
    
    /* Prevent layout shift by maintaining dimensions */
    background-color: #f0f0f0;
    background-image: linear-gradient(90deg, #f0f0f0 0px, #e0e0e0 40px, #f0f0f0 80px);
    background-size: 300px;
    background-repeat: no-repeat;
    animation: shimmer 1.2s ease-in-out infinite;
}

/* Shimmer animation for loading placeholder */
@keyframes shimmer {
    0% {
        background-position: -300px 0;
    }
    100% {
        background-position: 300px 0;
    }
}

/* Loading state - show user that content is being fetched */
.lazy-loading {
    opacity: 0.6;
    filter: blur(2px);
    
    /* Scale slightly to indicate activity */
    transform: scale(0.98);
    
    /* Pulsing animation */
    animation: pulse 1s ease-in-out infinite alternate;
}

@keyframes pulse {
    0% {
        opacity: 0.6;
    }
    100% {
        opacity: 0.8;
    }
}

/* Successfully loaded state */
.lazy-loaded {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
    
    /* Remove background placeholder */
    background-image: none;
    background-color: transparent;
    
    /* Stop animations */
    animation: none;
}

/* Error state styling */
.lazy-error {
    opacity: 0.7;
    filter: grayscale(100%) blur(0);
    
    /* Error background pattern */
    background-color: #fee;
    background-image: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(255, 0, 0, 0.1) 10px,
            rgba(255, 0, 0, 0.1) 20px
        );
    
    /* Error border */
    border: 2px dashed #f44;
    
    /* Stop animations */
    animation: none;
}

/* Specific image styles */
img.lazy-load,
img.lazy-loading,
img.lazy-loaded {
    /* Ensure images maintain their aspect ratio */
    height: auto;
    max-width: 100%;
    
    /* Smooth rendering */
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: -webkit-optimize-contrast;
}

/* Progressive enhancement for high-quality images */
img.lazy-loaded {
    image-rendering: auto;
}

/* Video-specific styles */
video.lazy-load,
video.lazy-loading {
    /* Maintain video dimensions */
    width: 100%;
    height: auto;
    
    /* Default poster styling */
    object-fit: cover;
}

video.lazy-loaded {
    /* Ensure smooth playback */
    object-fit: cover;
}

/* Click-to-load video styles */
.lazy-video-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Button styling */
    width: 80px;
    height: 80px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 50%;
    
    /* Center the play icon */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Interactive states */
    cursor: pointer;
    transition: all 0.3s ease;
    
    /* Accessibility */
    outline: none;
    
    /* Z-index to appear above video */
    z-index: 10;
}

.lazy-video-play-button:hover,
.lazy-video-play-button:focus {
    background: rgba(0, 0, 0, 0.9);
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.lazy-video-play-button:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}

.lazy-video-play-button svg {
    width: 32px;
    height: 32px;
    color: white;
    margin-left: 4px; /* Slight offset for visual balance */
}

/* Responsive image support */
.lazy-load[data-sizes="auto"] {
    /* Support for automatic sizes calculation */
    width: 100%;
}

/* Performance optimizations */
.lazy-load,
.lazy-loading,
.lazy-loaded {
    /* Hardware acceleration for smooth animations */
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
    perspective: 1000px;
}

.lazy-loaded {
    /* Remove will-change after loading to save resources */
    will-change: auto;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .lazy-load {
        filter: none;
        background-color: #000;
        color: #fff;
    }
    
    .lazy-loading {
        filter: none;
        background-color: #333;
    }
    
    .lazy-error {
        background-color: #600;
        border-color: #f00;
        color: #fff;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .lazy-load,
    .lazy-loading,
    .lazy-loaded,
    .lazy-error {
        transition: none;
        animation: none;
        transform: none;
    }
    
    .lazy-video-play-button:hover,
    .lazy-video-play-button:focus {
        transform: translate(-50%, -50%);
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .lazy-load {
        background-color: #2a2a2a;
        background-image: linear-gradient(90deg, #2a2a2a 0px, #3a3a3a 40px, #2a2a2a 80px);
    }
    
    .lazy-error {
        background-color: #4a1a1a;
        border-color: #aa4444;
    }
}

/* Loading spinner for complex media */
.lazy-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    
    /* Only show if element has relative/absolute positioning */
    display: none;
}

.lazy-loading {
    position: relative;
}

.lazy-loading::after {
    display: block;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Hide spinner when loaded */
.lazy-loaded::after {
    display: none;
}

/* Fade-in effect for better UX */
.lazy-loaded {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Print styles */
@media print {
    .lazy-load,
    .lazy-loading,
    .lazy-loaded {
        /* Ensure all images print properly */
        opacity: 1 !important;
        filter: none !important;
        background: none !important;
        animation: none !important;
    }
    
    .lazy-video-play-button {
        display: none;
    }
}

/* Accessibility: Ensure sufficient color contrast */
.lazy-error {
    /* High contrast error indication */
    background-color: #ffebee;
    border-color: #d32f2f;
    color: #d32f2f;
}

@media (prefers-color-scheme: dark) {
    .lazy-error {
        background-color: #3e1723;
        border-color: #f48fb1;
        color: #f48fb1;
    }
}

/* Focus management for keyboard navigation */
.lazy-video-play-button:focus {
    outline: 3px solid #0066cc;
    outline-offset: 2px;
}

/* Support for different image aspect ratios */
.lazy-load.aspect-16-9 {
    aspect-ratio: 16 / 9;
}

.lazy-load.aspect-4-3 {
    aspect-ratio: 4 / 3;
}

.lazy-load.aspect-1-1 {
    aspect-ratio: 1 / 1;
}

/* Container styles for better layout */
.lazy-container {
    position: relative;
    overflow: hidden;
    background-color: #f5f5f5;
}

.lazy-container.loading {
    background: linear-gradient(-45deg, #f0f0f0, #e0e0e0, #f0f0f0, #e0e0e0);
    background-size: 400% 400%;
    animation: gradientShift 2s ease infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}