/* ============================================================
   FIND THE DIFFERENCE — animations
   ============================================================ */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.86); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes floatIn {
  0% { opacity: 0; transform: translateY(26px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.45), 0 6px 0 rgba(0,0,0,0.35); }
  50% { box-shadow: 0 0 22px 4px rgba(0, 229, 255, 0.6), 0 6px 0 rgba(0,0,0,0.35); }
}
@keyframes starPop {
  0% { opacity: 0; transform: scale(0) rotate(-30deg); }
  70% { transform: scale(1.25) rotate(6deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes timerBlink {
  0%, 100% { color: var(--red); }
  50% { color: #ff9aa5; }
}

.screen.active { animation: fadeIn 0.3s ease both; }
.menu-inner { animation: floatIn 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.panel { animation: floatIn 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.modal.open .modal-card { animation: scaleIn 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }

.level-intro.open .intro-card { animation: scaleIn 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }

.btn-primary:hover { animation: pulseGlow 1.6s ease-in-out infinite; }

.level-cell.shake { animation: shake 0.4s ease; }
.level-cell.new-unlock { animation: fadeInUp 0.3s ease both; }

.star-ico { animation: starPop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
.star-ico:nth-child(2) { animation-delay: 0.12s; }
.star-ico:nth-child(3) { animation-delay: 0.24s; }

.timer-value.blink { animation: timerBlink 0.7s ease infinite; }

.toast.show { animation: fadeInUp 0.25s ease both; }

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