/* =====================================================================
   Site-wide Poster / Cover Skeleton Loader
   - Wraps poster images with a shimmer placeholder until they load
   - Works hand-in-hand with /js/skeleton-loader.js
   - Ratio defaults to 2:3 (poster). Override per element with --skeleton-ratio.
   ===================================================================== */

/* Wrapper auto-injected by skeleton-loader.js */
.sk-wrap {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
}

/* Skeleton element (placed BEFORE the img inside the wrap) */
.sk-skeleton {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        rgba(26,26,26,1) 25%,
        rgba(40,40,40,1) 50%,
        rgba(26,26,26,1) 75%);
    background-size: 200% 100%;
    animation: sk-shimmer 1.4s linear infinite;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
}

/* Image fades in on load */
.sk-img {
    opacity: 0;
    transition: opacity 0.35s ease-out;
    position: relative;
    z-index: 2;
}
.sk-img.sk-loaded {
    opacity: 1;
}
/* If JS never runs (no-JS fallback), still show the image */
html.no-js .sk-img,
.sk-img[data-sk-fallback] {
    opacity: 1;
}

/* Hide skeleton once image is loaded */
.sk-wrap.sk-done .sk-skeleton {
    opacity: 0;
    transition: opacity 0.25s ease-out;
}

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

/* ---------------------------------------------------------------
   Sidebar thumbnail cards: sk-wrap must NOT stretch to 100% width.
   These images have a fixed 60×80 px size and live inside a flex
   row (.sidebar-movie-card / .sidebar-series-card).  The generic
   `width: 100%` on .sk-wrap would take over the whole row.
   --------------------------------------------------------------- */
.sidebar-movie-card .sk-wrap,
.sidebar-series-card .sk-wrap {
    width: 60px;
    height: 80px;
    flex-shrink: 0;
    display: inline-block;
}

.sidebar-movie-card .sk-wrap .sk-img,
.sidebar-series-card .sk-wrap .sk-img {
    width: 60px;
    height: 80px;
    object-fit: cover;
}

/* Standalone skeleton card (used in initial server-rendered placeholders, e.g. welcome.blade.php) */
.skeleton-card-generic {
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
}
.skeleton-card-generic .skeleton-poster-generic {
    aspect-ratio: 2 / 3;
    background: linear-gradient(90deg, #1a1a1a 25%, #252525 50%, #1a1a1a 75%);
    background-size: 200% 100%;
    animation: sk-shimmer 1.4s linear infinite;
}
.skeleton-card-generic .skeleton-line-generic {
    height: 13px;
    border-radius: 6px;
    background: linear-gradient(90deg, #1a1a1a 25%, #252525 50%, #1a1a1a 75%);
    background-size: 200% 100%;
    animation: sk-shimmer 1.4s linear infinite;
    margin: 8px 12px;
}