/* Gamified feedback while answering the quiz (loaded after style.css/style2.css).
   Uses `translate`/`scale`/`rotate` so the card's translate(-50%,-50%) centering stays intact. */

@keyframes q-in {
  from { opacity: 0; translate: 40px 0; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes opt-in {
  from { opacity: 0; translate: 0 12px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes tap {
  0% { scale: 1; } 40% { scale: 0.95; } 70% { scale: 1.03; } 100% { scale: 1; }
}
@keyframes shake {
  0%, 100% { rotate: 0deg; translate: 0 0; }
  20% { translate: -10px 0; rotate: -1deg; }
  40% { translate: 10px 0; rotate: 1deg; }
  60% { translate: -6px 0; }
  80% { translate: 6px 0; }
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(108,193,152,0.6); }
  100% { box-shadow: 0 0 0 14px rgba(108,193,152,0); }
}
@keyframes float-up {
  0%   { opacity: 0; translate: -50% 0; scale: 0.6; }
  20%  { opacity: 1; scale: 1.1; }
  100% { opacity: 0; translate: -50% -60px; scale: 1; }
}
@keyframes toast {
  0%   { opacity: 0; translate: -50% -20px; scale: 0.8; }
  15%  { opacity: 1; translate: -50% 0; scale: 1.05; }
  25%  { scale: 1; }
  85%  { opacity: 1; translate: -50% 0; }
  100% { opacity: 0; translate: -50% -20px; }
}
@keyframes bar-shine {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

/* question + options slide in each time a new question loads */
.quiz-container.q-anim .question { animation: q-in 0.45s cubic-bezier(.2,.7,.3,1) both; }
.quiz-container.q-anim .option { animation: opt-in 0.4s cubic-bezier(.2,.7,.3,1) both; }
.quiz-container.q-anim .option:nth-of-type(1) { animation-delay: 0.12s; }
.quiz-container.q-anim .option:nth-of-type(2) { animation-delay: 0.2s; }
.quiz-container.q-anim .option:nth-of-type(3) { animation-delay: 0.28s; }

.option.tapped { animation: tap 0.35s ease; }
.quiz-container.shake { animation: shake 0.45s ease; }

/* next button nudges once an answer is picked */
button.next.enable { animation: pulse 1.2s ease-out infinite; }

/* progress bar: smooth fill + shine */
.progress_inner {
  transition: width 0.6s cubic-bezier(.2,.7,.3,1) !important;
  background-image: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  background-size: 200% 100%;
  animation: bar-shine 2s linear infinite;
}
.q-count {
  margin-left: 1rem;
  margin-right: auto;
  font-size: 0.85rem;
  font-weight: 600;
  color: #3C8196;
  white-space: nowrap;
}

/* "+1" floating over the next button */
.xp-float {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  font-weight: 700;
  color: #6CC198;
  font-size: 1.1rem;
  animation: float-up 0.9s ease-out forwards;
}

/* stage / milestone toast */
.q-toast {
  position: fixed;
  top: 6rem;
  left: 50%;
  z-index: 60;
  padding: 0.6rem 1.4rem;
  border-radius: 99px;
  background: #F5C24C;
  color: #3a2c00;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.9rem;
  white-space: nowrap;
  box-shadow: 0 4px 0 #c9971f;
  pointer-events: none;
  animation: toast 2.2s ease forwards;
}

@media (max-width: 846px) {
  .q-toast { top: 4.5rem; font-size: 0.75rem; }
  .q-count { margin-left: 0.75rem; font-size: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-container.q-anim .question, .quiz-container.q-anim .option,
  .option.tapped, .quiz-container.shake, button.next.enable,
  .progress_inner, .xp-float { animation: none !important; }
  .q-toast { animation: none; translate: -50% 0; }
}