/* ============================================================
   Skeleton Screen — reusable placeholder library
   ------------------------------------------------------------
   Usage:
     <div class="skeleton skeleton-rect-16x9"></div>
     <div class="skeleton skeleton-text"></div>
     <div class="skeleton skeleton-card"></div>

   Design notes:
   - Light theme only (matches main.css palette).
   - CSS-only animation (GPU accelerated via background-position).
   - Min display 300ms enforced by JS (avoid flicker on fast load).
   - aria-busy="true" should be set on container for a11y.
   ============================================================ */

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

.skeleton {
    background: linear-gradient(
        90deg,
        #e5e7eb 0%,
        #f3f4f6 50%,
        #e5e7eb 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
    /* Prevent text selection on placeholder */
    user-select: none;
    pointer-events: none;
}

/* Darker variant — use trên nền tối (vd video player container đen) */
.skeleton-dark {
    background: linear-gradient(
        90deg,
        #2a2a2a 0%,
        #3a3a3a 50%,
        #2a2a2a 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
    user-select: none;
    pointer-events: none;
}

/* ------------------------------------------------------------
   Shape variants
   ------------------------------------------------------------ */

/* Text line */
.skeleton-text {
    height: 0.9em;
    margin: 0.4em 0;
    border-radius: 4px;
}
.skeleton-text-sm { height: 0.7em; }
.skeleton-text-lg { height: 1.2em; }

/* Width variants */
.skeleton-w-25  { width: 25%; }
.skeleton-w-50  { width: 50%; }
.skeleton-w-75  { width: 75%; }
.skeleton-w-100 { width: 100%; }

/* Rectangle / container */
.skeleton-rect-16x9 {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
}

.skeleton-card {
    width: 100%;
    height: 80px;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.skeleton-card-sm { height: 60px; }
.skeleton-card-lg { height: 110px; }

/* Circle (avatar / icon placeholder) */
.skeleton-circle {
    border-radius: 50%;
    aspect-ratio: 1;
}
.skeleton-circle-sm { width: 24px; }
.skeleton-circle-md { width: 40px; }
.skeleton-circle-lg { width: 64px; }

/* Button / pill placeholder */
.skeleton-btn {
    width: 100px;
    height: 32px;
    border-radius: 16px;
}

/* ------------------------------------------------------------
   Fade out transition (JS adds .skeleton-fade-out before remove)
   ------------------------------------------------------------ */
.skeleton-fade-out {
    opacity: 0;
    transition: opacity 250ms ease;
}

/* Accessibility — reduce motion */
@media (prefers-reduced-motion: reduce) {
    .skeleton,
    .skeleton-dark {
        animation: none;
        background: #e5e7eb;
    }
}