/* =====================================================================
 * VIVI IN DUE — Skeleton loaders + empty state v2
 *
 * Mostra placeholder shimmer mentre la home pair-feed sta caricando
 * (DataManager ancora in fetch). Evita FOUC e "vuoto improvviso".
 *
 * .empty-state__* refining (helper unificato esistente in app.js).
 * ===================================================================== */

/* ---------- Skeleton ---------- */
@keyframes vid-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.vid-skeleton {
    background: linear-gradient(90deg,
        var(--vid-surface-2) 0%,
        rgba(241, 245, 249, 0.4) 40%,
        var(--vid-surface-2) 80%);
    background-size: 200% 100%;
    animation: vid-shimmer 1.4s linear infinite;
    border-radius: var(--vid-radius-sm);
}

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

.vid-pair-card-skel {
    background: var(--vid-surface);
    border: 1px solid var(--vid-border);
    border-radius: var(--vid-radius-lg);
    overflow: hidden;
    box-shadow: var(--vid-shadow-sm);
}
.vid-pair-card-skel__stage {
    height: 220px;
    background: var(--vid-surface-2);
    position: relative;
}
.vid-pair-card-skel__stage::before,
.vid-pair-card-skel__stage::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 62%;
    height: 78%;
    border-radius: var(--vid-radius-md);
    background: linear-gradient(90deg,
        rgba(15,23,42,0.05) 0%,
        rgba(15,23,42,0.1) 40%,
        rgba(15,23,42,0.05) 80%);
    background-size: 200% 100%;
    animation: vid-shimmer 1.4s linear infinite;
}
.vid-pair-card-skel__stage::before {
    transform: translate(-50%, -50%) rotate(-2.5deg) translateX(-10%);
    z-index: 1;
}
.vid-pair-card-skel__stage::after {
    transform: translate(-50%, -50%) rotate(2.5deg) translateX(10%);
    z-index: 2;
    background-position: 50% 0;
}
.vid-pair-card-skel__body {
    padding: var(--vid-s-4) var(--vid-s-4) var(--vid-s-5);
    display: flex;
    flex-direction: column;
    gap: var(--vid-s-2);
}
.vid-pair-card-skel__line {
    height: 12px;
    width: 100%;
}
.vid-pair-card-skel__line--meta { width: 40%; }
.vid-pair-card-skel__line--title { width: 70%; height: 18px; }
.vid-pair-card-skel__line--offer { width: 50%; height: 28px; border-radius: var(--vid-radius-sm); }

/* ---------- Empty state v2 (refinement) ---------- */
.empty-state {
    padding: var(--vid-s-8) var(--vid-s-5);
    text-align: center;
    color: var(--vid-muted);
}
.empty-state__icon {
    font-size: 2.2rem;
    color: var(--vid-gold);
    margin-bottom: var(--vid-s-3);
    display: block;
    opacity: 0.7;
}
.empty-state__text {
    font-family: var(--vid-font-sans);
    font-weight: 700;
    font-size: var(--vid-text-base);
    color: var(--vid-ink);
    margin: 0 0 var(--vid-s-1) 0;
}
.empty-state__hint {
    font-family: var(--vid-font-serif);
    font-style: italic;
    font-size: var(--vid-text-sm);
    color: var(--vid-muted);
    margin: 0;
}