/* Progressive enhancement: without the loader, real image URLs stay visible. */
:root {
    --ud-image-placeholder: linear-gradient(115deg, #f8f3e6 0%, #efece5 50%, #f8f3e6 100%);
}
html[data-theme="dark"] {
    --ud-image-placeholder: linear-gradient(115deg, #262a30 0%, #30343a 50%, #262a30 100%);
}
[data-ud-image-frame][data-ud-image-frame-state="loading"],
[data-ud-image-frame][data-ud-image-frame-state="error"] {
    background: var(--ud-image-placeholder) !important;
}
/* Keep existing dimensions, crops, badges and hover transforms untouched. */
:root img[data-ud-image][data-ud-image-state] {
    transition: opacity 200ms ease !important;
}
:root img[data-ud-image][data-ud-image-state="loading"] {
    opacity: 0 !important;
    transition: none !important;
}
:root img[data-ud-image][data-ud-image-state="ready"],
:root img[data-ud-image][data-ud-image-state="error"] {
    opacity: 1 !important;
}
@media (prefers-reduced-motion: reduce) {
    :root img[data-ud-image][data-ud-image-state] {
        transition: none !important;
    }
}