/* =========================================================================
   forsa-lazy.css  —  Lazy-loading shimmer placeholder + fade-in for content
   images. Paired with the "forsa-img-lazy" IIFE in assets/js/custom.js.

   Behaviour:
   - JS adds .forsa-img-loading to every content <img> that is still loading.
     While loading, the <img> is transparent (opacity:0) and its CONTAINER-less
     fallback is a shimmering skeleton painted on the <img> background.
   - On the image's `load` event JS removes .forsa-img-loading and adds
     .forsa-img-loaded, which fades the real pixels in.
   - No-JS: neither class is ever added, so images render normally (opacity:1).
     Nothing here sets opacity on a bare <img>, so JS-off is always safe.
   ========================================================================= */

/* Loading state: hide the real image, show an animated skeleton in its place.
   min-height guarantees the shimmer is visible even in containers that don't
   reserve their own height (e.g. the homepage .category-grid-img). In the
   listing grids the parent already reserves 260px / 300px, so this min-height
   is harmless there (the img is absolutely-positioned / 100% width). */
img.forsa-img-loading {
    opacity: 0;
    min-height: 80px;
    background-color: #f2f3f5;
    background-image: linear-gradient(
        100deg,
        #f2f3f5 30%,
        #e9ebee 50%,
        #f2f3f5 70%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    /* RTL-friendly: the keyframes sweep is direction-agnostic. */
    animation: forsaImgShimmer 1.2s ease-in-out infinite;
}

/* Loaded state: fade the real image in. The transition is on the <img> so it
   applies the moment .forsa-img-loading is swapped for .forsa-img-loaded. */
img.forsa-img-loaded {
    opacity: 1;
    animation: none;
    background-image: none;
    transition: opacity 0.4s ease-in-out;
}

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

/* Respect users who prefer reduced motion: drop the shimmer animation but keep
   the neutral skeleton colour and the (instant) reveal. */
@media (prefers-reduced-motion: reduce) {
    img.forsa-img-loading { animation: none; }
    img.forsa-img-loaded  { transition: none; }
}