/*!
 * SyLazyLoad (sy-lazyload/v0.1.css)
 * CDN-ready utility for reserving image space + optional placeholder/thumbnail upgrade.
 *
 * © 2026 Hovsep Hambardzumyan. All rights reserved.
 * This software is proprietary and confidential.
 * Unauthorized copying, modification, distribution, or use of this file is strictly prohibited.
 * This code may be used only with explicit written permission from the author.
 */

/* Wrapper */
.sy-ll-wrap{
    position: relative;
    width: 100%;
}

/* Placeholder (spacer) — exists only before load */
.sy-ll-ph{
    display:block;
    width:100%;
}
.sy-ll-ph.sy-ll-ph--bg{
    background: rgba(255,255,255,.06);
}

/* Base image styling */
img.sy-lazyload.sy-ll-img{
    display:block;
    width:100%;
    height:auto;
    opacity: 0;
    transition: opacity .25s ease;
}

/* Loaded */
img.sy-lazyload.sy-ll-img.is-loaded{
    opacity: 1;
}

/* LCP-safe: never hide */
img.sy-lazyload.sy-ll-img.sy-lcp{
    opacity: 1;
}

/* =============== BEFORE LOAD: framed mode (absolute) ===============
   Used only while waiting for real image. Placeholder holds size.
   After load we switch to normal flow (block) automatically (JS removes .sy-ll-framed)
*/
.sy-ll-wrap.sy-ll-framed img.sy-lazyload.sy-ll-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    /* default is contain (as you asked) */
    object-fit: var(--sy-ll-fit, contain);
    /* in framed mode we still keep opacity control */
}

/* Optional blur-up while upgrading thumb → full */
img.sy-lazyload.sy-ll-img.sy-ll-blur{
    filter: blur(5px);
    transform: scale(1.03);
    transition: filter .35s ease, transform .35s ease;
}
img.sy-lazyload.sy-ll-img.sy-ll-blur.is-loaded{
    filter: blur(0);
    transform: none;
}


/* Thumbnail mode: show src immediately (thumb visible) */
img.sy-lazyload.sy-ll-img.sy-ll-thumb{
    opacity: 1;
}

/* Optional blur-up while upgrading thumb → full */
img.sy-lazyload.sy-ll-img.sy-ll-thumb.sy-ll-blur{
    filter: blur(14px);
    transform: scale(1.03);
    transition: filter .35s ease, transform .35s ease;
}
img.sy-lazyload.sy-ll-img.sy-ll-thumb.sy-ll-blur.is-loaded{
    filter: blur(0);
    transform: none;
}