/* Progressive media: skeleton shimmer while page paints, then fade-in */

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

.media-frame,
.rt-card-media,
.rt-fd-media,
.rt-spot-media,
.rt-dw-card__media,
.pd-hero-media,
.pd-gallery-item {
    --media-skel-a: #eef1ec;
    --media-skel-b: #f7f9f5;
    background-image: linear-gradient(
        110deg,
        var(--media-skel-a) 25%,
        var(--media-skel-b) 40%,
        var(--media-skel-a) 55%
    );
    background-size: 220% 100%;
    animation: media-shimmer 1.35s ease infinite;
}

.media-frame:has(img.media-reveal.is-loaded),
.rt-card-media:has(img.media-reveal.is-loaded),
.rt-card-media:has(.ph),
.rt-fd-media:has(img.media-reveal.is-loaded),
.rt-spot-media:has(img.media-reveal.is-loaded),
.rt-dw-card__media:has(img.media-reveal.is-loaded),
.pd-hero-media:has(img.media-reveal.is-loaded),
.pd-gallery-item:has(img.media-reveal.is-loaded) {
    animation: none;
    background-image: none;
}

img.media-reveal {
    opacity: 0;
    transform: scale(1.02);
    filter: blur(6px);
    transition:
        opacity .55s cubic-bezier(.22, 1, .36, 1),
        transform .7s cubic-bezier(.22, 1, .36, 1),
        filter .55s ease;
    will-change: opacity, filter, transform;
}

img.media-reveal.is-loaded {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
    .media-frame,
    .rt-card-media,
    .rt-fd-media,
    .rt-spot-media,
    .rt-dw-card__media,
    .pd-hero-media,
    .pd-gallery-item {
        animation: none;
    }

    img.media-reveal,
    img.media-reveal.is-loaded {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}