/**
 * WickedPixel Skeleton Loading
 * Two-phase approach:
 * 1. Grid-level skeleton CARDS while API loads (inherit flex sizing from blueprint global classes)
 * 2. Per-card shimmer OVERLAYS while images load (covers the card's image area)
 */

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

/* ===== Phase 1: Grid-level skeleton cards =====
 * Shown during API fetch. Global classes (e.g. card-xenon) give width/flex-basis.
 * !important overrides prevent those classes from messing with internal layout.
 */
.wpx-skeleton-card {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: var(--wpx-skeleton-radius, 8px);
    background: var(--wpx-skeleton-base, #e0e0e0);
    min-height: 280px;
}

.wpx-skeleton-card .wpx-skel-image {
    width: 100% !important;
    min-height: 180px !important;
    flex: 1 1 auto !important;
    background:
        linear-gradient(90deg,
            var(--wpx-skeleton-base, #e0e0e0) 25%,
            var(--wpx-skeleton-highlight, #f0f0f0) 50%,
            var(--wpx-skeleton-base, #e0e0e0) 75%
        ) !important;
    background-size: 200% 100% !important;
    animation: wpx-shimmer 1.5s ease-in-out infinite !important;
}

.wpx-skeleton-card .wpx-skel-lines {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 16px !important;
    flex: 0 0 auto !important;
}

.wpx-skeleton-card .wpx-skel-line {
    height: 12px !important;
    border-radius: 4px !important;
    background:
        linear-gradient(90deg,
            var(--wpx-skeleton-base, #e0e0e0) 25%,
            var(--wpx-skeleton-highlight, #f0f0f0) 50%,
            var(--wpx-skeleton-base, #e0e0e0) 75%
        ) !important;
    background-size: 200% 100% !important;
    animation: wpx-shimmer 1.5s ease-in-out infinite !important;
}

.wpx-skeleton-card .wpx-skel-line:nth-child(1) { width: 70% !important; animation-delay: 0s !important; }
.wpx-skeleton-card .wpx-skel-line:nth-child(2) { width: 90% !important; animation-delay: 0.15s !important; }
.wpx-skeleton-card .wpx-skel-line:nth-child(3) { width: 50% !important; animation-delay: 0.3s !important; }

/* ===== Phase 2: Per-card shimmer overlay =====
 * Covers each card's image area (first child, which has position:relative)
 * while Splide/images load. Fades out when images are ready.
 */
.wpx-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 999;
    background:
        linear-gradient(90deg,
            var(--wpx-skeleton-base, #e0e0e0) 25%,
            var(--wpx-skeleton-highlight, #f0f0f0) 50%,
            var(--wpx-skeleton-base, #e0e0e0) 75%
        );
    background-size: 200% 100%;
    animation: wpx-shimmer 1.5s ease-in-out infinite;
    border-radius: inherit;
    opacity: 1;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.wpx-card-overlay.wpx-fade-out {
    opacity: 0;
}