/* =========================================================
   2A Image Skeleton — shimmer placeholder + fade-in reveal.
   Vanilla-CSS port of Vercel ImageWithSkeleton.tsx: a warm-tan
   base with a brand-orange shimmer band sweeps L→R behind the
   image; on load the image cross-fades in (500ms) and the
   skeleton fades out. Same shimmer gradient + timing as the
   video skeleton (hls-player.css) so images and video match.

   Two host patterns (both driven by image-skeleton.js):
     1) Wrapped: <span class="twoa-img-skeleton"> contains a
        <span class="twoa-img-shimmer"> + the <img>. JS adds
        .is-loaded to the wrapper. (Homepage hero.)
     2) Overlay: a <span class="twoa-img-shimmer"> sits as a
        sibling layer over an absolutely-positioned fill <img>
        (e.g. .ba-after / .ba-before). JS adds .is-loaded to the
        <img> and .is-hidden to the shimmer. (Before/After cards.)
   ========================================================= */

/* Shimmer band keyframe — band travels left→right (parity with
   Vercel @keyframes shimmer in globals.css). */
@keyframes twoa-img-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ---------- Shimmer placeholder layer ---------- */
.twoa-img-shimmer {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    /* Warm cream-tan base (orange-50 family) — same tone as
       ImageWithSkeleton so the loading state reads as the SITE
       loading, not generic gray. */
    background: #f4ebe4;
    opacity: 1;
    transition: opacity 0.5s ease;
}

/* Sweeping brand-orange band over the tan base. */
.twoa-img-shimmer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(235, 93, 29, 0.10) 50%,
        transparent 100%
    );
    animation: twoa-img-shimmer 1.6s ease-in-out infinite;
}

/* ---------- Pattern 1: wrapped (hero) ---------- */
.twoa-img-skeleton {
    position: relative;
    display: block;
    overflow: hidden;
}

/* Image fades in on load (cross-fade with the skeleton). */
.twoa-img-skeleton > img {
    opacity: 0;
    transition: opacity 0.5s ease;
}
.twoa-img-skeleton.is-loaded > img {
    opacity: 1;
}
.twoa-img-skeleton.is-loaded > .twoa-img-shimmer {
    opacity: 0;
}

/* Hero host: .hero__image-mobile / -desktop are absolute fill boxes, so the
   skeleton wrapper must fill them (and keep the img at 100% cover from
   style.css). Scoped so this file never reshapes a non-fill wrapper. */
.hero__image-mobile > .twoa-img-skeleton,
.hero__image-desktop > .twoa-img-skeleton {
    position: absolute;
    inset: 0;
}

/* ---------- Pattern 2: overlay (before/after fill imgs) ---------- */
/* The img itself carries the fade-in; the shimmer is a separate
   sibling layer that JS hides via .is-hidden. */
img[data-twoa-img-skeleton] {
    opacity: 0;
    transition: opacity 0.5s ease;
}
img[data-twoa-img-skeleton].is-loaded {
    opacity: 1;
}
.twoa-img-shimmer.is-hidden {
    opacity: 0;
}

/* Reduced motion: no shimmer sweep, no cross-fade — show the
   image immediately (parity with the React reduced-motion guard). */
@media (prefers-reduced-motion: reduce) {
    .twoa-img-shimmer::after { animation: none; }
    .twoa-img-skeleton > img,
    img[data-twoa-img-skeleton] { opacity: 1; transition: none; }
    .twoa-img-shimmer { opacity: 0; transition: none; }
}