/**
 * AllOEMRims Skeleton Loader — Phase 4 polish.
 *
 * Standardized loading pattern for cards, lists, and grids. Use the
 * `.aor-skeleton` class on elements to give them a shimmering placeholder
 * appearance. Variants for common shapes (card, line, circle).
 *
 * Usage:
 *   <div class="aor-skeleton-card">
 *     <div class="aor-skeleton aor-skeleton-image"></div>
 *     <div class="aor-skeleton aor-skeleton-line"></div>
 *     <div class="aor-skeleton aor-skeleton-line aor-skeleton-line-short"></div>
 *   </div>
 */

.aor-skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.04) 100%
    );
    background-size: 200% 100%;
    animation: aor-skeleton-shimmer 1500ms infinite linear;
    border-radius: 6px;
}

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

.aor-skeleton-card {
    background: linear-gradient(135deg, #0a1929 0%, #050d18 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.aor-skeleton-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
}

.aor-skeleton-line {
    height: 14px;
    width: 100%;
}

.aor-skeleton-line-short { width: 60%; }
.aor-skeleton-line-tiny  { width: 30%; height: 11px; }

.aor-skeleton-circle {
    border-radius: 50%;
    width: 48px;
    height: 48px;
}

.aor-skeleton-button {
    height: 40px;
    width: 120px;
    border-radius: 8px;
}

/* Grid layout helper for skeleton card grids */
.aor-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

@media (prefers-reduced-motion: reduce) {
    .aor-skeleton {
        animation: none;
        background: rgba(255, 255, 255, 0.06);
    }
}