/*
 * Scheletro di caricamento delle immagini di catalogo.
 *
 * Lo stato vive su data-pb-image-state: il contratto server
 * (pb_catalog_image_attributes) lo scrive gia' come "queued", quindi lo
 * scheletro e' visibile al primo paint, prima che catalog-image-loader.js
 * entri in gioco. Il segnaposto "Immagine non disponibile" resta riservato
 * allo stato "fallback", cioe' al fallimento reale della risorsa.
 */

img[data-pb-image-state="queued"],
img[data-pb-image-state="loading"],
.pb-image-skeleton {
    /* Base traslucida: lo stesso scheletro resta leggibile sia sulle pagine
       chiare sia su quelle scure che non dichiarano la classe .dark. */
    background-color: rgba(148, 163, 184, 0.22);
    background-image: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 41%,
        rgba(255, 255, 255, 0.62) 50%,
        rgba(255, 255, 255, 0) 59%
    );
    background-repeat: no-repeat;
    background-size: 250% 100%;
    background-position: 200% 0;
    animation: pb-image-sweep 1.6s cubic-bezier(0.45, 0.05, 0.3, 1) infinite;
}

/* La scia parte fuori dal bordo sinistro e attraversa il box verso destra. */
@keyframes pb-image-sweep {
    from { background-position: 200% 0; }
    to { background-position: -100% 0; }
}

/* Una volta risolta, l'immagine non deve trascinarsi dietro lo sfondo. */
img[data-pb-image-state="loaded"],
img[data-pb-image-state="fallback"] {
    background-image: none;
    animation: none;
}

/* Comparsa morbida: la bitmap e' gia' in cache, quindi la dissolvenza
   sostituisce lo scatto secco dello swap di src. */
img.pb-image-appear {
    animation: pb-image-appear 0.42s ease-out;
}

@keyframes pb-image-appear {
    from { opacity: 0; filter: blur(6px); }
    to { opacity: 1; filter: blur(0); }
}

.dark img[data-pb-image-state="queued"],
.dark img[data-pb-image-state="loading"],
.dark .pb-image-skeleton {
    background-color: rgba(148, 163, 184, 0.16);
    background-image: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 41%,
        rgba(255, 255, 255, 0.17) 50%,
        rgba(255, 255, 255, 0) 59%
    );
}

@media (prefers-reduced-motion: reduce) {
    img[data-pb-image-state="queued"],
    img[data-pb-image-state="loading"],
    .pb-image-skeleton {
        animation: none;
        background-position: 50% 0;
    }

    img.pb-image-appear {
        animation-duration: 0.01ms;
    }
}