.skeleton-surface {
    position: relative;
    overflow: hidden;
    background: transparent;
    animation: skeleton-reveal 1ms linear 150ms both;
}

.skeleton-surface::after {
    position: absolute;
    inset: 0;
    content: '';
    background: linear-gradient(100deg, transparent 22%, rgb(255 255 255 / 58%) 46%, transparent 70%);
    opacity: 0;
    transform: translateX(-100%);
    pointer-events: none;
}

.skeleton-surface.skeleton-visible::after {
    animation: skeleton-shimmer 1.4s ease-in-out 150ms infinite;
}

.skeleton-text {
    display: inline-block;
    min-height: 1em;
    border-radius: 6px;
}

.is-image-loading img {
    opacity: 0;
}

.is-image-loaded img {
    opacity: 1;
    transition: opacity 200ms ease;
}

.skeleton-surface.is-image-loaded {
    background: transparent;
    animation: none;
}

.skeleton-surface.is-image-error {
    background: #ebe5dd;
    animation: none;
}

.is-image-loaded::after,
.is-image-error::after {
    display: none;
}

@keyframes skeleton-shimmer {
    0% { opacity: 0; transform: translateX(-100%); }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { opacity: 0; transform: translateX(100%); }
}

@keyframes skeleton-reveal {
    to { background: #ebe5dd; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-surface::after {
        animation: none;
    }

    .skeleton-surface {
        background: #ebe5dd;
        animation: none;
    }

    .is-image-loaded img {
        transition: none;
    }
}

body[data-a11y-motion="reduced"] .skeleton-surface::after {
    animation: none;
}

body[data-a11y-motion="reduced"] .skeleton-surface {
    background: #ebe5dd;
    animation: none;
}

body[data-a11y-motion="reduced"] .is-image-loaded img {
    transition: none;
}