/*
 * Skeleton loaders and list reveals (wwwroot/js/list-loader.js drives them).
 * Plain CSS on purpose: Tailwind preflight is off and tailwind.min.css only rebuilds on Publish.
 *
 *   <div data-skeleton="post" data-count="3"></div>   a placeholder shaped like the content that is coming
 *   <div data-reveal="rise|drop|slide|pop|deal|podium|fade"> ... </div>
 *       its direct children are hidden until they scroll into view, then enter one after another
 */

/* ---------- Skeleton blocks ---------- */

.sk {
    display: block;
    border-radius: 0.6rem;
    background-color: var(--fallback-b3, oklch(var(--b3) / 0.55));
    /* fixed attachment: every block on the page shares one band of light, so they shimmer as a single sweep */
    background-image: linear-gradient(100deg,
        transparent 0%, transparent 38%,
        var(--fallback-b1, oklch(var(--b1) / 0.55)) 50%,
        transparent 62%, transparent 100%);
    background-size: 220% 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    animation: sk-shimmer 1.6s ease-in-out infinite;
}

@keyframes sk-shimmer {
    0% { background-position: 130% 0; }
    100% { background-position: -30% 0; }
}

.sk-circle { border-radius: 9999px; flex-shrink: 0; }
.sk-line { height: 0.65rem; }
.sk-line-lg { height: 0.9rem; }
.sk-w-25 { width: 25%; }
.sk-w-40 { width: 40%; }
.sk-w-60 { width: 60%; }
.sk-w-75 { width: 75%; }
.sk-w-90 { width: 90%; }
.sk-grow { flex: 1 1 auto; min-width: 0; }

.sk-host { display: flex; flex-direction: column; gap: 0.75rem; }
.sk-host[data-skeleton="story"],
.sk-host[data-skeleton="tile-row"] { flex-direction: row; overflow: hidden; }
.sk-host[data-skeleton="tile"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }

.sk-card {
    background: var(--fallback-b1, oklch(var(--b1) / 1));
    border: 1px solid var(--fallback-b2, oklch(var(--b2) / 1));
    border-radius: 1rem;
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.sk-row-inner { display: flex; align-items: center; gap: 0.7rem; }

/* Post: avatar + name, two lines of text, a media block, an action row */
.sk-post .sk-media { height: 11rem; border-radius: 0.8rem; }
.sk-post .sk-actions { display: flex; gap: 0.75rem; }
.sk-post .sk-actions .sk { height: 1.6rem; width: 4.5rem; border-radius: 9999px; }

/* Leaderboard row: rank, avatar, name, score bar */
.sk-rank { width: 2.25rem; height: 2.25rem; border-radius: 0.7rem; flex-shrink: 0; }
.sk-score { width: 4rem; height: 1.1rem; flex-shrink: 0; }

/* Podium: three blocks at different heights */
.sk-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; align-items: end; max-width: 28rem; margin: 0 auto; width: 100%; }
.sk-podium > div { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; }
.sk-podium .sk-block { width: 100%; border-radius: 0.8rem 0.8rem 0 0; }

/* Tile (vendor, menu item, wardrobe item) */
.sk-tile .sk-media { height: 8.5rem; border-radius: 0.8rem; }
.sk-host[data-skeleton="tile-row"] > .sk-tile { width: 11rem; flex-shrink: 0; }

/* Story bubbles */
.sk-story { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; flex-shrink: 0; }

/* The navigation overlay (layout #global-skeleton-loader) fades its page skeleton in */
#global-skeleton-loader:not(.hidden) > * { animation: rv-fade 220ms ease-out backwards; }

/* ---------- List reveal ---------- */

/* list-loader.js adds rv-js to <html> before first paint; without the script nothing is ever hidden */
html.rv-js [data-reveal] > :not(.rv-in):not(.rv-done):not([data-reveal-skip]):not([data-skeleton]):not(script):not(style):not(template) {
    opacity: 0;
}

.rv-in {
    animation-duration: 560ms;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
    /* backwards: hold the first frame through the stagger delay, then leave no transform behind
       (a lingering transform would trap position:fixed children such as modals) */
    animation-fill-mode: backwards;
    animation-delay: calc(var(--rv-i, 0) * 55ms);
    animation-name: rv-rise;
}

[data-reveal="drop"] > .rv-in { animation-name: rv-drop; }
[data-reveal="slide"] > .rv-in { animation-name: rv-slide; animation-duration: 480ms; }
[data-reveal="pop"] > .rv-in { animation-name: rv-pop; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); animation-delay: calc(var(--rv-i, 0) * 45ms); }
[data-reveal="deal"] > .rv-in { animation-name: rv-deal; animation-duration: 620ms; }
[data-reveal="fade"] > .rv-in { animation-name: rv-fade; animation-duration: 360ms; }
[data-reveal="podium"] > .rv-in { animation-name: rv-podium; animation-duration: 700ms; animation-delay: calc(var(--rv-i, 0) * 180ms); transform-origin: 50% 100%; }
[data-reveal="podium"] > .rv-in.rv-first { animation-name: rv-podium, rv-glow; animation-duration: 700ms, 1100ms; animation-delay: calc(var(--rv-i, 0) * 180ms), calc(var(--rv-i, 0) * 180ms + 450ms); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1), ease-out; }

@keyframes rv-rise {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to { opacity: 1; transform: none; }
}
@keyframes rv-drop {
    from { opacity: 0; transform: translateY(-14px) scale(0.985); }
    to { opacity: 1; transform: none; }
}
@keyframes rv-slide {
    from { opacity: 0; transform: translateX(-22px); }
    to { opacity: 1; transform: none; }
}
@keyframes rv-pop {
    from { opacity: 0; transform: scale(0.55); }
    to { opacity: 1; transform: none; }
}
@keyframes rv-deal {
    from { opacity: 0; transform: translateY(18px) rotate(-2.5deg) scale(0.92); }
    to { opacity: 1; transform: none; }
}
@keyframes rv-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes rv-podium {
    from { opacity: 0; transform: translateY(48px) scaleY(0.6); }
    70% { opacity: 1; }
    to { opacity: 1; transform: none; }
}
@keyframes rv-glow {
    0% { filter: drop-shadow(0 0 0 rgba(250, 204, 21, 0)); }
    40% { filter: drop-shadow(0 0 18px rgba(250, 204, 21, 0.65)); }
    100% { filter: drop-shadow(0 0 0 rgba(250, 204, 21, 0)); }
}

/* Feed photos sharpen once they arrive */
.rv-img-pending { filter: blur(10px); transform: scale(1.02); }
.rv-img-sharpen { transition: filter 450ms ease-out, transform 450ms ease-out; }

/* Leaderboard tab switches: a short skeleton sits over the list while it swaps */
.rv-swap { position: relative; }
.rv-swap > .rv-swap-sk { position: absolute; inset: 0; z-index: 2; overflow: hidden; background: var(--fallback-b1, oklch(var(--b1) / 1)); }

@media (prefers-reduced-motion: reduce) {
    .sk { animation: none; background-image: none; }
    .rv-in,
    [data-reveal] > .rv-in,
    [data-reveal="podium"] > .rv-in.rv-first {
        animation-name: rv-fade !important;
        animation-duration: 180ms !important;
        animation-delay: 0ms !important;
    }
    .rv-img-pending { filter: none; transform: none; }
}

@media print {
    html.rv-js [data-reveal] > * { opacity: 1 !important; }
    .sk-host { display: none !important; }
}