/* public/stylesheets/media-loading.css
   Images arrive from the assets server, so they land one by one over the
   network. Rather than showing that, each card waits behind a sweeping
   placeholder and the whole grid is revealed together, once every image is
   decoded. */

/* The placeholder: a soft band sweeping left to right. */
.ff-media-wrap {
    position: relative;
    overflow: hidden;
    background: var(--ink-deep);
}

.ff-media-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        var(--white-clear) 0%,
        var(--white-sheen) 45%,
        var(--white-sheen-2) 50%,
        var(--white-sheen) 55%,
        var(--white-clear) 100%
    );
    animation: ff-sweep 1.15s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ff-sweep {
    to { transform: translateX(100%); }
}

/* While loading, the image itself is hidden: no half-drawn picture, no jump. */
.ff-media-wrap img {
    opacity: 0;
    transition: opacity .32s ease;
}

/* Everything ready: the sweep stops and the images fade in together. */
.ff-media-ready.ff-media-wrap::after { animation: none; opacity: 0; }
.ff-media-ready.ff-media-wrap { background: transparent; }
.ff-media-ready.ff-media-wrap img { opacity: 1; }

/* A visitor who asked for less motion gets the images, not the animation. */
@media (prefers-reduced-motion: reduce) {
    .ff-media-wrap::after { animation: none; }
    .ff-media-wrap img { transition: none; }
}