/* Feedback Animations — Soft, encouraging, child-friendly
   Correct: mint green glow + bounce + sparkle
   Incorrect: gentle shake (no red, no harsh)
   Stars: gold pop-in with glow */

/* ─── Correct answer — green glow + bounce ─── */
.feedback-correct {
  animation: feedback-bounce var(--duration-slow) var(--easing-bounce);
  border-color: var(--color-correct) !important;
  box-shadow: var(--shadow-glow-correct) !important;
}

@keyframes feedback-bounce {
  0% { transform: scale(1); }
  25% { transform: scale(1.12); }
  50% { transform: scale(0.96); }
  75% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* Sparkle effect on correct answer (CSS pseudo-element) */
.feedback-correct::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(128, 237, 153, 0.3) 0%, transparent 70%);
  animation: sparkle-pulse 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes sparkle-pulse {
  0% { opacity: 0; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.2); }
}

/* ─── Incorrect answer — gentle horizontal shake ─── */
.feedback-incorrect {
  animation: feedback-shake var(--duration-normal) var(--easing-smooth);
}

@keyframes feedback-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* ─── Star pop-in animation ─── */
.feedback-star {
  animation: star-pop var(--duration-slow) var(--easing-bounce) forwards;
  opacity: 0;
}

@keyframes star-pop {
  0% { transform: scale(0) rotate(-15deg); opacity: 0; }
  60% { transform: scale(1.25) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ─── Star icon styling ─── */
.star-icon {
  width: 96px;
  height: 96px;
  font-size: 96px;
  line-height: 1;
  text-align: center;
}

.star-icon.filled {
  color: var(--color-star-filled);
  filter: drop-shadow(0 4px 8px rgba(255, 209, 102, 0.4));
}

.star-icon.empty {
  color: var(--color-star-empty);
}

/* ─── Success celebration overlay effect ─── */
.celebration-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 300;
  animation: celebration-fade 1.5s ease-out forwards;
}

@keyframes celebration-fade {
  0% { opacity: 1; }
  100% { opacity: 0; }
}