/**
 * Skeleton shimmer animation.
 *
 * Tailwind's `animate-pulse` covers the default case, but the shimmer
 * variant needs a moving linear-gradient stripe which Tailwind v4 utilities
 * can't express inline. Keyframes are scoped to `[data-animation="shimmer"]`
 * so the rule only matches skeletons in shimmer mode.
 *
 * Respects `prefers-reduced-motion`: no animation, no gradient — just the
 * flat placeholder color.
 */

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

[data-sl-skeleton][data-animation="shimmer"] {
  background-image: linear-gradient(
    90deg,
    var(--sl-color-bg-sunken) 0%,
    color-mix(in oklch, var(--sl-color-bg-sunken) 60%, var(--sl-color-bg-panel)) 50%,
    var(--sl-color-bg-sunken) 100%
  );
  background-size: 200% 100%;
  animation: sl-skeleton-shimmer 1.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  [data-sl-skeleton][data-animation="shimmer"] {
    animation: none;
    background-image: none;
  }
  [data-sl-skeleton][data-animation="pulse"] {
    animation: none;
  }
}