/* ============================================================
   صوت نوت — نواة الحركة
   الأنماط الأربعة للدخول (A/B/C/D) + الرموز + احترام تقليل الحركة.
   تُحمَّل قبل أي ملف أصل (b1…b8).
   ============================================================ */

:root {
  /* ===== BRAND CORE ===== */
  --navy-900: #08182E;
  --navy-800: #0B1F3B;
  --navy-700: #122B4E;
  --navy-600: #1B3A63;
  --cyan-600: #0596B4;
  --cyan-500: #06B6D4;
  --cyan-400: #22C9E6;
  --cyan-100: #CFF5FB;
  --cyan-50:  #ECFCFF;

  /* ===== NEUTRALS ===== */
  --ink-900: #0F172A;
  --ink-700: #334155;
  --ink-500: #64748B;
  --ink-300: #CBD5E1;
  --ink-100: #F1F5F9;
  --ink-50:  #F8FAFC;
  --white:   #FFFFFF;

  /* ===== SEMANTIC ===== */
  --success: #0EA678;  --success-bg: #E7F7F1;
  --warning: #E68A00;  --warning-bg: #FFF4E3;
  --danger:  #DC4A4A;  --danger-bg:  #FDECEC;
  --info:    #06B6D4;  --info-bg:    #ECFCFF;

  /* ===== SYSTEM ===== */
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px;
  --shadow-sm: 0 1px 2px rgba(11,31,59,.06);
  --shadow-md: 0 6px 18px rgba(11,31,59,.08);
  --shadow-lg: 0 16px 40px rgba(11,31,59,.12);
  --font-ar: 'IBM Plex Sans Arabic', sans-serif;
  --font-lat: 'Sora', sans-serif;

  /* ===== MOTION — بلا ارتداد إطلاقًا ===== */
  --ease-enter: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-exit:  cubic-bezier(0.55, 0, 0.65, 1);
  --ease-move:  cubic-bezier(0.4, 0, 0.25, 1);

  --t-micro: 180ms;
  --t-enter: 600ms;
  --t-scene: 900ms;
  --t-count: 1400ms;
  --t-draw:  1200ms;
}

/* ============================================================
   النمط A · رفع وتلاشٍ — الافتراضي للنصوص والبطاقات
   ============================================================ */
.sn-a {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--t-enter) var(--ease-enter),
    transform var(--t-enter) var(--ease-enter);
  transition-delay: var(--sn-delay, 0ms);
  will-change: opacity, transform;
}
.sn-a.is-in { opacity: 1; transform: none; }

/* التدرّج بين العناصر — ٧٠ms افتراضيًا (٤٠ms للشارات الكثيفة) */
.sn-stagger > * { --sn-step: 70ms; }
.sn-stagger--tight > * { --sn-step: 40ms; }

/* ============================================================
   النمط B · رسم مسار — المخططات والحلقات والخيط
   ============================================================ */
.sn-b {
  stroke-dasharray: var(--sn-len, 1000);
  stroke-dashoffset: var(--sn-len, 1000);
  transition: stroke-dashoffset var(--sn-draw, var(--t-draw)) var(--ease-move);
  transition-delay: var(--sn-delay, 0ms);
}
.sn-b.is-in { stroke-dashoffset: 0; }

/* ============================================================
   النمط C · عدّاد — كل رقم بطولي
   ============================================================ */
.sn-num {
  font-family: var(--font-lat);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}
/* أرقام السرد العربية-الهندية تبقى بخط عربي */
.sn-num--ar {
  font-family: var(--font-ar);
  direction: rtl;
}

/* ============================================================
   النمط D · مشهد مثبَّت
   ============================================================ */
.sn-pin { position: relative; }
.sn-pin__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* ============================================================
   عناصر مشتركة
   ============================================================ */
.sn-methodology {
  font-size: 13px;
  color: var(--ink-500);
  line-height: 1.7;
}
.sn-methodology--on-navy { color: #8FA6C2; }

.sn-figure-cap {
  font-size: 13px;
  color: var(--ink-500);
  margin-top: 14px;
}

/* حاوية أي أصل حركي */
.sn-asset { position: relative; }

/* تسمية بديلة للقارئات الشاشية — الأصول الحركية كلها تحمل واحدة */
.sn-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   تقليل الحركة — الحالة النهائية فورًا، بلا استثناء
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sn-a { opacity: 1; transform: none; transition: none; }
  .sn-b { stroke-dashoffset: 0; transition: none; }
  .sn-pin__stage { position: relative; height: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}