/* ============================================
   廉洁扫雷 - 动画效果（冠盛企业主题）
   animations.css
   ============================================ */

/* ---------- 格子翻开动画（蓝色涟漪扩散） ---------- */
.cell.revealing {
  animation: blueRipple 0.4s ease-out;
}

@keyframes blueRipple {
  0% {
    transform: scale(1);
    background: var(--blue-main);
  }
  40% {
    transform: scale(1.08);
    background: rgba(0,77,167,0.5);
  }
  100% {
    transform: scale(1);
    background: var(--blue-light);
  }
}

/* ---------- 踩雷爆炸动画 ---------- */
.cell.exploding {
  animation: mineExplode 0.6s ease;
}

@keyframes mineExplode {
  0% { transform: scale(1); }
  15% { transform: scale(1.2); background: rgba(198,40,40,0.3); }
  30% { transform: scale(0.95); }
  50% { transform: scale(1.05); }
  70% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

/* ---------- 地雷逐个显示动画 ---------- */
.cell.mine-appearing {
  animation: mineAppear 0.3s ease-out both;
}

@keyframes mineAppear {
  from {
    opacity: 0;
    transform: scale(0.8) rotateY(90deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotateY(0);
  }
}

/* ---------- 胜利弹跳动画 ---------- */
.victory-bounce {
  display: inline-block;
  animation: victoryBounce 1s ease-out;
}

@keyframes victoryBounce {
  0% { transform: scale(0) rotate(-30deg); opacity: 0; }
  50% { transform: scale(1.3) rotate(10deg); opacity: 1; }
  75% { transform: scale(0.95) rotate(-3deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ---------- 胜利粒子效果（蓝金配色） ---------- */
.victory-particles {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 200;
}

.victory-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: particleFall var(--dur, 2s) var(--delay, 0s) ease-in forwards;
}

@keyframes particleFall {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg) scale(0);
    opacity: 0;
  }
}

/* ---------- 失败灰度滤镜 ---------- */
.game-board.game-over-lose {
  animation: grayscaleIn 0.5s ease forwards;
}

@keyframes grayscaleIn {
  from { filter: grayscale(0); }
  to { filter: grayscale(0.3); }
}

/* ---------- 知识卡片高亮 ---------- */
.knowledge-card.highlight {
  animation: cardHighlight 0.5s ease;
}

@keyframes cardHighlight {
  0% { transform: scale(1); }
  30% { transform: scale(1.02); box-shadow: 0 4px 16px rgba(0,77,167,0.2); }
  100% { transform: scale(1); }
}

.knowledge-card.warning-highlight {
  animation: cardWarningHighlight 0.5s ease;
}

@keyframes cardWarningHighlight {
  0% { transform: scale(1); }
  30% { transform: scale(1.02); box-shadow: 0 4px 16px rgba(198,40,40,0.25); }
  100% { transform: scale(1); }
}

/* ---------- 脉冲动画（用于数字提示） ---------- */
.cell-number.pulse {
  animation: numberPulse 0.3s ease;
}

@keyframes numberPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* ---------- 标记动画（金色印章） ---------- */
.cell.flag-appearing::after {
  animation: stampAppear 0.3s ease-out;
}

@keyframes stampAppear {
  0% { transform: scale(2) rotate(-20deg); opacity: 0; }
  60% { transform: scale(0.9) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ---------- 标记取消动画 ---------- */
.cell.flag-removing::after {
  animation: stampRemove 0.2s ease-in forwards;
}

@keyframes stampRemove {
  to { transform: scale(0) rotate(20deg); opacity: 0; }
}

/* ---------- 弹窗背景渐入 ---------- */
.modal-overlay.fade-in {
  animation: overlayFadeIn 0.3s ease;
}

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

/* ---------- 按钮涟漪效果 ---------- */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}