/**
 * Lazy Loading CSS Styles for Rigelasli WordPress Theme
 */

/* Base lazy loading styles */
.lazy-loading {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    position: relative;
}

.lazy-loaded {
    opacity: 1;
}

/* Placeholder styles */
.lazy-placeholder {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
    border-radius: 4px;
}

@keyframes loading-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Error state styles */
.lazy-error {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 12px;
    min-height: 100px;
    text-align: center;
    padding: 20px;
}

.lazy-error::before {
    content: '⚠️';
    font-size: 24px;
    margin-bottom: 8px;
    display: block;
}

/* Background image lazy loading */
.lazy-bg {
    background-color: #f0f0f0;
    transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out;
    position: relative;
}

.lazy-bg::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1;
}

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

.lazy-bg-loaded::before {
    display: none;
}

.lazy-bg-error {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
}

/* Iframe lazy loading */
.lazy-iframe {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.lazy-iframe-loaded {
    opacity: 1;
}

/* Loading spinner */
.lazy-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 2;
}

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

/* Image container styles */
.lazy-image-container {
    position: relative;
    overflow: hidden;
    background-color: #f0f0f0;
}

.lazy-image-container img {
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease-in-out;
}

/* Responsive image styles */
.lazy-responsive {
    max-width: 100%;
    height: auto;
}

/* Gallery lazy loading */
.gallery-item {
    position: relative;
    overflow: hidden;
}

.gallery-item img {
    transition: transform 0.3s ease-in-out;
}

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

/* Slider lazy loading */
.slider-item {
    position: relative;
}

.slider-item img {
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease-in-out;
}

/* Blog post images */
.post-thumbnail {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.post-thumbnail img {
    transition: transform 0.3s ease-in-out;
}

.post-thumbnail:hover img {
    transform: scale(1.02);
}

/* Team member images */
.team-image {
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}

.team-image img {
    transition: transform 0.3s ease-in-out;
}

.team-image:hover img {
    transform: scale(1.1);
}

/* Product images */
.product-image {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.product-image img {
    transition: transform 0.3s ease-in-out;
}

.product-image:hover img {
    transform: scale(1.05);
}

/* Modal images */
.modal-image {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.modal-image img {
    transition: opacity 0.3s ease-in-out;
}

/* Performance optimizations */
.lazy-loading {
    will-change: opacity;
}

.lazy-bg {
    will-change: background-image, background-color;
}

/* WebP Support Styles */
picture {
    display: inline-block;
    max-width: 100%;
}

picture img {
    max-width: 100%;
    height: auto;
    display: block;
}

picture source {
    display: none;
}

/* WebP fallback styles */
.webp-fallback {
    position: relative;
}

.webp-fallback img {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.webp-fallback img.webp-loaded {
    opacity: 1;
}

/* WebP loading indicator */
.webp-loading {
    position: relative;
}

.webp-loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1;
}

/* WebP error state */
.webp-error {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 12px;
    min-height: 100px;
    text-align: center;
    padding: 20px;
}

.webp-error::before {
    content: '⚠️ WebP not supported';
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
}

/* WebP responsive images */
.webp-responsive {
    max-width: 100%;
    height: auto;
}

/* WebP gallery support */
.gallery-item picture {
    width: 100%;
    height: 100%;
}

.gallery-item picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* WebP slider support */
.slider-item picture {
    width: 100%;
    height: 100%;
}

.slider-item picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* WebP blog post support */
.post-thumbnail picture {
    width: 100%;
    height: 100%;
}

.post-thumbnail picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* WebP team member support */
.team-image picture {
    width: 100%;
    height: 100%;
}

.team-image picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* WebP product support */
.product-image picture {
    width: 100%;
    height: 100%;
}

.product-image picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* WebP modal support */
.modal-image picture {
    width: 100%;
    height: 100%;
}

.modal-image picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Print styles */
@media print {
    .lazy-loading,
    .lazy-bg,
    .lazy-spinner {
        opacity: 1 !important;
        background-image: inherit !important;
    }
    
    .lazy-placeholder {
        display: none;
    }
    
    picture source {
        display: none;
    }
    
    picture img {
        opacity: 1 !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .lazy-placeholder {
        background: #000;
        color: #fff;
    }
    
    .lazy-error {
        background-color: #000;
        color: #fff;
        border-color: #fff;
    }
    
    .webp-error {
        background-color: #000;
        color: #fff;
        border-color: #fff;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .lazy-loading,
    .lazy-bg,
    .lazy-iframe {
        transition: none;
    }
    
    .lazy-spinner,
    .lazy-bg::before {
        animation: none;
    }
    
    .lazy-placeholder {
        animation: none;
        background: #f0f0f0;
    }
    
    .webp-loading::before {
        animation: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .lazy-placeholder {
        background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    }
    
    .lazy-error {
        background-color: #2a2a2a;
        color: #e0e0e0;
        border-color: #444;
    }
    
    .lazy-bg {
        background-color: #2a2a2a;
    }
    
    .lazy-spinner {
        border-color: #444;
        border-top-color: #3498db;
    }
    
    .webp-error {
        background-color: #2a2a2a;
        color: #e0e0e0;
        border-color: #444;
    }
    
    .webp-loading::before {
        border-color: #444;
        border-top-color: #3498db;
    }
}