/* Animations & Transitions for Alphabet Detective Challenge */

/* Gentle breathing & bobbing for idle detective */
@keyframes detectiveBreathe {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* Happy jumping animation for correct answer */
@keyframes detectiveJoyJump {
  0% {
    transform: translateY(0) scale(1, 1);
  }
  20% {
    transform: translateY(4px) scale(1.08, 0.92);
  }
  45% {
    transform: translateY(-28px) scale(0.94, 1.06) rotate(-2deg);
  }
  70% {
    transform: translateY(-16px) scale(1, 1) rotate(2deg);
  }
  85% {
    transform: translateY(2px) scale(1.04, 0.96);
  }
  100% {
    transform: translateY(0) scale(1, 1);
  }
}

/* Continuous victory dance for celebration */
@keyframes detectiveCelebrateDance {
  0%, 100% {
    transform: translateY(0) rotate(-4deg);
  }
  50% {
    transform: translateY(-24px) rotate(4deg);
  }
}

/* Gentle curious head tilt for hints */
@keyframes detectiveCuriousTilt {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-6deg) translateY(-2px);
  }
}

/* Thought bubble gentle float */
@keyframes bubbleFloat {
  0%, 100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-8px) scale(1.04);
  }
}

@keyframes bubblePop {
  0% {
    transform: scale(0.6);
  }
  70% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

/* Floating burst stars around detective */
@keyframes burstStarFloat {
  0% {
    opacity: 0;
    transform: scale(0.2) translateY(10px) rotate(0deg);
  }
  30% {
    opacity: 1;
    transform: scale(1.3) translateY(-15px) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.8) translateY(-40px) rotate(90deg);
  }
}

/* Gentle wrong answer wobble (friendly, non-harsh) */
@keyframes softChoiceWobble {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 60% {
    transform: translateX(-8px) rotate(-2deg);
  }
  40%, 80% {
    transform: translateX(8px) rotate(2deg);
  }
}

/* Success tick pop-in and fade */
@keyframes tickPopFade {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3) rotate(-20deg);
  }
  40% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15) rotate(0deg);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* Star counter bump when star lands */
@keyframes starCounterBump {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.35) rotate(10deg);
  }
  100% {
    transform: scale(1);
  }
}

/* Floating score text popup */
@keyframes floatScoreUp {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.6);
  }
  25% {
    opacity: 1;
    transform: translate(-50%, -20px) scale(1.25);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -45px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -65px) scale(0.8);
  }
}

/* Next button pulse */
@keyframes pulseNextBtn {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 0 #1B8A4C, 0 12px 20px rgba(46, 213, 115, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 10px 0 #1B8A4C, 0 16px 28px rgba(46, 213, 115, 0.6);
  }
}

/* Locked badge nudge */
@keyframes lockedBadgeNudge {
  0%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-6deg);
  }
  75% {
    transform: rotate(6deg);
  }
}

/* Gentle hint pointer bounce */
@keyframes hintFingerBounce {
  0%, 100% {
    transform: translateX(0) scale(1);
  }
  50% {
    transform: translateX(10px) scale(1.2);
  }
}

/* Magnifying glass glint */
@keyframes glassSparkleGlint {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) rotate(15deg);
  }
}

/* Timer warning / danger pulse */
@keyframes timerPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.5);
  }
  100% {
    transform: scale(1.06);
    box-shadow: 0 0 12px 3px rgba(255, 71, 87, 0.4);
  }
}