/**
 * WS Speed Optimizer - Lazy Render CSS
 *
 * Styles for content-visibility lazy rendering.
 *
 * @package WS_Speed_Optimizer
 * @since 1.0.0
 */

/* Lazy sections use content-visibility for deferred rendering */
.ws-lazy-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
    /* Prevent potential overflow issues */
    contain-intrinsic-block-size: auto 500px;
}

/* Once rendered, remove content-visibility constraints */
.ws-lazy-rendered {
    content-visibility: visible;
    contain-intrinsic-size: auto;
}

/* Ensure lazy sections don't break when printing */
@media print {
    .ws-lazy-section {
        content-visibility: visible !important;
        contain-intrinsic-size: auto !important;
    }
}

/* LazyLoad placeholder styles */
.ws-lazy {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ws-loaded {
    opacity: 1;
}

/* Placeholder background for lazy images */
img.ws-lazy {
    background: #f0f0f0;
    background: linear-gradient(110deg, #f0f0f0 8%, #f5f5f5 18%, #f0f0f0 33%);
    background-size: 200% 100%;
    animation: ws-shimmer 1.5s linear infinite;
}

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

img.ws-loaded {
    background: none;
    animation: none;
}