/* ═══════════════════════════════════════════════════════════════════════════
   MOTION LIBRARY — NileGameAcademy Motion Primitives
   Keyframes & microanimation utilities (GPU-accelerated, performant, interruptible).

   All animations use design system timing tokens where available.
   All animations respect prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────────
   INTERACTIVE MICRO-INTERACTIONS
   ──────────────────────────────────────────────────────────────────────── */

.interactive-pop {
  transition: transform var(--duration-fast, 150ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
              box-shadow var(--duration-fast, 150ms) var(--ease-smooth, cubic-bezier(0.4, 0.0, 0.2, 1));
}
.interactive-pop:active {
  transform: scale(0.96);
}
.interactive-pop:hover {
  transform: scale(1.02);
}

/* Smooth Lift on Hover */
.hover-lift {
  transition: transform var(--duration-fast, 150ms) var(--ease-smooth, cubic-bezier(0.4, 0.0, 0.2, 1)),
              box-shadow var(--duration-fast, 150ms) var(--ease-smooth, cubic-bezier(0.4, 0.0, 0.2, 1));
}
.hover-lift:hover {
  transform: translateY(-2px);
}
.hover-lift:active {
  transform: translateY(0);
}

/* ────────────────────────────────────────────────────────────────────────
   ENTRANCE ANIMATIONS
   ──────────────────────────────────────────────────────────────────────── */

/* Fade In */
@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.animate-fade-in {
  animation: fade-in var(--duration-normal, 250ms) var(--ease-smooth, cubic-bezier(0.4, 0.0, 0.2, 1)) forwards;
}

/* Slide Up */
@keyframes slide-up {
  0% { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.animate-slide-up {
  animation: slide-up var(--duration-normal, 250ms) var(--ease-smooth, cubic-bezier(0.4, 0.0, 0.2, 1)) forwards;
}

/* Spring In (Modals, Badges, Toasts) */
@keyframes spring-in {
  0% { transform: scale(0.85); opacity: 0; }
  70% { transform: scale(1.04); }
  100% { transform: scale(1); opacity: 1; }
}
.animate-spring-in {
  animation: spring-in var(--duration-normal, 250ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) forwards;
}

/* ────────────────────────────────────────────────────────────────────────
   GLASS SURFACE ANIMATIONS
   ──────────────────────────────────────────────────────────────────────── */

/* Glass Shimmer — subtle light sweep across glass surfaces */
@keyframes glass-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.animate-glass-shimmer {
  position: relative;
  overflow: hidden;
}
.animate-glass-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.05) 45%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(255, 255, 255, 0.05) 55%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: glass-shimmer 4s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}

/* Card Enter — staggered entrance for card grids */
@keyframes card-enter {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.animate-card-enter {
  animation: card-enter var(--duration-slow, 400ms) var(--ease-smooth, cubic-bezier(0.4, 0.0, 0.2, 1)) forwards;
  opacity: 0;
}
/* Stagger delays for card grids */
.animate-card-enter:nth-child(1) { animation-delay: 0ms; }
.animate-card-enter:nth-child(2) { animation-delay: 60ms; }
.animate-card-enter:nth-child(3) { animation-delay: 120ms; }
.animate-card-enter:nth-child(4) { animation-delay: 180ms; }
.animate-card-enter:nth-child(5) { animation-delay: 240ms; }
.animate-card-enter:nth-child(6) { animation-delay: 300ms; }
.animate-card-enter:nth-child(7) { animation-delay: 360ms; }
.animate-card-enter:nth-child(8) { animation-delay: 420ms; }

/* ────────────────────────────────────────────────────────────────────────
   MODAL & DROPDOWN TRANSITIONS
   ──────────────────────────────────────────────────────────────────────── */

@keyframes modal-enter {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
    backdrop-filter: blur(0px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    backdrop-filter: blur(24px);
  }
}
.animate-modal-enter {
  animation: modal-enter var(--duration-normal, 250ms) var(--ease-smooth, cubic-bezier(0.4, 0.0, 0.2, 1)) forwards;
}

@keyframes modal-exit {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
}
.animate-modal-exit {
  animation: modal-exit var(--duration-fast, 150ms) var(--ease-in, cubic-bezier(0.4, 0.0, 1, 1)) forwards;
}

@keyframes dropdown-enter {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.animate-dropdown-enter {
  animation: dropdown-enter var(--duration-fast, 150ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) forwards;
}

@keyframes dropdown-exit {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.95) translateY(-4px);
  }
}
.animate-dropdown-exit {
  animation: dropdown-exit var(--duration-instant, 80ms) var(--ease-in, cubic-bezier(0.4, 0.0, 1, 1)) forwards;
}

/* ────────────────────────────────────────────────────────────────────────
   PROGRESS & SUCCESS ANIMATIONS
   ──────────────────────────────────────────────────────────────────────── */

@keyframes progress-fill {
  0% { width: 0%; }
}
.animate-progress-fill {
  animation: progress-fill var(--duration-dramatic, 800ms) var(--ease-smooth, cubic-bezier(0.4, 0.0, 0.2, 1)) forwards;
}

@keyframes success-check {
  0% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
.animate-success-check path {
  stroke-dasharray: 100;
  animation: success-check 0.5s var(--ease-smooth, cubic-bezier(0.4, 0.0, 0.2, 1)) forwards;
}

/* ────────────────────────────────────────────────────────────────────────
   GAMIFICATION ANIMATIONS
   ──────────────────────────────────────────────────────────────────────── */

/* Floating Rewards / XP Burst */
@keyframes float-up-fade {
  0% { transform: translateY(0) scale(0.8); opacity: 0; }
  20% { transform: translateY(-10px) scale(1.1); opacity: 1; }
  100% { transform: translateY(-48px) scale(1); opacity: 0; }
}
.animate-float-reward {
  animation: float-up-fade var(--duration-dramatic, 800ms) var(--ease-out, cubic-bezier(0.0, 0.0, 0.2, 1)) forwards;
}

/* Pulse (Attract Attention / Flame streak) */
@keyframes pulse-subtle {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.85; }
}
.animate-pulse-subtle {
  animation: pulse-subtle 2s infinite ease-in-out;
}

/* Shake Feedback (Validation / Error) */
@keyframes soft-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.animate-soft-shake {
  animation: soft-shake var(--duration-slow, 400ms) var(--ease-smooth, cubic-bezier(0.4, 0.0, 0.2, 1));
}

/* ────────────────────────────────────────────────────────────────────────
   LOADING EFFECTS
   ──────────────────────────────────────────────────────────────────────── */

/* Shimmer Effect (Loading Skeletons) */
@keyframes shimmer-sweep {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer-sweep {
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.08) 50%, 
    rgba(255, 255, 255, 0) 100%);
  background-size: 200% 100%;
  animation: shimmer-sweep 2s infinite linear;
}
.dark .shimmer-sweep {
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.04) 50%, 
    rgba(255, 255, 255, 0) 100%);
  background-size: 200% 100%;
  animation: shimmer-sweep 2s infinite linear;
}

/* ────────────────────────────────────────────────────────────────────────
   NAV HOVER ANIMATION — subtle active indicator
   ──────────────────────────────────────────────────────────────────────── */

.nav-item-hover {
  position: relative;
  transition: color var(--duration-fast, 150ms) var(--ease-smooth);
}
.nav-item-hover::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 70%;
  height: 2px;
  background: var(--primary-color, #2E79C7);
  border-radius: 1px;
  transition: transform var(--duration-fast, 150ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}
.nav-item-hover:hover::after,
.nav-item-hover.active::after {
  transform: translateX(-50%) scaleX(1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY: prefers-reduced-motion safety
   All animations and transitions are killed for users who prefer it.
   ═══════════════════════════════════════════════════════════════════════════ */

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