/* ========================================
   MUSLOOK — Animations
   ======================================== */

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes wave { 0% { transform: translateX(0) scaleY(1); } 50% { transform: translateX(-25%) scaleY(0.55); } 100% { transform: translateX(-50%) scaleY(1); } }
@keyframes floatUp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes glowPulse { 0%, 100% { box-shadow: 0 0 5px rgba(var(--accent-primary-rgb), 0.2); } 50% { box-shadow: 0 0 20px rgba(var(--accent-primary-rgb), 0.4); } }
@keyframes progressFill { from { width: 0; } }
@keyframes countUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bubbleRise { 0% { transform: translateY(100%) scale(0.4); opacity: 0; } 20% { opacity: 0.6; } 100% { transform: translateY(-100vh) scale(1); opacity: 0; } }

/* Utility animation classes */
.animate-fade-in { animation: fadeIn 0.4s ease; }
.animate-slide-up { animation: slideInUp 0.4s ease; }
.animate-slide-left { animation: slideInLeft 0.4s ease; }
.animate-slide-right { animation: slideInRight 0.4s ease; }
.animate-scale-in { animation: scaleIn 0.3s ease; }
.animate-pulse { animation: pulse 2s infinite; }
.animate-float { animation: floatUp 3s ease-in-out infinite; }
.animate-glow { animation: glowPulse 2s ease-in-out infinite; }

/* Staggered stat card animations */
.stats-grid .stat-card { animation: slideInUp 0.5s ease backwards; }
.stats-grid .stat-card:nth-child(1) { animation-delay: 0ms; }
.stats-grid .stat-card:nth-child(2) { animation-delay: 100ms; }
.stats-grid .stat-card:nth-child(3) { animation-delay: 200ms; }
.stats-grid .stat-card:nth-child(4) { animation-delay: 300ms; }

/* Table row animation */
.data-table tbody tr { animation: fadeIn 0.3s ease backwards; }
.data-table tbody tr:nth-child(1) { animation-delay: 0ms; }
.data-table tbody tr:nth-child(2) { animation-delay: 30ms; }
.data-table tbody tr:nth-child(3) { animation-delay: 60ms; }
.data-table tbody tr:nth-child(4) { animation-delay: 90ms; }
.data-table tbody tr:nth-child(5) { animation-delay: 120ms; }
.data-table tbody tr:nth-child(6) { animation-delay: 150ms; }
.data-table tbody tr:nth-child(7) { animation-delay: 180ms; }
.data-table tbody tr:nth-child(8) { animation-delay: 210ms; }
.data-table tbody tr:nth-child(9) { animation-delay: 240ms; }
.data-table tbody tr:nth-child(10) { animation-delay: 270ms; }

/* Water background decoration */
.water-bg { position: fixed; bottom: 0; left: 0; right: 0; height: 200px; pointer-events: none; z-index: 0; overflow: hidden; }
.water-bg::before { content: ''; position: absolute; bottom: -10px; left: -50%; width: 200%; height: 100px; background: var(--accent-primary); opacity: 0.03; border-radius: 40%; animation: wave 8s linear infinite; }
.water-bg::after { content: ''; position: absolute; bottom: -20px; left: -50%; width: 200%; height: 120px; background: var(--accent-secondary); opacity: 0.02; border-radius: 45%; animation: wave 12s linear infinite reverse; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}