/* Shrinkr Studio — LQIP Blur-Up Placeholder Styles */

/* Blurred placeholder state */
img.skrs-blur {
    filter: blur(15px);
    transform: scale(1.05);
    transition: filter 1.2s ease-out, transform 1.2s ease-out;
    will-change: filter, transform;
}

/* Loaded state — remove blur with smooth transition */
img.skrs-blur.skrs-loaded {
    filter: blur(0);
    transform: scale(1);
}

/* Lazy image base — preserve the reserved box and reveal smoothly */
img.skrs-lazy-image {
    opacity: 0.72;
    background-color: #f0f0f0 !important;
    transition: opacity 1.2s ease-out, filter 1.2s ease-out, transform 1.2s ease-out;
}

.skrs-lazy-iframe-wrap {
    display: inline-block;
    max-width: 100%;
    line-height: 0;
    vertical-align: top;
    background-color: #edf0f3 !important;
    background-image: linear-gradient(90deg, #edf0f3 42%, rgba(255, 255, 255, 0.7) 50%, #edf0f3 58%) !important;
    background-size: 200% 100% !important;
    animation: skrs-shimmer 2.2s linear infinite !important;
}

iframe.skrs-lazy-iframe {
    display: block;
    max-width: 100%;
    opacity: 0;
    background: transparent !important;
    transition: opacity 1.2s ease-out;
}

.skrs-lazy-iframe-wrap.skrs-loaded {
    background: none !important;
    animation: none !important;
}

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

/* Fallback for iframes not wrapped by the HTML rewriter. */
iframe.skrs-lazy-iframe:not(.skrs-loaded) {
    opacity: 0.72;
}

.skrs-lazy-iframe-wrap iframe.skrs-lazy-iframe:not(.skrs-loaded) {
    opacity: 0;
}

video.skrs-lazy-video {
    display: block;
    opacity: 1;
    position: relative;
    z-index: 1;
    pointer-events: auto;
    max-width: 100%;
    transition: opacity 1.2s ease-out;
}

/* Native video surfaces can paint above a wrapper pseudo-element. Hide the
 * unready surface so the wrapper shimmer remains visible until its poster. */
video.skrs-lazy-video:not(.skrs-poster-loaded):not(.skrs-video-playing) {
    opacity: 0;
}

.skrs-lazy-video-wrap {
    position: relative;
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    vertical-align: top;
    pointer-events: auto;
    background-color: #edf0f3 !important;
}

.skrs-lazy-video-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    display: block;
    background-image: linear-gradient(90deg, #edf0f3 42%, rgba(255, 255, 255, 0.7) 50%, #edf0f3 58%);
    background-size: 200% 100%;
    animation: skrs-shimmer 2.2s linear infinite;
}

.skrs-lazy-video-wrap.skrs-poster-loaded,
.skrs-lazy-video-wrap.skrs-video-playing {
    background: none !important;
}

.skrs-lazy-video-wrap.skrs-poster-loaded::before,
.skrs-lazy-video-wrap.skrs-video-playing::before {
    display: none;
}

video.skrs-lazy-video.skrs-poster-loaded,
video.skrs-lazy-video.skrs-video-playing {
    opacity: 1;
}

/* Keep the old class compatible with LQIP markup from older renders. */
img.skrs-lazy {
    opacity: 0.72;
    background-color: #f0f0f0;
}

/* Background lazy load placeholder */
.skrs-lazy-bg {
    background-color: #edf0f3 !important;
    background-image: linear-gradient(90deg, #edf0f3 42%, rgba(255, 255, 255, 0.7) 50%, #edf0f3 58%) !important;
    background-size: 200% 100% !important;
    animation: skrs-shimmer 2.2s linear infinite !important;
    transition: background-image 0.3s ease-in;
}

/* Skeleton placeholder animation (optional) */
@keyframes skrs-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

img.skrs-lazy-image:not(.skrs-loaded),
img.skrs-lazy:not(.skrs-loaded) {
    background: linear-gradient(90deg, #edf0f3 42%, rgba(255, 255, 255, 0.7) 50%, #edf0f3 58%) !important;
    background-size: 200% 100% !important;
    animation: skrs-shimmer 2.2s linear infinite !important;
}

/* Remove the placeholder only after the image has been decoded */
img.skrs-loaded {
    opacity: 1;
    animation: none !important;
    background: none !important;
}

@media (prefers-reduced-motion: reduce) {
    img.skrs-lazy-image,
    img.skrs-lazy,
    iframe.skrs-lazy-iframe,
    video.skrs-lazy-video,
    .skrs-lazy-video-wrap,
    .skrs-lazy-video-wrap::before,
    .skrs-lazy-iframe-wrap,
    .skrs-lazy-bg {
        animation: none;
        transition: none;
    }

}