@layer components {
  .skeleton {
    background-color: var(--accent);
    border-radius: var(--radius-md);
    animation: skeleton-pulse 2s ease-in-out infinite;
  }

  .skeleton-round {
    border-radius: 9999px;
  }

  @keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }
}

/* Accessibility: suppress motion for users who request it (REQUIRED for all
   components — AGENTS.md "Accessibility CSS"). Near-zero duration instead of
   `none` keeps transitionend/animationend (and discrete display flips)
   firing so JS state machines that await them keep working. */
@media (prefers-reduced-motion: reduce) {
  @layer components {
    .skeleton,
    .skeleton *,
    .skeleton::before,
    .skeleton::after,
    .skeleton *::before,
    .skeleton *::after,
    .skeleton::backdrop,
    .skeleton-round,
    .skeleton-round *,
    .skeleton-round::before,
    .skeleton-round::after,
    .skeleton-round *::before,
    .skeleton-round *::after,
    .skeleton-round::backdrop {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}