/* 
 * animations.css - 动画样式
 * 包含：所有动画定义和动画类
 */

/* ========== 弹窗进入动画 ========== */
@keyframes popupIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ========== 输入框闪烁动画 ========== */
@keyframes flash {
  0%, 100% { 
    border-color: var(--primary-color); 
  }
  50% { 
    border-color: #ff6b6b; 
  }
}

.input-flash {
  animation: flash var(--transition-normal);
}

/* ========== 输入框抖动动画 ========== */
@keyframes shake {
  0%, 100% { 
    transform: translateX(0); 
  }
  25% { 
    transform: translateX(-5px); 
  }
  75% { 
    transform: translateX(5px); 
  }
}

.input-warning {
  animation: shake var(--transition-normal);
}

/* ========== 淡入淡出动画 ========== */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

/* ========== 滑入动画 ========== */
@keyframes slideInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ========== 脉冲动画（可用于强调） ========== */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}