/**
 * Global Lazy Loading Styles
 * Provides consistent styling for lazy loaded images and videos
 */

/* Base lazy loading styles */
.lazy-image,
.lazy-video {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    visibility: hidden;
}

.lazy-image.loaded,
.lazy-video.loaded {
    opacity: 1;
    visibility: visible;
}

/* Placeholder styles for lazy images */
.lazy-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
    z-index: -1;
}

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

/* Specific overrides for slider images */
.intro-slide img {
    opacity: 1 !important;
    transition: opacity 0.3s ease-in-out;
}

.intro-slide img[src] {
    opacity: 1 !important;
}

.intro-slide:first-child img,
.intro-slide.swiper-slide-active img {
    opacity: 1 !important;
    visibility: visible !important;
}

.intro-slide .lazy-image {
    opacity: 1 !important;
}

.intro-slide .lazy-video {
    opacity: 1 !important;
}

/* Product images specific styles */
.product-image.lazy-image {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease;
}

.product-image.lazy-image.loaded {
    opacity: 1;
    visibility: visible;
}

/* Benefit icons specific styles */
.benefit-item .lazy-image {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.benefit-item .lazy-image.loaded {
    opacity: 1;
}

/* Testimonial avatars specific styles */
.t-section .lazy-image {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.t-section .lazy-image.loaded {
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .lazy-image,
    .lazy-video {
        transition: opacity 0.2s ease-in-out;
    }
}