/* =========================
   Animations
========================= */

/* كل الحركات أدناه تُعطَّل تلقائيًا لمن يفعّل "تقليل الحركة"
   من إعدادات نظامه — إمكانية وصول أساسية، لا رفاهية */
@media (prefers-reduced-motion: no-preference){

.fade-in{
animation:fadeIn .6s ease;
}

.slide-up{
animation:slideUp .6s ease;
}

.scale-in{
animation:scaleIn .4s ease;
}

/* عناصر الكشف عند التمرير: مخفية ومُزاحة للأسفل بوضوح، حتى
   تدخل في مجال الرؤية (عبر IntersectionObserver في effects.js)
   فتُضاف لها .in-view وتظهر بحركة انزلاق واضحة لأعلى */
.reveal{
  opacity:0;
  transform:translateY(50px) scale(.97);
  transition:opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* نبضة خفيفة عند ظهور الإجابة الصحيحة — تأكيد بصري لطيف بلا مبالغة */
.choice.correct{
  animation:correctPulse .6s ease;
}

@keyframes correctPulse{
  0%{transform:scale(1);}
  35%{transform:scale(1.06);}
  60%{transform:scale(0.99);}
  100%{transform:scale(1);}
}

}

/* بلا تفضيل تقليل حركة: تظهر عناصر reveal مباشرة بلا انتظار
   (fallback لضمان عدم اختفاء المحتوى لأي سبب) */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;}
}

@keyframes fadeIn{
from{
opacity:0;
}
to{
opacity:1;
}
}

@keyframes slideUp{
from{
opacity:0;
transform:translateY(30px);
}

to{
opacity:1;
transform:translateY(0);
}
}

@keyframes scaleIn{
from{
opacity:0;
transform:scale(.9);
}

to{
opacity:1;
transform:scale(1);
}
}

.hover-grow{
transition:var(--transition);
}

.hover-grow:hover{
transform:scale(1.05);
}

.hover-shadow:hover{
box-shadow:var(--shadow-md);
}