/**
 * Lazy Load Styles
 * Provides smooth transitions and loading states for lazy loaded images
 */

/* Base lazy image styles */
img.lazy {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

img.lazy-loading {
    opacity: 0.5;
    filter: blur(5px);
    background: #f0f0f0;
    background-image: linear-gradient(90deg, #f0f0f0 0px, #e0e0e0 40px, #f0f0f0 80px);
    background-size: 200px;
    animation: lazy-loading-animation 1.5s infinite linear;
}

img.lazy-loaded {
    opacity: 1;
    filter: none;
}

img.lazy-error {
    opacity: 1;
    filter: grayscale(100%);
    border: 2px dashed #ccc;
    padding: 2px;
    position: relative;
}

/* Loading animation */
@keyframes lazy-loading-animation {
    0% {
        background-position: -200px;
    }
    100% {
        background-position: 200px;
    }
}

/* Aspect ratio containers for preventing layout shift */
.lazy-wrapper {
    position: relative;
    overflow: hidden;
    background-color: #f0f0f0;
}

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

/* Common aspect ratios */
.lazy-wrapper-16-9 {
    padding-bottom: 56.25%; /* 16:9 */
}

.lazy-wrapper-4-3 {
    padding-bottom: 75%; /* 4:3 */
}

.lazy-wrapper-1-1 {
    padding-bottom: 100%; /* 1:1 Square */
}

.lazy-wrapper-3-2 {
    padding-bottom: 66.66%; /* 3:2 */
}

/* Fallback image indicator */
img.lazy-error::after {
    content: '';
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>');
    background-size: 16px 16px;
    background-position: center;
    background-repeat: no-repeat;
}

/* Tab-specific styles */
.tab-content img.lazy:not(.lazy-loaded) {
    min-height: 200px;
    background: #f5f5f5 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ccc" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>') center no-repeat;
    background-size: 50px 50px;
}

/* Gallery-specific styles */
.gallery img.lazy {
    cursor: pointer;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.gallery img.lazy-loaded:hover {
    transform: scale(1.05);
}

/* News/Article images */
.news-item img.lazy,
.article-content img.lazy {
    width: 100%;
    height: auto;
    display: block;
}

/* Avatar/Profile images */
.avatar img.lazy-error {
    border-radius: 50%;
}

/* Banner images */
.banner img.lazy {
    width: 100%;
    min-height: 300px;
    object-fit: cover;
}

/* Book covers */
.book-cover img.lazy {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.book-cover img.lazy-loaded {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    img.lazy-loading {
        filter: blur(3px);
    }
    
    .banner img.lazy {
        min-height: 200px;
    }
    
    .tab-content img.lazy:not(.lazy-loaded) {
        min-height: 150px;
        background-size: 40px 40px;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    img.lazy-loading {
        background: #2a2a2a;
        background-image: linear-gradient(90deg, #2a2a2a 0px, #3a3a3a 40px, #2a2a2a 80px);
    }
    
    img.lazy-error {
        border-color: #555;
    }
    
    .lazy-wrapper {
        background-color: #2a2a2a;
    }
    
    .tab-content img.lazy:not(.lazy-loaded) {
        background-color: #333;
    }
}

/* Print styles */
@media print {
    img.lazy:not(.lazy-loaded) {
        display: none;
    }
}