/* ============================================================
   LQIP (Low Quality Image Placeholder) — overlay approach
   ------------------------------------------------------------
   .lqip-placeholder sits behind the real <img>, same dimensions,
   same transform origin, stretched to fill (no object-fit
   letterboxing). The real image above stays unchanged — all
   JS that reads .naturalWidth / .complete / .complete continues
   to work exactly as before.

   Fade-out: the real <img> has:
     onload="var p=this.previousElementSibling; if(p&&p.classList.contains('lqip-placeholder')){p.style.opacity='0';}"
   The LQIP also checks onload:
     onload="var n=this.nextElementSibling; if(n&&n.tagName==='IMG'&&n.complete){this.style.opacity='0';}"
   ============================================================ */

.lqip-placeholder {
    /* Stack directly on top of the real image, same positioning */
    position: absolute;
    top: 0;
    left: 0;
    /* Match the real image's natural layout: no intrinsic size
       constraints — stretch to fill the container (overflow:hidden
       on the container clips whatever overflows). */
    width: 100%;
    height: 100%;
    /* If the real <img> is inside a <div class="showcase__item-img-wrapper">
       (index.html hero) that constrains its size via max-width/max-height,
       inherit those so the LQIP fills exactly the same visible area. */
    max-width: inherit;
    max-height: inherit;
    object-fit: cover;
    object-position: center;
    /* Blur + subtle scale so the placeholder reads as a soft preview
       of the real image rather than a harsh tiny thumbnail. */
    filter: blur(18px) saturate(1.05);
    transform: scale(1.03);
    background-color: rgba(20, 20, 20, 0.04);
    transition: opacity 400ms ease-out;
    z-index: 0;
    pointer-events: none;
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .lqip-placeholder {
        transition: none;
    }
}