/* Keep a lightweight placeholder behind every frontend image until it loads. */
img.image-skeleton,
img:not([data-no-skeleton]):not(.image-loaded):not(.image-skeleton-error) {
    background-color: #edf0f2;
    background-image: linear-gradient(
        100deg,
        transparent 20%,
        rgba(255, 255, 255, 0.72) 50%,
        transparent 80%
    );
    background-position: 150% 0;
    background-size: 200% 100%;
    animation: image-skeleton-shimmer 1.35s ease-in-out infinite;
}

img.image-skeleton-error {
    animation: none;
    background-color: #edf0f2;
    background-image: url("../images/skeleton.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@keyframes image-skeleton-shimmer {
    to {
        background-position: -150% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    img.image-skeleton,
    img:not([data-no-skeleton]):not(.image-loaded):not(.image-skeleton-error) {
        animation: none;
    }
}