/* Esqueleto de carga por imagen.
 *
 * El barrido va como fondo del propio <img>: mientras el archivo no ha pintado,
 * se ve el fondo del elemento. No hace falta envolver la imagen ni tocar el
 * contenedor, asi que los object-fit / width / height existentes siguen igual.
 *
 * El anillo giratorio NO puede ir sobre el <img> (un elemento reemplazado no
 * pinta ::before/::after), asi que el JS lo inserta como hermano y lo centra
 * sobre la caja de la imagen.
 *
 * Uso:  <img class="ts-img" src="..." loading="lazy" alt="...">
 */

.ts-img {
    background-color: rgba(148, 163, 184, .18);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0)   0%,
        rgba(255, 255, 255, .25) 50%,
        rgba(255, 255, 255, 0)   100%
    );
    background-repeat: no-repeat;
    background-size: 200% 100%;
    animation: ts-img-shimmer 1.15s ease-in-out infinite;
}

/* Al cargar: se corta el barrido y se revela con un fundido corto. */
.ts-img.is-loaded {
    background-image: none;
    background-color: transparent;
    animation: ts-img-fade .35s ease both;
}

@keyframes ts-img-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

@keyframes ts-img-fade {
    from { opacity: .35; }
    to   { opacity: 1; }
}


/* --- Anillo giratorio, centrado sobre la imagen que esta cargando --- */

.ts-img-spinner {
    --color-1: #0D9D08;
    --size: 1px;

    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;

    width: calc(48 * var(--size));
    height: calc(48 * var(--size));
    border-radius: 50%;
    display: inline-block;
    border-top: calc(3 * var(--size)) solid var(--color-1);
    border-right: calc(3 * var(--size)) solid transparent;
    box-sizing: border-box;
    animation: ts-img-rotation 1s linear infinite;
}

@keyframes ts-img-rotation {
    0%   { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Respeta a quien pidio menos movimiento: fondo plano y anillo quieto. */
@media (prefers-reduced-motion: reduce) {
    .ts-img,
    .ts-img.is-loaded {
        animation: none;
        background-image: none;
    }
    .ts-img-spinner {
        animation: none;
    }
}