/*
 * Reusable media skeleton.
 *
 * Immediate usage:
 *   <figure class="sg-skeleton-media">...</figure>
 *
 * Deferred usage inside a revealable parent:
 *   <div class="sg-skeleton-context is-open">
 *       <div class="sg-skeleton-media sg-skeleton-media--deferred">...</div>
 *   </div>
 */
.sg-skeleton-media,
.sg-overview .sg-overview__media,
.gallery-placeholder._block-content-loading {
    overflow: hidden;
    position: relative;
}

.sg-skeleton-media::after,
.sg-overview .sg-overview__media::after,
.gallery-placeholder._block-content-loading::after {
    animation: sg-skeleton-shimmer .8s linear infinite;
    background: linear-gradient(110deg, #f1f1f1 22%, #fafafa 42%, #f1f1f1 62%);
    background-size: 220% 100%;
    border-radius: clamp(5px, 1vw, 10px);
    content: '';
    inset: 0;
    opacity: 1;
    pointer-events: none;
    position: absolute;
    transition: opacity .25s ease;
    z-index: 2;
}

.sg-skeleton-media.is-loaded::after {
    animation: none;
    opacity: 0;
}

.sg-skeleton-media--deferred::after {
    animation: none;
    opacity: 0;
}

.sg-skeleton-context.is-open .sg-skeleton-media--deferred::after {
    animation: sg-skeleton-shimmer .8s linear infinite;
    opacity: 1;
}

.sg-skeleton-context.is-open .sg-skeleton-media--deferred.is-loaded::after {
    animation: none;
    opacity: 0;
}

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

@media (prefers-reduced-motion: reduce) {
    .sg-skeleton-media::after,
    .sg-overview .sg-overview__media::after,
    .gallery-placeholder._block-content-loading::after {
        animation: none !important;
        opacity: 0;
    }
}