/**
 * Animations for Word Pair Matching Game
 * Shake animation for incorrect matches
 * Merge animation for correct matches
 * Victory screen animations
 */

/* ===== Shake Animation (Incorrect Match) ===== */
.shake {
  animation: shake var(--duration-shake) cubic-bezier(.36, .07, .19, .97);
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-8px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(8px);
  }
}

/* ===== Merge Animation (Correct Match) ===== */
.merging {
  animation: merge var(--duration-merge) ease-out forwards;
}

@keyframes merge {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.8;
  }
  100% {
    transform: scale(0.95);
    opacity: 0.5;
  }
}

/* ===== Click Blocking During Animations ===== */
.animating {
  pointer-events: none;
}

/* ===== Victory Screen Animation ===== */
.victory-appear {
  animation: victoryFade 0.6s ease-out forwards;
}

@keyframes victoryFade {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===== Button Transitions ===== */
.word-button {
  transition:
    transform var(--duration-transition) ease,
    box-shadow var(--duration-transition) ease,
    opacity var(--duration-transition) ease,
    background-color var(--duration-transition) ease;

  /* GPU acceleration hint for smoother animations */
  will-change: transform;
}

.word-button:hover:not(:disabled):not(.merged) {
  transform: translateY(-2px);
}

.word-button:active:not(:disabled):not(.merged) {
  transform: translateY(0);
}

/* ===== Fade Transitions ===== */
.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 0.3s ease-in;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}