/**
 * Module: animations.css
 * Purpose: Animation-specific styles including reduced-motion overrides
 *
 * This stylesheet provides CSS hooks for JavaScript-driven animations
 * and accessibility overrides for users who prefer reduced motion.
 */

/* State marker class for score animation (no visual changes needed) */
.score-animating {
  /* Placeholder for potential future visual feedback during animation */
}

/* Prevent container collapse during rank animation */
.rank-animating {
  min-height: 200px;
}

/* Optimize transform performance during rank animations */
.rank-animating .leaderboard-card-wrapper {
  will-change: transform;
}

/**
 * Reduced motion overrides
 * Disable CSS animations when user prefers reduced motion
 */
@media (prefers-reduced-motion: reduce) {
  .leaderboard-grid * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .leaderboard-card {
    transition: none !important;
  }

  .leaderboard-card-wrapper {
    transition: none !important;
  }
}