/* ==========================================================================
   MAS · Kinetic Command — طبقة الحركة الموحّدة (الداشبورد + صفحات الموقع)
   قواعد الطبقة دي:
   · صفر ألوان جديدة — كله مبنيّ على --brand / --accent2 عشان يتلوّن بعلامة كل عميل.
   · كل الحركة إمّا transform أو opacity (مركّبة على الـGPU) — مافيش reflow.
   · لو الجافاسكربت وقع، الصفحة تفضل شغّالة بشكلها الأصلي (كل كلاسات mo-* اختيارية).
   ========================================================================== */

:root{
  --e-out:cubic-bezier(.16,1,.3,1);      /* توقيع الحركة: خروج أُسّي */
  --e-spring:cubic-bezier(.34,1.56,.64,1); /* نبضة صغيرة */
  --e-soft:cubic-bezier(.4,0,.2,1);

  /* ============================================================
     ✦ نظام التصميم المركزي — Design Tokens (مصدر واحد للحقيقة)
     كله إضافي: بيغذّي المكوّنات من غير ما يكسر المتغيّرات القديمة
     المعرَّفة في index.html (--brand / --panel / --ink ...).
     ============================================================ */

  /* — سلّم الموف/البنفسجي (هوية العلامة) 50→900 — */
  --violet-50:#eef0fe;  --violet-100:#e0e3fd; --violet-200:#c6cbfb;
  --violet-300:#a5abf7; --violet-400:#868df3; --violet-500:#6366f1;
  --violet-600:#4f46e5; --violet-700:#4338ca; --violet-800:#3730a3;
  --violet-900:#272254;

  /* — محايدات باردة بميل بنفسجي خفيف (مختارة لا افتراضية) — */
  --neutral-50:#f6f7fb;  --neutral-100:#eceef6; --neutral-200:#d9dcea;
  --neutral-300:#b7bdd4; --neutral-400:#8b93b4; --neutral-500:#646c8f;
  --neutral-600:#474e6d; --neutral-700:#333954; --neutral-800:#1f2438;
  --neutral-900:#111524;

  /* — ألوان دلالية (منفصلة عن لون العلامة) — */
  --sem-success:#22c55e; --sem-success-soft:color-mix(in srgb,#22c55e 15%,transparent);
  --sem-warning:#f5a524; --sem-warning-soft:color-mix(in srgb,#f5a524 15%,transparent);
  --sem-danger:#f43f5e;  --sem-danger-soft:color-mix(in srgb,#f43f5e 15%,transparent);
  --sem-info:#22d3ee;    --sem-info-soft:color-mix(in srgb,#22d3ee 15%,transparent);

  /* — سلّم الطباعة (12/14/16/20/24/32) + line-heights + أوزان — */
  --fs-xs:12px;  --lh-xs:1.55;
  --fs-sm:14px;  --lh-sm:1.6;
  --fs-md:16px;  --lh-md:1.7;
  --fs-lg:20px;  --lh-lg:1.4;
  --fs-xl:24px;  --lh-xl:1.3;
  --fs-2xl:32px; --lh-2xl:1.18;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* — سلّم المسافات (أساس 4px) — */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px;--space-16:64px;

  /* — سلّم الاستدارة (يكمّل --r-sm/--r-md/--radius/--r-lg من index.html) — */
  --r-xs:8px; --r-full:999px;

  /* — سلّم الظلال الناعم المتدرّج (الوضع الداكن) — */
  --shadow-xs:0 1px 2px rgba(2,6,20,.32);
  --shadow-sm:0 1px 2px rgba(2,6,20,.30),0 2px 6px rgba(2,6,20,.30);
  --shadow-md:0 2px 6px rgba(2,6,20,.32),0 10px 24px rgba(2,6,20,.38);
  --shadow-lg:0 1px 2px rgba(2,6,20,.30),0 6px 16px rgba(2,6,20,.34),0 20px 48px rgba(2,6,20,.44);
  --shadow-xl:0 10px 30px rgba(2,6,20,.44),0 30px 70px rgba(2,6,20,.5);

  /* — رموز الحركة: مدد + easing موحّد ناعم — */
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms;
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* سلّم الظلال في الوضع الفاتح (أنعم وأفتح) */
:root[data-theme="light"]{
  --shadow-xs:0 1px 2px rgba(30,45,90,.06);
  --shadow-sm:0 1px 2px rgba(30,45,90,.06),0 2px 6px rgba(30,45,90,.07);
  --shadow-md:0 2px 8px rgba(30,45,90,.08),0 10px 24px rgba(30,45,90,.10);
  --shadow-lg:0 1px 2px rgba(30,45,90,.06),0 4px 12px rgba(30,45,90,.08),0 18px 42px rgba(30,45,90,.13);
  --shadow-xl:0 12px 30px rgba(30,45,90,.14),0 30px 70px rgba(30,45,90,.16);
}

/* ---------- ١) حقل الشفق المتحرّك (خلف كل شيء) ---------- */
.mo-aurora{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.mo-aurora i{position:absolute;display:block;border-radius:50%;filter:blur(64px);opacity:.42;
  will-change:transform;transform:translateZ(0)}
.mo-aurora i:nth-child(1){width:44vw;height:44vw;top:-13vw;right:-9vw;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand) 62%,transparent),transparent 68%);
  animation:moDriftA 28s ease-in-out infinite}
.mo-aurora i:nth-child(2){width:38vw;height:38vw;bottom:-15vw;left:-11vw;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent2) 54%,transparent),transparent 68%);
  animation:moDriftB 36s ease-in-out infinite}
