/* ==========================================================================
   محسوب — الحركة والتفاعل
   ==========================================================================
   مبدأ حاكم: الحركة تخدم الفهم أو تختفي.

   هذا نظام محاسبي يقضي فيه المستخدم ساعات يوميًا. الحركة التي تبهر في
   الزيارة الأولى تصبح إزعاجًا في المئة التالية. لذلك كل ما هنا:
     · بطيء وخافت (لا يلفت النظر إلا إذا نظرت إليه)
     · لا يعيق تفاعلًا (لا انتظار قبل الضغط)
     · يُلغى بالكامل مع prefers-reduced-motion
     · لا يتحرك في الطباعة إطلاقًا
   ========================================================================== */

/* --------------------------------------------------------------------------
   خلفية حيّة خفيفة
   -------------------------------------------------------------------------- */

.mk-hero,
.bg-alive {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* هالتان لونيتان تتنفّسان ببطء شديد.
   تُرسمان بـ transform و opacity فقط — وهما الخاصيتان الوحيدتان اللتان
   يحرّكهما المتصفح على بطاقة الرسوم بلا إعادة تخطيط. تحريك الأبعاد أو
   المواضع هنا كان سيُبقي المعالج مشغولًا طوال جلسة العمل. */
.mk-hero::before,
.mk-hero::after,
.bg-alive::before,
.bg-alive::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  pointer-events: none;
  will-change: transform;
}

.mk-hero::before,
.bg-alive::before {
  width: 480px;
  height: 480px;
  inset-block-start: -180px;
  inset-inline-end: -120px;
  background: radial-gradient(circle, var(--brand-200) 0%, transparent 70%);
  animation: drift-a 26s ease-in-out infinite;
}

.mk-hero::after,
.bg-alive::after {
  width: 380px;
  height: 380px;
  inset-block-start: 40px;
  inset-inline-start: -140px;
  background: radial-gradient(circle, var(--brand-100) 0%, transparent 70%);
  animation: drift-b 32s ease-in-out infinite;
}

/* مدّتان مختلفتان وغير متضاعفتين (26s و 32s): لو تطابقتا لظهر نبض
   منتظم يلتقطه النظر، والمطلوب حركة لا يلاحظها أحد. */
@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-40px, 30px, 0) scale(1.12); }
}

@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(35px, -25px, 0) scale(1.08); }
}

/* --------------------------------------------------------------------------
   ظهور تدريجي عند التمرير
   -------------------------------------------------------------------------- */

/* الحالة الابتدائية تُضاف بجافاسكربت لا في CSS.
   لو كُتبت هنا لبقي المحتوى مخفيًا لدى من عطّل جافاسكربت — وإخفاء محتوى
   محاسبي بسبب زخرفة خطأ غير مقبول. */
.js-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}

.js-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   تفاعل العناصر
   -------------------------------------------------------------------------- */

.mk-card,
.mk-sector,
.mk-step,
.mk-plan,
.kpi {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.mk-card:hover,
.mk-sector:hover,
.mk-step:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--brand-300);
}

.mk-plan:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* بطاقات المؤشرات ترتفع أقل: هي بيانات تُقرأ لا روابط تُنقر،
   والحركة القوية عليها توحي بقابلية النقر كذبًا. */
.kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn {
  transition: background .15s ease, border-color .15s ease,
              transform .08s ease, box-shadow .15s ease;
}

.btn--primary:hover {
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-500) 40%, transparent);
}

.sidebar__link {
  transition: background .14s ease, border-color .14s ease,
              padding-inline-start .14s ease;
}

.sidebar__link:hover:not(.is-disabled) {
  padding-inline-start: calc(var(--space-2) + 4px);
}

/* صفوف الجداول: تمييز الصف المحوّم فوقه يقلّل خطأ قراءة السطر الخطأ
   في جدول أستاذ طويل. */
tbody tr {
  transition: background .12s ease;
}

/* --------------------------------------------------------------------------
   خطوات الإثراء
   -------------------------------------------------------------------------- */

.enrich-step {
  transition: background .16s ease, padding-inline-start .16s ease;
  border-radius: var(--radius-sm);
}

.enrich-step:hover {
  background: var(--brand-50);
  padding-inline-start: var(--space-3);
}

/* شريط تقدّم الإثراء يمتلئ بحركة عند أول ظهور */
.progress {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--gray-200);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-400));
  width: 0;
  transition: width 1.1s cubic-bezier(.22, 1, .36, 1);
}

/* --------------------------------------------------------------------------
   تمرير سلس للروابط الداخلية
   -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;   /* ارتفاع الشريط اللاصق */
}

/* --------------------------------------------------------------------------
   الإلغاء الكامل
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .mk-hero::before, .mk-hero::after,
  .bg-alive::before, .bg-alive::after {
    animation: none;
  }

  .js-reveal { opacity: 1; transform: none; transition: none; }

  .mk-card:hover, .mk-sector:hover, .mk-step:hover,
  .mk-plan:hover, .kpi:hover { transform: none; }

  .progress__bar { transition: none; }
}

@media print {
  .mk-hero::before, .mk-hero::after,
  .bg-alive::before, .bg-alive::after { display: none; }

  .js-reveal { opacity: 1; transform: none; }
}