/* ============================================================================
   Skeleton Screen Animations
   - Shimmer: gradient sweep left-to-right
   - Pulse: opacity 1 → 0.4 → 1
   - Respects prefers-reduced-motion
   ============================================================================ */

.skeleton {
  background: #e5e7eb;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.5s infinite ease-in-out;
}

@keyframes skeleton-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.skeleton-pulse {
  background: #e5e7eb;
  border-radius: 8px;
  animation: skeleton-pulse-anim 1.5s infinite ease-in-out;
}

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

/* Disable all skeleton animations for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
  }
  .skeleton-pulse {
    animation: none;
  }
}