/**
 * <Skeleton> — placeholder block for initial loads.
 *
 * Animation respects prefers-reduced-motion (no shimmer in that mode).
 *
 * Markup:
 *   <span class="c-skeleton" style="--c-skeleton-w: 140px; --c-skeleton-h: 22px"></span>
 *   <div class="c-skeleton c-skeleton--block" style="height: 80px"></div>
 *
 * Custom properties:
 *   --c-skeleton-w  width  (default 100%)
 *   --c-skeleton-h  height (default 12px)
 */

.c-skeleton {
  --c-skeleton-w: 100%;
  --c-skeleton-h: 12px;

  display: inline-block;
  width: var(--c-skeleton-w);
  height: var(--c-skeleton-h);
  border-radius: var(--radius-sm);
  background-color: var(--bg-tertiary);
  background-image: linear-gradient(
    90deg,
    var(--bg-tertiary) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    var(--bg-tertiary) 100%
  );
  background-size: 200% 100%;
  background-position: 100% 0;
  animation: c-skeleton-shimmer 1.4s ease-in-out infinite;
}

.c-skeleton--block {
  display: block;
  width: 100%;
}

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

@media (prefers-reduced-motion: reduce) {
  .c-skeleton {
    animation: none;
    background-image: none;
  }
}