/* طبقة الحركة الخفيفة: تموّج + دخول بسيط + شريط تقدم. تحترم prefers-reduced-motion */

/* تموّج عند الضغط */
.mv-host { position: relative; overflow: hidden; }
.mv-ripple {
  position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0); opacity: .9;
  background: radial-gradient(circle, rgba(255,255,255,.5) 0%, rgba(147,197,253,.2) 50%, transparent 70%);
  animation: mv-ripple .6s ease-out forwards; z-index: 0;
}
@keyframes mv-ripple { to { transform: scale(1); opacity: 0; } }

/* دخول بسيط: حركة وشفافية فقط (بدون blur لأنه يتقل على المعالج) */
@keyframes mv-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mv-enter { animation: mv-rise .35s ease-out both; }

/* تأثيرات الهوفر تشتغل بس على الأجهزة اللي فيها ماوس */
@media (hover: hover) {
  .card:hover, .kpi:hover { transform: translateY(-2px); }
  .btn:hover, button:hover { transform: translateY(-1px); }
}
.btn:active, button:active { transform: scale(.98); }
.card, .kpi { transition: transform .2s ease; }
.btn, button { transition: transform .15s ease, background-color .15s ease; }

/* حلقة تركيز للكيبورد */
:focus-visible { outline: 2px solid var(--g1, #60a5fa); outline-offset: 2px; }

/* شريط التقدم أعلى الصفحة */
#mv-bar { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 9999; opacity: 0;
  background: linear-gradient(90deg, var(--g2, #3b82f6), var(--g1, #60a5fa)); transition: width .3s ease, opacity .25s ease; }
#mv-bar.on { opacity: 1; width: 70%; }
#mv-bar.done { width: 100%; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .mv-ripple, .mv-enter { animation: none !important; }
  .card, .kpi, .btn, button { transition: none !important; transform: none !important; }
}