/**
 * Sparkles Motion Safe Animations
 * Respects user's motion preferences for accessibility
 *
 * CENTRALIZED MOTION-SAFE HANDLER
 * This file provides a global @media (prefers-reduced-motion: reduce) override that
 * disables 40+ animation/transition classes in one place. This CSS-only approach is
 * architecturally valid because converting all selectors to Tailwind motion-safe:/motion-reduce:
 * variants would require template changes across the entire codebase.
 *
 * FOR NEW COMPONENTS: prefer inline Tailwind motion variants instead of adding selectors here.
 * Examples: motion-safe:animate-bounce, motion-reduce:animate-none, motion-safe:transition-all.
 * This keeps motion preferences co-located with the component markup.
 */

/* Performance optimization for animations */
.animate-sparkle,
.animate-heart-beat,
.sparkles-float,
.sparkles-3d-card,
.sparkles-animation-optimized {
  will-change: transform, opacity;
  transform: translateZ(0); /* Force GPU acceleration */
  backface-visibility: hidden; /* Prevent flickering */
}

/* Reduce animation intensity on low-end devices */
@media (max-width: 640px) and (hover: none) {
  /* Mobile devices often have less GPU power */
  .animate-sparkle {
    animation-duration: 2s; /* Slower animation */
  }
  
  .sparkles-particle,
  .sparkles-confetti-piece {
    display: none; /* Hide particle effects on mobile */
  }
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  /* Disable all continuous animations */
  body .animate-sparkle,
  body .animate-heart-beat,
  body .animate-pulse,
  body .animate-bounce,
  body .animate-spin,
  body .animate-ping,
  body .sparkles-float,
  body .sparkles-wiggle,
  body .sparkles-shimmer,
  body .sparkles-marquee-content,
  body .sparkles-loading,
  body .sparkles-skeleton {
    animation: none;
  }

  /* Disable transition effects */
  body .sparkles-transition-normal,
  body .sparkles-transition-quick,
  body .sparkles-transition-standard,
  body .sparkles-transition-long {
    transition: none;
  }

  /* Disable hover effects that involve motion */
  body .sparkle-hover:hover,
  body .sparkle-lift:hover,
  body .sparkle-bounce:hover,
  body .sparkle-rotate:hover,
  body .sparkle-scale:hover,
  body .sparkles-hover-scale:hover,
  body .sparkles-3d-card:hover,
  body .sparkles-3d-button:hover {
    transform: none;
  }

  /* Keep color/opacity transitions for feedback */
  body * {
    transition-property: background-color, border-color, color, fill, stroke, opacity;
    transition-duration: 0.15s;
  }
}