/*
 * Javelin skeleton loading primitives.
 * Shared by the admin dashboard (templates/dashboard_base.html via base.html)
 * and the default storefront layout (templates/storefront/layout/base.html).
 *
 * Theming: override --jv-skel-* custom properties on any ancestor (e.g. a
 * theme's own base.html) to match that theme's corner radius / surface
 * colors. Brand-tinted shimmer is opt-in via the `jv-skeleton--brand`
 * modifier + the --jv-skel-brand-shine variable (set inline from
 * store.primary_color where the page has access to it).
 */

:root {
    --jv-skel-base: #e5e7eb;       /* gray-200 */
    --jv-skel-shine: rgba(255, 255, 255, 0.65);
    --jv-skel-radius: 0.75rem;
    --jv-skel-brand-shine: rgba(99, 102, 241, 0.18);
}

/* Admin dashboard + any theme using class-based dark mode (Tailwind darkMode:'class'). */
.dark {
    --jv-skel-base: #2d2d33;
    --jv-skel-shine: rgba(255, 255, 255, 0.08);
    --jv-skel-brand-shine: rgba(99, 102, 241, 0.12);
}

.jv-skeleton {
    position: relative;
    display: block;
    overflow: hidden;
    background-color: var(--jv-skel-base);
    border-radius: var(--jv-skel-radius);
    /* Containing block for the ::after shimmer sweep. */
    isolation: isolate;
}

.jv-skeleton--circle {
    border-radius: 9999px;
}

.jv-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(100deg, transparent 30%, var(--jv-skel-shine) 50%, transparent 70%);
    background-size: 200% 100%;
    background-position: -150% 0;
    animation: jv-skeleton-shimmer 1.6s ease-in-out infinite;
}

.jv-skeleton--brand::after {
    background-image: linear-gradient(100deg, transparent 30%, var(--jv-skel-brand-shine) 50%, transparent 70%);
}

@keyframes jv-skeleton-shimmer {
    to { background-position: 150% 0; }
}

/* Respect the user's motion preference: drop the sweeping shine and fall
   back to a flat, static placeholder instead of Tailwind's animate-pulse. */
@media (prefers-reduced-motion: reduce) {
    .jv-skeleton::after {
        animation: none;
        display: none;
    }
}