/**
 * Lazy-load spinner + fade-in for public organization website images.
 *
 * Applied globally on website-builder pages via WebsiteLibrariesAsset, scoped
 * under `.website-body` so the admin panel and main marketing site are never
 * touched. The visual states (spinner host, transparent image, faded bg) are
 * activated only by classes that web/js/website/lazy-images.js adds at runtime;
 * with JS disabled or for crawlers no class is added, so images render fully
 * visible. See js/website/lazy-images.js for the matching logic.
 *
 * Spinner colors come from CSS vars so the ring reads on light or dark sections.
 */

/* Spinner host: a wrapper the JS adds around an <img> only where it is safe to
   do so (sole-child parent or an inline/block insertion). The spinner sits
   behind the image and is hidden once the image (or its background) loads. */
.website-body .lazy-img-wrap {
    position: relative;
}

.website-body .lazy-img-wrap::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 3px solid var(--wb-spinner-track, rgba(0, 0, 0, 0.12));
    border-top-color: var(--wb-spinner-accent, rgba(0, 0, 0, 0.45));
    border-radius: 50%;
    animation: wb-lazy-spin 0.8s linear infinite;
    pointer-events: none;
    z-index: 0;
}

.website-body .lazy-img-wrap.is-loaded::before {
    display: none;
}

/* The image fade. JS adds `.lazy-img` (transparent) then `.is-loaded` to fade
   it in over the spinner. */
.website-body img.lazy-img {
    opacity: 0;
    transition: opacity 0.45s ease;
    position: relative;
    z-index: 1;
}

.website-body img.lazy-img.is-loaded {
    opacity: 1;
}

/* Background-image sections (hero, dividers). JS marks them `.wb-fade-bg` and
   adds `.is-loaded` when they scroll into view. */
.website-body .wb-fade-bg {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.website-body .wb-fade-bg.is-loaded {
    opacity: 1;
}

@keyframes wb-lazy-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Honor reduced-motion: show instantly, no spin, no fade. */
@media (prefers-reduced-motion: reduce) {
    .website-body img.lazy-img,
    .website-body .wb-fade-bg {
        opacity: 1;
        transition: none;
    }

    .website-body .lazy-img-wrap::before {
        display: none;
        animation: none;
    }
}

/* Print: everything visible, no spinner artifacts. */
@media print {
    .website-body img.lazy-img,
    .website-body .wb-fade-bg {
        opacity: 1 !important;
    }

    .website-body .lazy-img-wrap::before {
        display: none !important;
    }
}