/* Shared skeleton shimmer. Page CSS keeps size/layout class names
   (list-skel-*, search-skel-*, wl-skel-*, ml-skel-*). */

@keyframes skel-shimmer {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

html[data-design="market-lite"] .list-skel,
html[data-design="market-lite"] #search-results .list-skel {
    display: block;
    border-radius: 8px;
    background: linear-gradient(
        90deg,
        var(--background-secondary, #eef0f3) 0%,
        var(--background-tertiary, #e4e7ec) 50%,
        var(--background-secondary, #eef0f3) 100%
    );
    background-size: 200% 100%;
    animation: skel-shimmer 1.2s ease-in-out infinite;
}

.wl-skel,
html[data-design="market-lite"] .ml-skel {
    display: block;
    border-radius: 8px;
    background: linear-gradient(
        90deg,
        var(--background-tertiary, #e4e7ec) 0%,
        var(--background-secondary, #eef0f3) 50%,
        var(--background-tertiary, #e4e7ec) 100%
    );
    background-size: 200% 100%;
    animation: skel-shimmer 1.2s ease-in-out infinite;
}

html[data-theme="dark"] .wl-skel,
html[data-design="market-lite"][data-theme="dark"] .list-skel,
html[data-design="market-lite"][data-theme="dark"] .ml-skel {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.09) 50%,
        rgba(255, 255, 255, 0.04) 100%
    );
    background-size: 200% 100%;
}

html[data-design="market-lite"][data-theme="dark"] #search-results .list-skel {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.16) 50%,
        rgba(255, 255, 255, 0.08) 100%
    );
    background-size: 200% 100%;
}