/* حركات خفيفة. تتوقف كلها عند تفعيل «تقليل الحركة» في الجهاز أو الإعدادات. */
@keyframes km-float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
@keyframes km-pop { 0% { transform: scale(.92); opacity: 0 } 100% { transform: scale(1); opacity: 1 } }
@keyframes km-in { from { transform: translateY(8px) } to { transform: none } }
@keyframes km-cheer { 0%, 100% { transform: rotate(0) } 25% { transform: rotate(-6deg) translateY(-6px) } 75% { transform: rotate(6deg) translateY(-6px) } }
@keyframes km-shake { 0%, 100% { transform: translateX(0) } 25% { transform: translateX(-5px) } 75% { transform: translateX(5px) } }
@keyframes km-pulse { 0% { box-shadow: 0 0 0 0 rgba(31, 138, 91, .45) } 100% { box-shadow: 0 0 0 14px rgba(31, 138, 91, 0) } }
@keyframes km-toast { from { transform: translateY(-10px); opacity: 0 } to { transform: none; opacity: 1 } }

.view > * { animation: km-in .28s ease both; }
.mascot--happy .mascot__body { animation: km-float 3.2s ease-in-out 2; transform-origin: 50% 90%; }
.mascot--cheer .mascot__body { animation: km-cheer .9s ease-in-out 2; transform-origin: 50% 90%; }
.quiz__feedback.is-shown { animation: km-pop .2s ease both; }
.option.is-wrong, .tiles--answer.is-wrong, .input.is-wrong { animation: km-shake .3s ease; }
.btn-speak.is-playing, .btn.is-listening, .btn-mic.is-listening { animation: km-pulse 1s ease-out infinite; }
.toast { animation: km-toast .25s ease both; }
.toast--out { opacity: 0; transform: translateY(-8px); transition: opacity .3s, transform .3s; }

html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}