/**
 * Racket365 - Sports Management Platform
 * Copyright (c) 2026 iGEN Service LLC. All rights reserved.
 *
 * This source code is proprietary and confidential.
 * Unauthorized copying, modification, or distribution is strictly prohibited.
 */
/* ─── ANIMATIONS ──────────────────────────────────────────────────────────── */

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideOutRight {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(100%); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* ── Utility animation classes ── */
.animate-fade-in    { animation: fadeIn var(--duration-normal) var(--ease-out); }
.animate-fade-in-up { animation: fadeInUp var(--duration-slow) var(--ease-out); }
.animate-slide-up   { animation: slideUp var(--duration-normal) var(--ease-out); }
.animate-pulse      { animation: pulse 2s ease-in-out infinite; }

/* ── Page enter transition ── */
.page-enter {
  animation: fadeInUp var(--duration-slow) var(--ease-out);
}

/* ── Staggered list items ── */
.stagger-item {
  animation: fadeInUp var(--duration-slow) var(--ease-out) both;
}

.stagger-item:nth-child(1)  { animation-delay: 0ms; }
.stagger-item:nth-child(2)  { animation-delay: 40ms; }
.stagger-item:nth-child(3)  { animation-delay: 80ms; }
.stagger-item:nth-child(4)  { animation-delay: 120ms; }
.stagger-item:nth-child(5)  { animation-delay: 160ms; }
.stagger-item:nth-child(6)  { animation-delay: 200ms; }
.stagger-item:nth-child(7)  { animation-delay: 240ms; }
.stagger-item:nth-child(8)  { animation-delay: 280ms; }

/* ── Spinner ── */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--clr-gray-200);
  border-top-color: var(--color-accent);
  border-radius: var(--radius-full);
  animation: spin 0.7s linear infinite;
}

.spinner-sm { width: 14px; height: 14px; border-width: 2px; }
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }

.loading-center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16);
}