/* ---------------------------------------------------------------------------
 * skeleton.css — image fade-in and section reveal animations.
 *
 * Card placeholders are NOT defined here. The theme already ships
 * .skeleton / .skeleton-img / .skeleton-text (styles.css) with a pulse
 * animation, and index.html's skeletonSlides() renders that markup — the
 * product loaders now paint it into every band while their fetch is running.
 *
 * This file adds only the two things that pattern does not cover:
 *   1. fading each photograph in as it decodes, so cards do not pop
 *
 * Pairs with js/skeleton.js. Section reveals use the theme's own WOW.js.
 * ------------------------------------------------------------------------- */

/* ========================================================== image loading */

img.is-loading {
    opacity: 0;
}

img.is-loaded {
    opacity: 1;
    animation: sk-fade-in .45s ease both;
}

@keyframes sk-fade-in {
    from {
        opacity: 0;
        transform: scale(1.015);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* The rakhi cards apply their own transform for the alternating tilt, and a
   scale here would fight it — fade those on opacity alone. */
.rakhi-card img.is-loaded {
    animation-name: sk-fade-in-flat;
}

/* .img-hover is the SECOND image on a product card (the certificate scan on
   rakhi cards). It is stacked over .img-product and the theme keeps it at
   `opacity: 0` until the card is hovered.
   The fade-in above must not touch it: `animation-fill-mode: both` pins the
   final keyframe — opacity: 1 — permanently, and animated values outrank
   normal declarations in the cascade, so the theme rule loses and the second
   image covers the product from the moment it loads. Excluding it here is
   what keeps the product photo the one you see first. */
img.img-hover.is-loading,
img.img-hover.is-loaded {
    animation: none;
    opacity: 0;
}

@keyframes sk-fade-in-flat {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {

    img.is-loaded {
        animation: none;
    }

}