/* Motion layer. Everything here is suppressed under prefers-reduced-motion
   by the JS guard in anim.js (which simply doesn't add these classes). */

.confetti {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  pointer-events: none;
  will-change: transform, opacity;
  z-index: 20;
}

/* choice + feedback motion */
@keyframes anim-pop { 0% { transform: scale(0); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes anim-spin { from { transform: rotate(-180deg) scale(0); } to { transform: rotate(0) scale(1); } }
@keyframes anim-bounce { 0%,100% { transform: translateY(0); } 25% { transform: translateY(-9px); } 45% { transform: translateY(0); } 65% { transform: translateY(-4px); } 82% { transform: translateY(0); } }
@keyframes anim-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes anim-slide-over { from { opacity: 0; transform: translateY(14px); } 60% { transform: translateY(-2px); } to { opacity: 1; transform: none; } }
@keyframes anim-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.anim-bounce { animation: anim-bounce 0.6s ease both; }
.anim-shake { animation: anim-shake 0.4s ease both; }
.tick-spin { animation: anim-spin 0.5s ease both; }
.fb-slide { animation: anim-slide-over 0.45s cubic-bezier(0.34,1.56,0.64,1) both; }
.q-enter { animation: anim-enter 0.3s ease both; }

/* the checkmark span injected into the correct choice */
.choice-tick { margin-left: auto; color: var(--green); display: inline-flex; align-items: center; }
.choice-btn { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }

/* containers that host confetti must be positioned + clip */
.question-card, .score-card { position: relative; overflow: hidden; }

/* Accessibility: honor reduced-motion at the CSS layer too, so any class
   added unconditionally (e.g. fb-slide) still produces no motion. The JS
   guard additionally skips confetti DOM creation and bounce/shake. */
@media (prefers-reduced-motion: reduce) {
  .anim-bounce, .anim-shake, .tick-spin, .fb-slide, .q-enter { animation: none !important; }
  .confetti { display: none !important; }
}

/* home hero + chapter button layout (used from Task 12) */
.results-mascot { width: auto; max-width: 110px; height: auto; margin: 0 auto 0.75rem; display: block; }
.chapter-btn { display: flex; align-items: center; gap: 0.6rem; }
.chapter-btn svg { width: 26px; height: 26px; flex-shrink: 0; }