/* Shared image states for home cards, category lists, articles and widgets. */
.home-four img {
    color: transparent;
    font-size: 0;
}

.home-four .recovery-media-frame {
    position: relative;
}

.home-four .recovery-media-frame.is-loading,
.home-four .recovery-media-frame.is-error {
    background: #242532;
}

.home-four .recovery-media-frame.is-loading::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(100deg, #242532 8%, #343848 18%, #242532 33%);
    background-size: 200% 100%;
    animation: recovery-image-shimmer 1.35s linear infinite;
}

.home-four .recovery-media-frame.is-loading img.recovery-image,
.home-four .recovery-media-frame.is-error img.recovery-image {
    opacity: 0 !important;
}

.home-four .recovery-media-frame.is-loaded::before {
    content: none;
}

.home-four .recovery-media-frame.is-loaded img.recovery-image {
    opacity: 1 !important;
}

.home-four .recovery-media-frame.is-error::before {
    content: 'Imagem indisponível';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 8px;
    color: #aeb8c4;
    font-size: 11px;
    text-align: center;
    pointer-events: none;
}

.home-four img.recovery-image.is-loading {
    background: linear-gradient(100deg, #242532 8%, #343848 18%, #242532 33%);
    background-size: 200% 100%;
    animation: recovery-image-shimmer 1.35s linear infinite;
}

@keyframes recovery-image-shimmer {
    to { background-position-x: -200%; }
}

html:not([data-theme='dark']) .home-four .recovery-media-frame.is-loading,
html:not([data-theme='dark']) .home-four .recovery-media-frame.is-error {
    background: #e8edf2;
}

html:not([data-theme='dark']) .home-four .recovery-media-frame.is-loading::before,
html:not([data-theme='dark']) .home-four img.recovery-image.is-loading {
    background: linear-gradient(100deg, #e8edf2 8%, #f5f7fa 18%, #e8edf2 33%);
    background-size: 200% 100%;
}

html:not([data-theme='dark']) .home-four .recovery-media-frame.is-error::before {
    color: #64748b;
}

@media (prefers-reduced-motion: reduce) {
    .home-four .recovery-media-frame.is-loading::before,
    .home-four img.recovery-image.is-loading {
        animation: none;
    }
}