/* ============================================
   MiniRock v2 — CSS 特效 + 动画 (Phase 2)
   入场动画 · 悬停特效 · 加载态 · 粒子点缀
   所有动画使用 transform + opacity (GPU加速)
   ============================================ */

/* ─── 1. 页面入场动画 ─── */
body {
  animation: pageFadeIn 0.4s ease;
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── 2. 卡片入场排队动画 (Stagger) ─── */
.card-stagger > *:nth-child(1)  { animation: cardSlideUp 0.3s ease 0.05s both; }
.card-stagger > *:nth-child(2)  { animation: cardSlideUp 0.3s ease 0.1s  both; }
.card-stagger > *:nth-child(3)  { animation: cardSlideUp 0.3s ease 0.15s both; }
.card-stagger > *:nth-child(4)  { animation: cardSlideUp 0.3s ease 0.2s  both; }
.card-stagger > *:nth-child(5)  { animation: cardSlideUp 0.3s ease 0.25s both; }
.card-stagger > *:nth-child(6)  { animation: cardSlideUp 0.3s ease 0.3s  both; }
.card-stagger > *:nth-child(7)  { animation: cardSlideUp 0.3s ease 0.35s both; }
.card-stagger > *:nth-child(8)  { animation: cardSlideUp 0.3s ease 0.4s  both; }
.card-stagger > *:nth-child(9)  { animation: cardSlideUp 0.3s ease 0.45s both; }
.card-stagger > *:nth-child(n+10) { animation: cardSlideUp 0.3s ease 0.5s both; }

@keyframes cardSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── 3. 按钮呼吸光晕 ─── */
.clay-btn-primary,
.clay-btn-accent {
  animation: btnGlow 3s ease-in-out infinite;
}

@keyframes btnGlow {
  0%, 100% { box-shadow: 0 4px 0 #1B4332, 0 4px 12px rgba(82, 183, 136, 0.2); }
  50%      { box-shadow: 0 4px 0 #1B4332, 0 4px 20px rgba(82, 183, 136, 0.4); }
}

/* ─── 4. 加载态骨架屏脉冲 ─── */
.skeleton {
  animation: skeletonPulse 1.5s ease-in-out infinite !important;
}

@keyframes skeletonPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* ─── 5. 数字/金额变化微动效 ─── */
.value-pop {
  animation: valuePop 0.3s ease;
}

@keyframes valuePop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ─── 6. 粒子闪烁点缀 ─── */
.glow-dot {
  position: fixed;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(82, 183, 136, 0.3);
  pointer-events: none;
  z-index: -1;
  animation: glowFloat 6s ease-in-out infinite;
}

@keyframes glowFloat {
  0%, 100% { opacity: 0; transform: translateY(0) scale(1); }
  50%      { opacity: 0.6; transform: translateY(-20px) scale(1.5); }
}

/* ─── 7. 选手卡片悬停增强 ─── */
.player-card:hover .player-name {
  color: var(--color-accent);
  transition: color 0.2s ease;
}