/* ============================================================
   MOTION — «النبض» («الكتالوج والنبض»، 2026-09-12)
   ============================================================
   انتقالات العرض الأصلية في المتصفّح (View Transitions) فقط — بلا
   مكتبة. يُحمَّل بعد components.css/data-table.css وقبل صفحات محدَّدة،
   ويعمل مع shared/lib/ui/motion.js (motion.swap يكتب html[data-vt]).

   المتصفّحات التي لا تدعم View Transitions تتجاهل كل ما هنا بصمت —
   motion.js يستبدل المحتوى مباشرة بلا حركة في تلك الحالة، وهذا الملف
   لا يفعل شيئاً إن لم توجد ::view-transition-* أصلاً.
   ============================================================ */

/* اتجاه الانزلاق يتبع اتجاه القراءة — القيمة الفعلية معكوسة تحت [dir="ltr"]
   حتى تبقى «تقدّم» دائماً بمعنى «إلى عمق أكبر»، لا «يميناً» حرفياً. */
:root {
    --vt-dir: 1;
}

[dir="ltr"] {
    --vt-dir: -1;
}

/* ── الهيكل الثابت: لا يتحرّك أثناء التنقّل ──
   بلا اسم صريح، كل عنصر يدخل ضمن اللقطة الجذرية الافتراضية فيتلاشى مع
   كل تنقّل حتى لو لم يتغيّر بصرياً. تسميته يُخرجه من ذلك التلاشي العام. */
.top-bar {
    view-transition-name: shell-top;
}

.sidebar {
    view-transition-name: shell-side;
}

.bottom-bar {
    view-transition-name: shell-bottom;
}

.route-progress {
    view-transition-name: shell-progress;
}

.content-wrapper {
    view-transition-name: page-content;
}

::view-transition-group(shell-top),
::view-transition-group(shell-side),
::view-transition-group(shell-bottom),
::view-transition-group(shell-progress) {
    animation: none;
}

/* ── المحتوى: تلاشٍ + ارتفاع خفيف افتراضياً (جانبي/سمة) ── */
::view-transition-old(page-content) {
    animation: vt-fade-out var(--dur-page) var(--ease-exit) both;
}

::view-transition-new(page-content) {
    animation: vt-fade-in var(--dur-page) var(--ease-enter) both;
}

@keyframes vt-fade-out {
    to {
        opacity: 0;
    }
}

@keyframes vt-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

/* ── تنقّل أعمق (قائمة ← تفصيل): ينزلق في اتجاه القراءة ── */
html[data-vt="forward"]::view-transition-old(page-content) {
    animation: vt-old-forward var(--dur-page) var(--ease-exit) both;
}

html[data-vt="forward"]::view-transition-new(page-content) {
    animation: vt-new-forward var(--dur-page) var(--ease-enter) both;
}

/* ── رجوع: عكس اتجاه التقدّم تماماً ── */
html[data-vt="back"]::view-transition-old(page-content) {
    animation: vt-old-back var(--dur-page) var(--ease-exit) both;
}

html[data-vt="back"]::view-transition-new(page-content) {
    animation: vt-new-back var(--dur-page) var(--ease-enter) both;
}

@keyframes vt-old-forward {
    to {
        opacity: 0;
        transform: translateX(calc(var(--vt-dir) * -24px));
    }
}

@keyframes vt-new-forward {
    from {
        opacity: 0;
        transform: translateX(calc(var(--vt-dir) * 24px));
    }

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

@keyframes vt-old-back {
    to {
        opacity: 0;
        transform: translateX(calc(var(--vt-dir) * 24px));
    }
}

@keyframes vt-new-back {
    from {
        opacity: 0;
        transform: translateX(calc(var(--vt-dir) * -24px));
    }

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

/* ── تبديل السمة: تلاشٍ للصفحة كاملة، بلا انزلاق (ليست تنقّلاً) ──
   الهيكل الثابت أعلاه يبقى مستثنى فيتلوّن فوراً دون أن يُرى يتلاشى؛
   المحتوى وحده يتلاشى بلطف بين اللونين. */
html[data-vt="theme"]::view-transition-old(page-content) {
    animation: vt-fade-out var(--dur-smooth) var(--ease-exit) both;
}

html[data-vt="theme"]::view-transition-new(page-content) {
    animation: vt-fade-in var(--dur-smooth) var(--ease-enter) both;
    /* بلا ارتفاع هنا — تبديل سمة لا وصول محتوى جديد */
    transform: none;
}

/* ── تقليل الحركة: يغطّي عناصر الزائف الخاصة بالانتقالات أيضاً ──
   الأرضية العامة في theme.css تستهدف *؛ الزائف ::view-transition-* ليس
   من نسل * (يعيش خارج شجرة DOM العادية) فيحتاج قاعدته الخاصة هنا. */
@media (prefers-reduced-motion: reduce) {

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

/* ============================================================
   عناصر واجهة أخرى — رموز الحركة نفسها، بلا الحاجة لـView Transitions
   ============================================================ */

/* ── النوافذ المنبثقة (Modals) ── */
.modal.open .modal-content,
.modal-overlay .modal-content {
    animation: vt-modal-in var(--dur-smooth) var(--ease-enter) both;
}

@keyframes vt-modal-in {
    from {
        opacity: 0;
        transform: scale(0.98);
    }

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

@media (prefers-reduced-motion: reduce) {

    .modal.open .modal-content,
    .modal-overlay .modal-content {
        animation: none;
    }
}