/* Shared image loading state for blog content. */
img.blog-image,
img[loading="lazy"] {
    background: linear-gradient(90deg, #f1f3f5 25%, #e4e7eb 50%, #f1f3f5 75%);
    background-size: 200% 100%;
    animation: blog-image-shimmer 1.4s ease-in-out infinite;
}

img.blog-image.is-loaded,
img[loading="lazy"].is-loaded,
img.blog-image.is-error,
img[loading="lazy"].is-error {
    animation: none;
    background: #f1f3f5;
}

.blog-image-bg {
    position: relative;
    overflow: hidden;
    background-color: #f1f3f5;
}

.blog-image-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #f1f3f5 25%, #e4e7eb 50%, #f1f3f5 75%);
    background-size: 200% 100%;
    animation: blog-image-shimmer 1.4s ease-in-out infinite;
    transition: opacity .25s ease;
}

.blog-image-bg.is-loaded::after,
.blog-image-bg.is-error::after {
    opacity: 0;
    animation: none;
}

.image-loader.is-loaded::before,
.image-loader.is-error::before {
    opacity: 0;
    animation: none;
}

@keyframes blog-image-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    img.blog-image,
    img[loading="lazy"],
    .blog-image-bg::after {
        animation: none;
    }
}