/* ── Skeleton / Shimmer loader for lazy images ───────────────────────── */

.img-skeleton {
    position: relative;
    overflow: hidden;
    background-color: #e0e0e0;
    border-radius: inherit;
}

/* Dark-scheme version */
@media (prefers-color-scheme: dark) {
    .img-skeleton {
        background-color: #2a2a2a;
    }
}

/* The shimmer sweep */
.img-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.25) 40%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0.25) 60%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s infinite linear;
    pointer-events: none;
}

@media (prefers-color-scheme: dark) {
    .img-skeleton::after {
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.07) 40%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.07) 60%,
            transparent 100%
        );
        background-size: 200% 100%;
    }
}

@keyframes skeleton-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* Hide the actual img while skeleton is active */
.img-skeleton > img,
img.img-loading {
    opacity: 0;
    transition: opacity 0.35s ease;
}

/* Fade in once loaded */
img.img-loaded {
    opacity: 1;
}

/* Wrapper used when img is a direct child (non-wrapped case) */
.img-wrap {
    display: inline-block;
    position: relative;
    overflow: hidden;
    border-radius: inherit;
}

.img-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.25) 40%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0.25) 60%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s infinite linear;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.35s ease;
}

.img-wrap.img-wrap--loaded::after {
    opacity: 0;
    animation: none;
}