/* ============================================
   ANIMATIONS
   ============================================ */

/* Page Transitions */
.page-enter {
  animation: pageEnter 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

.page-exit {
  animation: pageExit 0.2s ease-in;
}

@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pageExit {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* Fade */
.fade-in {
  animation: fadeIn 0.3s ease-out;
}

.fade-out {
  animation: fadeOut 0.2s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Scale In */
.scale-in {
  animation: scaleIn 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide Up */
.slide-up {
  animation: slideUp 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

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

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Bounce */
.bounce {
  animation: bounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes bounce {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.1);
  }

  70% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}

/* Score Flash */
.score-flash {
  animation: scoreFlash 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scoreFlash {
  0% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.3);
  }

  60% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}

/* Shimmer / Skeleton Loading */
.skeleton {
  background: linear-gradient(90deg,
      var(--bg-tertiary) 25%,
      var(--border) 50%,
      var(--bg-tertiary) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

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

  100% {
    background-position: -200% 0;
  }
}

/* Confetti-like celebration (winner) */
.celebration {
  animation: celebrate 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes celebrate {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Pulse Glow */
.pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {

  0%,
  100% {
    box-shadow: 0 0 0 0 var(--live-pulse);
  }

  50% {
    box-shadow: 0 0 0 8px transparent;
  }
}

/* Float */
.float {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

/* Spin */
.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Stagger animations */
.stagger>*:nth-child(1) {
  animation-delay: 0ms;
}

.stagger>*:nth-child(2) {
  animation-delay: 50ms;
}

.stagger>*:nth-child(3) {
  animation-delay: 100ms;
}

.stagger>*:nth-child(4) {
  animation-delay: 150ms;
}

.stagger>*:nth-child(5) {
  animation-delay: 200ms;
}

.stagger>*:nth-child(6) {
  animation-delay: 250ms;
}

.stagger>*:nth-child(7) {
  animation-delay: 300ms;
}

.stagger>*:nth-child(8) {
  animation-delay: 350ms;
}

/* Swirl */
.swirl {
  animation: swirl 0.5s ease-out;
}

@keyframes swirl {
  from {
    transform: rotate(-10deg) scale(0.95);
    opacity: 0;
  }

  to {
    transform: rotate(0) scale(1);
    opacity: 1;
  }
}

/* Drag and Drop */
.dragging {
  opacity: 0.6;
  transform: scale(1.02);
  box-shadow: 0 8px 32px var(--shadow-lg);
  z-index: 999;
}

.drag-over {
  border: 2px dashed var(--accent);
  background: rgba(6, 138, 250, 0.05);
}

/* Fade In Up (generic) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Toast animations */
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
}

/* Live pulse */
@keyframes pulse-live {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 8px var(--accent-red);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.2);
    box-shadow: 0 0 16px var(--accent-red);
  }
}

/* Live badge pulse */
@keyframes livePulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

@keyframes liveDot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}