.mo-aurora i:nth-child(3){width:30vw;height:30vw;top:36%;left:44%;opacity:.24;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand) 40%,transparent),transparent 70%);
  animation:moDriftC 44s ease-in-out infinite}
:root[data-theme="light"] .mo-aurora i{opacity:.26;filter:blur(78px)}
@keyframes moDriftA{0%,100%{transform:translate3d(0,0,0) scale(1)}
  34%{transform:translate3d(-6vw,5vw,0) scale(1.13)} 67%{transform:translate3d(3vw,-3vw,0) scale(.93)}}
@keyframes moDriftB{0%,100%{transform:translate3d(0,0,0) scale(1)}
  30%{transform:translate3d(7vw,-4vw,0) scale(.9)} 65%{transform:translate3d(-3vw,4vw,0) scale(1.15)}}
@keyframes moDriftC{0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-8vw,-6vw,0) scale(1.2)}}

/* ---------- ٢) الدخول المُنسَّق ---------- */
/* fill-mode: backwards — عشان ما يفضلش ماسك الـtransform بعد ما يخلص (وإلا يكسر الـhover) */
@keyframes moRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes moSlide{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
@keyframes moScale{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:none}}
.mo-u{animation:moRise .58s var(--e-out) backwards;animation-delay:calc(var(--i,0) * 55ms)}
.mo-s{animation:moSlide .5s var(--e-out) backwards;animation-delay:calc(var(--i,0) * 22ms)}
.mo-p{animation:moScale .6s var(--e-out) backwards;animation-delay:calc(var(--i,0) * 70ms)}

/* ---------- ٣) مؤشّر القائمة المنزلق (Shared element) ---------- */
.navlist{position:relative}
.mo-ind{position:absolute;inset-inline-start:0;top:0;width:100%;height:0;border-radius:11px;opacity:0;
  pointer-events:none;z-index:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 26%,transparent),color-mix(in srgb,var(--brand) 6%,transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 42%,transparent);
  transition:transform .44s var(--e-out),height .44s var(--e-out),opacity .25s}
.mo-ind::before{content:"";position:absolute;inset-inline-start:-2px;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:3px;background:linear-gradient(var(--brand),var(--accent2));box-shadow:var(--glow)}
/* لمّا المؤشّر شغّال، نطفّي خلفية العنصر النشط الثابتة عشان ما يبقاش فيه مؤشّرين */
.mo-nav .navlist .nav{z-index:1}
.mo-nav .navlist .nav.active{background:transparent;box-shadow:none}
.mo-nav .navlist .nav.active::before{opacity:0}
/* أيقونة القائمة بتنطّ */
.navlist .nav .ic{transition:transform .3s var(--e-spring)}
.navlist .nav:hover .ic{transform:scale(1.16) rotate(-7deg)}
.navlist .nav.active .ic{transform:scale(1.12)}

/* ---------- ٤) وهج بيتبع الماوس على الكروت ---------- */
.mo-glow{position:relative}
.mo-glow::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  transition:opacity .3s var(--e-soft);
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb,var(--brand) 15%,transparent),transparent 46%)}
.mo-glow:hover::after{opacity:1}

/* ---------- ٥) لمعة على الزرار الأساسي ---------- */
.btn{position:relative;overflow:hidden}
.btn.pri::after{content:"";position:absolute;top:0;bottom:0;left:-55%;width:42%;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.36),transparent);transform:skewX(-18deg)}
.btn.pri:hover::after{opacity:1;animation:moSheen .85s var(--e-soft)}
@keyframes moSheen{from{transform:skewX(-18deg) translateX(0)}to{transform:skewX(-18deg) translateX(430%)}}

/* ---------- ٦) بيانات متحرّكة ---------- */
.funnel .fill{transition:width .95s var(--e-out)}
@keyframes moBump{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
.mo-bump{animation:moBump .5s var(--e-spring)}
.toast{animation:moToast .45s var(--e-spring) backwards}
@keyframes moToast{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}

/* شريط التقدّم العلوي (بيجري وقت تحميل أي شاشة) */
.mo-bar{position:fixed;inset-block-start:0;inset-inline-start:0;height:2.5px;width:0;z-index:200;opacity:0;
  pointer-events:none;background:linear-gradient(90deg,var(--brand),var(--accent2));
  box-shadow:0 0 14px color-mix(in srgb,var(--brand) 70%,transparent);
  transition:width .35s var(--e-soft),opacity .35s}

/* ---------- ٧) موجة تبديل الثيم (View Transitions API) ---------- */
/* الثيم: بدون fade افتراضي (حركة الكليب الدائرية في motion.js بتتكفّل) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2}
/* التنقّل بين الشاشات: fade + إزاحة رأسية خفيفة (مخصّص بـvt-nav فمايلمسش الثيم) */
@keyframes masNavOut{to{opacity:0;transform:translateY(-5px)}}
@keyframes masNavIn{from{opacity:0;transform:translateY(7px)}}
:root.vt-nav::view-transition-old(root){animation:masNavOut var(--dur-2,200ms) var(--ease,cubic-bezier(.2,.8,.2,1)) both}
:root.vt-nav::view-transition-new(root){animation:masNavIn var(--dur-2,200ms) var(--ease,cubic-bezier(.2,.8,.2,1)) both}

/* ---------- ٨) احترام تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion:reduce){
  .mo-aurora i,.mo-u,.mo-s,.mo-p,.mo-bump,.toast{animation:none}
  .mo-ind,.funnel .fill,.navlist .nav .ic{transition:none}
  .btn.pri:hover::after{animation:none;opacity:0}
}