/*
 * The wrapper reserves a stable layout target for IntersectionObserver while
 * the placeholder reuses each caller's image sizing class.
 */
.lazy-image {
    /* Visible on the dark page without competing with the poster artwork. */
    background: rgba(255, 255, 255, 0.14);
    border-radius: var(--lazy-image-radius, 8px);
    display: block;
    overflow: hidden;
    transition: background-color 280ms ease-out;
}

/* The loading background fades out as the image reaches full opacity. */
.lazy-image--loaded {
    background: transparent;
}

.lazy-image__placeholder {
    /* The wrapper already supplies the surface; a second layer would brighten it. */
    background: transparent;
}

/* The image remains invisible until its network load completes. */
.lazy-image__image {
    opacity: 0;
    transition: opacity 280ms ease-out;
}

/* Loading completion reveals the image without changing its layout dimensions. */
.lazy-image__image--loaded {
    opacity: 1;
}

/* Respect users who request reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .lazy-image__image {
        transition: none;
    }

    .lazy-image {
        transition: none;
    }
}