/* ===========================================
   ✨ ANIMATIONS - 过渡动画
   =========================================== */

/* ===== FADE ANIMATIONS ===== */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

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

@keyframes fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== SLIDE ANIMATIONS ===== */
@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

@keyframes slide-out-left {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-20px);
  }
}

@keyframes slide-out-right {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(20px);
  }
}

/* ===== SCALE ANIMATIONS ===== */
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

/* ===== SPIN ANIMATION ===== */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ===== BOUNCE ANIMATION ===== */
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translateY(0);
  }
  40%, 43% {
    transform: translateY(-8px);
  }
  70% {
    transform: translateY(-4px);
  }
  90% {
    transform: translateY(-2px);
  }
}

/* ===== PULSE ANIMATION ===== */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ===== SHAKE ANIMATION ===== */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
  20%, 40%, 60%, 80% { transform: translateX(2px); }
}

/* ===== UTILITY ANIMATION CLASSES ===== */
.animate-fade-in { animation: fade-in 0.3s ease; }
.animate-fade-out { animation: fade-out 0.3s ease; }
.animate-fade-in-up { animation: fade-in-up 0.3s ease; }
.animate-fade-in-down { animation: fade-in-down 0.3s ease; }

.animate-slide-in-left { animation: slide-in-left 0.3s ease; }
.animate-slide-in-right { animation: slide-in-right 0.3s ease; }
.animate-slide-out-left { animation: slide-out-left 0.3s ease; }
.animate-slide-out-right { animation: slide-out-right 0.3s ease; }

.animate-scale-in { animation: scale-in 0.3s ease; }
.animate-scale-out { animation: scale-out 0.3s ease; }

.animate-spin { animation: spin 1s linear infinite; }
.animate-bounce { animation: bounce 1s; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-shake { animation: shake 0.5s ease-in-out; }

/* ===== HOVER ANIMATIONS ===== */
.hover-lift:hover { transform: translateY(-2px); transition: transform 0.2s ease; }
.hover-scale:hover { transform: scale(1.05); transition: transform 0.2s ease; }
.hover-rotate:hover { transform: rotate(5deg); transition: transform 0.2s ease; }

/* ===== LOADING ANIMATIONS ===== */
@keyframes loading-dots {
  0%, 20% { content: '加载中'; }
  40% { content: '加载中.'; }
  60% { content: '加载中..'; }
  80%, 100% { content: '加载中...'; }
}

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

.loading-dots::after {
  content: '';
  animation: loading-dots 1.5s infinite;
}

.loading-pulse {
  animation: loading-pulse 1.5s ease-in-out infinite;
}

/* ===== TRANSITION CLASSES ===== */
.transition-all { transition: all 0.2s ease; }
.transition-colors { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
.transition-transform { transition: transform 0.2s ease; }
.transition-opacity { transition: opacity 0.2s ease; }

/* ===== DELAYED ANIMATIONS ===== */
.animate-delay-100 { animation-delay: 0.1s; }
.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-300 { animation-delay: 0.3s; }
.animate-delay-500 { animation-delay: 0.5s; }

/* ===== STAGGER ANIMATIONS ===== */
.stagger-children > * {
  animation: fade-in-up 0.4s ease both;
}

.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.6s; }

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