/* ==========================================================================
   애니메이션 정의 (Word Voyage 항해 스타일 플립, 팝, 셰이크, 바운스)
   ========================================================================== */

/* 글자 입력 시 Pop 효과 */
@keyframes popIn {
  0% {
    transform: scale(0.75);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.14);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.tile.pop {
  animation: popIn 0.12s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 타일 뒤집기 (Flip) 효과 - 3D 회전 */
@keyframes flipIn {
  0% {
    transform: rotateX(0deg);
  }
  49% {
    transform: rotateX(90deg);
  }
  51% {
    transform: rotateX(90deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}

.tile.flip {
  animation: flipIn 0.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
}

/* 유효하지 않은 단어 또는 글자 수 부족 시 행 셰이크(흔들림) */
@keyframes shakeRow {
  0%, 100% { transform: translateX(0); }
  15%, 45%, 75% { transform: translateX(-7px); }
  30%, 60%, 90% { transform: translateX(7px); }
}

.board-row.shake {
  animation: shakeRow 0.45s ease-in-out;
}

/* 정답 맞췄을 때 승리 바운스(통통 튀기) */
@keyframes bounceTile {
  0%, 20% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-24px) scale(1.05);
  }
  50% {
    transform: translateY(0) scale(0.98);
  }
  60% {
    transform: translateY(-10px);
  }
  80%, 100% {
    transform: translateY(0) scale(1);
  }
}

.tile.bounce {
  animation: bounceTile 0.9s cubic-bezier(0.28, 0.84, 0.42, 1) forwards;
}

/* 나침반 다이얼 승리 파동 효과 */
@keyframes compassPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(229, 198, 115, 0.6), 0 16px 36px rgba(0, 0, 0, 0.45);
  }
  70% {
    box-shadow: 0 0 0 22px rgba(229, 198, 115, 0), 0 16px 36px rgba(0, 0, 0, 0.45);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(229, 198, 115, 0), 0 16px 36px rgba(0, 0, 0, 0.45);
  }
}

.compass-stage.win-pulse {
  animation: compassPulse 1.2s ease-out 2;
}

/* 토스트 메시지 나타나기 / 사라지기 (정중앙 부드러운 페이드) */
@keyframes toastFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toastFadeOut {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
}

/* 모달 페이드인 */
@keyframes modalBackdropFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalContentPop {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(14px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

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