/* ═══════════════════════════════
   Animations - 入场 & 交互动效
   ═══════════════════════════════ */

/* 入场动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes checkmark {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

/* 工具类 */
.animate-fade-in-up {
  animation: fadeInUp 0.5s var(--ease-out) both;
}

.animate-scale-in {
  animation: scaleIn 0.4s var(--ease-out) both;
}

.animate-stagger > * {
  opacity: 0;
  animation: fadeInUp 0.45s var(--ease-out) forwards;
}

/* 卡片骨架屏 */
.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius);
}

/* 页面过渡 */
.page-transition {
  animation: fadeIn 0.35s var(--ease-out) both;
}