/* ========================================
   KeysGotIt Animations & Transition Utilities
   ======================================== */

/* --- Keyframes --- */

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 15px rgba(212, 160, 32, 0.3), 0 0 45px rgba(212, 160, 32, 0.1); }
  50% { box-shadow: 0 0 25px rgba(212, 160, 32, 0.5), 0 0 60px rgba(212, 160, 32, 0.2), 0 0 100px rgba(212, 160, 32, 0.08); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@keyframes slide-up-fade {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes border-glow {
  from { --angle: 0deg; }
  to { --angle: 360deg; }
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.5; }
}

@keyframes count-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes row-slide-in {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: translateX(0); }
}

/* --- Animation utility classes --- */

.animate-glow { animation: glow-pulse 2s ease-in-out infinite; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-shimmer {
  animation: shimmer 2s infinite;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.03) 50%, transparent 60%);
  background-size: 200% 100%;
}
.animate-gradient { animation: gradient-shift 8s ease-in-out infinite alternate; background-size: 200% 200%; }
.animate-pulse-dot { animation: pulse-dot 1.5s ease-in-out infinite; }

/* Scroll-triggered: add .visible class via IntersectionObserver */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Stagger delays for children */
.stagger > *:nth-child(1) { transition-delay: 0ms; }
.stagger > *:nth-child(2) { transition-delay: 80ms; }
.stagger > *:nth-child(3) { transition-delay: 160ms; }
.stagger > *:nth-child(4) { transition-delay: 240ms; }
.stagger > *:nth-child(5) { transition-delay: 320ms; }
.stagger > *:nth-child(6) { transition-delay: 400ms; }
.stagger > *:nth-child(7) { transition-delay: 480ms; }
.stagger > *:nth-child(8) { transition-delay: 560ms; }
.stagger > *:nth-child(9) { transition-delay: 640ms; }
.stagger > *:nth-child(10) { transition-delay: 720ms; }

/* Leaderboard row stagger */
.row-enter { opacity: 0; transform: translateX(-16px); transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); }
.row-enter.visible { opacity: 1; transform: translateX(0); }

/* --- Hover transition utilities --- */

.hover-lift { transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out); }
.hover-lift:hover { transform: translateY(-6px); }

.hover-glow { transition: box-shadow var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out); }
.hover-glow:hover { box-shadow: 0 0 20px rgba(212, 160, 32, 0.3), 0 0 50px rgba(212, 160, 32, 0.1); border-color: var(--border-strong); }

.hover-scale { transition: transform var(--duration-normal) var(--ease-out); }
.hover-scale:hover { transform: scale(1.04); }
.hover-scale:active { transform: scale(0.97); }