/* =========================================================
   raed-motion.css — حركة في التنقّل بين الصفحات والخدمات فقط
   القيود: opacity + إزاحة ≤12px · ≤320ms · لا parallax · لا خطف تمرير
   ========================================================= */

/* ── 1. التنقّل بين الصفحات — بلا JS ─────────────────── */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--dur);
  animation-timing-function: var(--ease);
}
::view-transition-old(root) { animation-name: raed-fade-out; }
::view-transition-new(root) { animation-name: raed-fade-in; }

@keyframes raed-fade-out { from { opacity: 1 } to { opacity: 0 } }
@keyframes raed-fade-in  { from { opacity: 0 } to { opacity: 1 } }

/* الشعار يبقى ثابتاً بين الصفحات بدل أن يتلاشى معها */
header .logo-img, .brand-logo { view-transition-name: raed-logo; }

/* ── 2. التنقّل بين الخدمات (التبويبات) ───────────────── */
.user-tab, .admin-tab { animation: raed-tab-in var(--dur) var(--ease) both; }

@keyframes raed-tab-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.tab-btn::after { transition: opacity var(--dur) var(--ease); }

/* ── 3. أين لا حركة — صراحةً ─────────────────────────
   جداول البيانات عند إعادة الرسم · نتائج البحث والفلاتر ·
   النوافذ المنبثقة (تبقى على سلوكها) · المسار السريع في الإدخال */
.interactive-table, .interactive-table *,
.table-responsive, .table-responsive *,
.modal-overlay, .modal-box,
#searchResults, .search-results, .filter-results,
[data-no-motion], [data-no-motion] * {
  animation: none !important;
  view-transition-name: none;
}

/* ── 4. احترام تفضيل تقليل الحركة ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }

  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}