/* ── Cell Reveal Cascade ─────────────────── */

.cell.revealing {
  animation: cellReveal var(--anim-reveal-dur, 0.25s) var(--anim-reveal-ease, ease-out) both;
}

@keyframes cellReveal {
  from {
    transform: scale(0.6) rotateX(15deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.05);
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ── Flag Plant ──────────────────────────── */

.cell.flagged {
  animation: flagPlant var(--anim-flag-dur, 0.3s) var(--anim-flag-ease, cubic-bezier(0.34, 1.56, 0.64, 1));
}

@keyframes flagPlant {
  0% { transform: scale(0.3) rotate(-20deg); }
  60% { transform: scale(1.15) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ── Mine Explode ────────────────────────── */

.cell.mine {
  animation: mineExplode var(--anim-mine-dur, 0.35s) var(--anim-mine-ease, cubic-bezier(0.34, 1.56, 0.64, 1));
}

@keyframes mineExplode {
  0% { transform: scale(0.2); opacity: 0.5; }
  50% { transform: scale(1.35); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Screen Shake ────────────────────────── */

.shaking {
  animation: shake 0.45s ease-out;
}

@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5px, -3px); }
  20% { transform: translate(5px, 3px); }
  30% { transform: translate(-4px, 4px); }
  40% { transform: translate(4px, -4px); }
  50% { transform: translate(-3px, 2px); }
  60% { transform: translate(3px, -2px); }
  70% { transform: translate(-2px, 1px); }
  80% { transform: translate(1px, -1px); }
  90% { transform: translate(-1px, 0px); }
}

/* ── Golden Reveal — see global.css for enhanced version ── */

/* ── Fog Lift ────────────────────────────── */

.cell {
  transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.15s ease;
}

/* ── Gimmick Intro Overlay ─────────────── */

.gimmick-intro-content {
  text-align: center;
  padding: 24px 20px;
}
.gimmick-intro-icon {
  font-size: 48px;
  margin-bottom: 12px;
}
.gimmick-intro-content h2 {
  margin: 0 0 8px;
  font-size: 20px;
  color: var(--color-text, #eee);
}
.gimmick-intro-content p {
  margin: 0 0 20px;
  color: var(--color-text-secondary, #aaa);
  font-size: 14px;
  line-height: 1.5;
}

/* ── Reduced Motion ──────────────────────── */

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

  .shaking {
    animation: none !important;
  }

  .cell {
    transition: none !important;
  }
}