/* animations.css — all keyframes and animation utilities */

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

/* ── PAGE TRANSITIONS ── */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-40px); }
}

/* ── BOUNCE (correct answer) ── */
@keyframes bounceCorrect {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.18); }
  55%  { transform: scale(0.93); }
  75%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}
.anim-bounce { animation: bounceCorrect 0.45s ease; }

/* ── SHAKE (wrong answer) ── */
@keyframes shake {
  0%,100%{ transform: translateX(0); }
  20%    { transform: translateX(-8px); }
  40%    { transform: translateX(8px); }
  60%    { transform: translateX(-6px); }
  80%    { transform: translateX(6px); }
}
.anim-shake { animation: shake 0.4s ease; }

/* ── BOUNCE IN (logo, badge) ── */
@keyframes bounceIn {
  0%   { transform: scale(0.3); opacity: 0; }
  50%  { transform: scale(1.1); opacity: 1; }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.anim-bounce-in { animation: bounceIn 0.6s cubic-bezier(0.34,1.56,0.64,1) both; }

/* ── STAR POP ── */
@keyframes starPop {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.3) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ── SPARKLE BURST ── */
.sparkle-container {
  position: relative;
  display: inline-block;
}
.sparkle {
  position: absolute;
  pointer-events: none;
  font-size: 1.1rem;
  animation: sparkleFly 0.7s ease forwards;
  opacity: 0;
}
@keyframes sparkleFly {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: var(--spark-end, translate(30px,-40px)) scale(0.4); }
}

/* ── BADGE UNLOCK POP ── */
@keyframes badgePop {
  0%   { transform: scale(0) rotate(-10deg); opacity: 0; }
  65%  { transform: scale(1.15) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.badge-unlock-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  background: linear-gradient(135deg, var(--purple), var(--blue));
  color: white;
  font-weight: 800;
  padding: 12px 24px;
  border-radius: 30px;
  box-shadow: 0 6px 24px rgba(124,77,255,0.4);
  z-index: 300;
  text-align: center;
  pointer-events: none;
}
.badge-unlock-toast.show {
  animation: badgePop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.badge-unlock-toast.hide {
  animation: fadeOut 0.4s ease forwards;
}

/* ── FADE ── */
@keyframes fadeOut {
  to { opacity: 0; transform: translateX(-50%) translateY(20px); }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
.anim-fade-in { animation: fadeIn 0.3s ease; }

/* ── PULSE GLOW (unlock hint) ── */
@keyframes pulseGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,191,165,0); }
  50%     { box-shadow: 0 0 0 6px rgba(0,191,165,0.25); }
}
.anim-pulse { animation: pulseGlow 2s ease infinite; }

/* ── FLOAT (home logo / decorative) ── */
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}
.anim-float { animation: float 3s ease-in-out infinite; }

/* ── WIGGLE (locked padlock) ── */
@keyframes wiggle {
  0%,100% { transform: rotate(0); }
  25%     { transform: rotate(-10deg); }
  75%     { transform: rotate(10deg); }
}
.anim-wiggle { animation: wiggle 0.4s ease; }

/* Stars row in results */
@keyframes starReveal {
  from { transform: scale(0) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1) rotate(0);     opacity: 1; }
}
.star-reveal { animation: starReveal 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
.star-reveal:nth-child(2) { animation-delay: 0.15s; }
.star-reveal:nth-child(3) { animation-delay: 0.30s; }