/* ==========================================================================
   national-day.css
   بانر اليوم الوطني السعودي ٩٦
   مركز الأمير سلطان للدراسات والبحوث الدفاعية
   ==========================================================================

   المسار: web/themes/custom/sass_theme_msd/css/national-day.css
   الملف المرافق: js/national-day.js
   القالب: templates/national-day/national-day-hero.html.twig

   المصدر البصري (Figma): BjpPtqWSr8gMYTQHXCqCQG
     ديسكتوب: Hero Section V2        → 3779:31579  (1440 × 491)
       الحالات الست: 31580 · 32315 · 33050 · 33785 · 34520 · 35255
       كومة الديسكتوب في كل حالة: ست بطاقات 491 × 491 متراكبة
       عند 0 / 45.8 / 91.6 / 137.4 / 183.2 / 229 — النشطة آخرها
     جوال:   Mobile Hero Section V2 → 3779:36250  (430 × 648.662)
       الحالات الست: 36251 · 36726 · 37201 · 37676 · 38151 · 38626
       كومة الجوال في كل حالة: 36500 · 36975 · 37450 · 37925 · 38400 · 38875

   ⚠️ قواعد العزل — لا تُخالَف:
   1) كل قاعدة هنا تبدأ بـ .nd-hero — عدا القسم 9 (إخفاء بانر الفيديو)
      وهو محصور بـ body.nd96-on فلا يعمل إلا على الصفحة الرئيسية.
   2) لا نستخدم rem إطلاقًا. الثيم فيه html{font-size:60px}
      (scss/base/base.scss:8) فأي rem يخرج بمقاس خاطئ.
   3) !important مستخدم في ثلاثة مواضع فقط، وكلها داخل .nd-hero:
      أ) عائلة خط العنوان — لتجاوز الفرض العالمي في
         css/force-ibm-plex-arabic.css الذي يستهدف body * و div و span.
      ب) لون مؤشّر الكتابة — لضمان مطابقته للون الكلمة مهما كانت
         قواعد الثيم العامة (القسم 6).
      ج) كتلة prefers-reduced-motion (القسم 11) — لتعطيل الحركة.

   ــــــ وحدة القياس --nd-u ــــــ
   حتى عرض 1440 يتمدّد التكوين بنِسَبه (السلوك الحالي الصحيح).
   فوق 1440 تتجمّد الوحدة عند 1440px، فتبقى كل الأحجام الفعلية كما
   صمّمها Figma (491 × 491 والخطوط والشعار والنقاط)، ويُمتصّ العرض
   الزائد بنيويًا: الخلفية والنقش يملآن الشاشة، وتتباعد الكومة يسارًا
   عن العمود النصي يمينًا.
     --nd-u = min(100cqw, 1440px)
     أي قيمة X من Figma للديسكتوب  →  calc(X / 1440 * var(--nd-u))
     أي قيمة X من Figma للجوال     →  calc(X / 430  * 100cqw)
   المتصفحات التي لا تدعم ذلك تأخذ قيمة الـpx الثابتة قبلها.

   الفهرس:
     1.  خط Saudi الرسمي (@font-face)
     2.  الحاوية والخلفيات الست + التلاشي المتقاطع
     3.  النقش
     4.  كومة الصور (الأكورديون)
     5.  الشعار
     6.  العنوان والكتابة الآلية والمؤشّر
     7.  الوصف
     8.  شريط التنقّل
     9.  إخفاء بانر الفيديو الحالي
     10. الجوال (< 768px)
     11. تقليل الحركة
   ========================================================================== */


/* ==========================================================================
   1. خط Saudi الرسمي
   المصدر: حزمة الهوية الرسمية — Saudi/Web fonts/
   الأوزان المتاحة في الحزمة: Regular (400) و Bold (700) فقط.
   ========================================================================== */

@font-face {
  font-family: "Saudi";
  src: url("../fonts/national-day/SaudiWeb-Regular.woff2") format("woff2"),
       url("../fonts/national-day/SaudiWeb-Regular.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Saudi";
  src: url("../fonts/national-day/SaudiWeb-Bold.woff2") format("woff2"),
       url("../fonts/national-day/SaudiWeb-Bold.woff")  format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   2. الحاوية والخلفيات الست
   ========================================================================== */

.nd-hero {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  /* الخلفية الافتراضية = الشريحة الأولى، حتى قبل عمل الـJS */
  background-image: linear-gradient(90deg, #E8C589 0%, #7C5D21 100%);
  /* لون الكلمة الافتراضي — يضمن أن المؤشّر لا يرث أي لون عام */
  --nd-word-color: #d8b67a;
  /* Figma: التدرّج بزاوية 90deg ثابتة — لا ينقلب مع RTL في CSS */
}

/* تدرّجات الديسكتوب الستة — مقروءة من عقد Layer في Figma */
.nd-hero[data-nd-state="0"] { background-image: linear-gradient(90deg, #E8C589 0%, #7C5D21 100%); }
.nd-hero[data-nd-state="1"] { background-image: linear-gradient(90deg, #E2DCF9 0%, #6565E0 100%); }
.nd-hero[data-nd-state="2"] { background-image: linear-gradient(90deg, #4DA6FF 0%, #0050AF 100%); }
.nd-hero[data-nd-state="3"] { background-image: linear-gradient(90deg, #FF55A2 0%, #971A4D 100%); }
.nd-hero[data-nd-state="4"] { background-image: linear-gradient(90deg, #CFE5C1 0%, #607C4F 100%); }
.nd-hero[data-nd-state="5"] { background-image: linear-gradient(90deg, #00894A 0%, #0EC60E 100%); }
/* الشريحة 6 معكوسة الاتجاه في Figma (داكن ← فاتح) — نُقلت كما هي بلا تطبيع */

/* ــــــ طبقة التلاشي المتقاطع بين التدرّجات ــــــ
   خاصية background-image لا تُستوفى بين تدرّجين، فالانتقال المباشر
   عليها لا ينتج أي تلاشٍ. الحل: طبقة واحدة فوق خلفية القسم تحمل
   تدرّج الشريحة السابقة كما هو ثم تتلاشى في 0.3s.

   ⚠️ لا تُغيَّر أي قيمة تدرّج هنا: الـJS ينسخ التدرّج السابق حرفيًا من
   getComputedStyle قبل تبديل data-nd-state، ويضعه في --nd-prev-gradient.

   z-index: 0 يضعها فوق خلفية .nd-hero وتحت .nd-hero__inner ومحتوياته
   (النقش z-index:1)، فلا تغطّي أي محتوى أو نقش إطلاقًا. */
.nd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background-image: var(--nd-prev-gradient, none);
}

.nd-hero.is-bg-fading::before {
  animation: nd-hero-bg-fade 0.3s ease-in-out;
}

@keyframes nd-hero-bg-fade {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ــــــ الحاوية الداخلية ــــــ
   عرضها = عرض القسم كاملًا، فالخلفية والنقش يملآن الشاشة دائمًا.
   لكن وحدة القياس --nd-u تتوقّف عند 1440، فلا يتضخّم أي عنصر فوقها. */
.nd-hero__inner {
  --nd-u: 1440px;                     /* احتياطي للمتصفحات بلا cqw */
  --nd-u: min(100cqw, 1440px);
  position: relative;
  width: 100%;
  margin-inline: auto;
  /* حتى 1440: الارتفاع بنسبة Figma. فوقها: يتوقّف عند 491 فلا يتضخّم.
     ⚠️ لا نستخدم --nd-u هنا: وحدة cqw داخل إعلان على الحاوية نفسها
     تُحسب على الحاوية الأعلى لا على هذا العنصر. الأبناء يحسبونها
     صحيحة لأن حاويتهم الأقرب هي هذا العنصر. */
  aspect-ratio: 1440 / 491;
  max-height: 491px;
  container-type: inline-size;
  /* قياس المرجع يعطي الانتقال (opacity 0.2s ease-in-out) دون قيمة هدف
     محقَّقة، فنُعرّف الانتقال ولا نخترع قيمة شفافية. */
  transition: opacity 0.2s ease-in-out;
}

/* منطقة قارئات الشاشة */
.nd-hero__sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   3. النقش فوق التدرّج — ملف مستقل لكل حالة
   Figma: Pattern 3779:31583 — 1511 × 539 فوق إطار 1440 × 491
   inset:0 فيغطّي عرض القسم كاملًا مهما اتّسعت الشاشة.
   ========================================================================== */

.nd-hero__pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* الافتراضي = الشريحة الأولى (مطابق للتدرّج الافتراضي في القسم 2) */
  background-image: url("../images/national-day/hero-pattern-vision.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.nd-hero[data-nd-state="0"] .nd-hero__pattern { background-image: url("../images/national-day/hero-pattern-vision.svg"); }
.nd-hero[data-nd-state="1"] .nd-hero__pattern { background-image: url("../images/national-day/hero-pattern-kindness.svg"); }
.nd-hero[data-nd-state="2"] .nd-hero__pattern { background-image: url("../images/national-day/hero-pattern-generosity.svg"); }
.nd-hero[data-nd-state="3"] .nd-hero__pattern { background-image: url("../images/national-day/hero-pattern-ambition.svg"); }
.nd-hero[data-nd-state="4"] .nd-hero__pattern { background-image: url("../images/national-day/hero-pattern-support.svg"); }
.nd-hero[data-nd-state="5"] .nd-hero__pattern { background-image: url("../images/national-day/hero-pattern-heritage.svg"); }


/* ==========================================================================
   4. كومة الصور — الأكورديون (الديسكتوب)
   Figma: Asset Deck 3779:32298 — 720 × 491

   قراءة الحالات الست من Figma (metadata):
     كل حالة = ست بطاقات 491 × 491 متراكبة عند
     x = 0 / 45.8 / 91.6 / 137.4 / 183.2 / 229
     البطاقة الأخيرة (النشطة) فوق الجميع وظاهرة كاملة،
     وكل بطاقة سابقة تُظهر حافتها اليسرى 45.8px فقط لأن التالية تغطّيها.
     وترتيب البطاقات يختلف في كل حالة — وهو ما يضبطه --nd-pos.

   التنفيذ: صفّ flex حقيقي. البطاقة صندوق بعرض 45.8 (مطوي) أو 491
   (نشط) مع overflow:hidden والصورة ثابتة 491 بالداخل — فالمطوي يُظهر
   الحافة اليسرى 45.8px تمامًا كما يفعل التراكب في Figma، والمجموع
   491 + 5 × 45.8 = 720 بالضبط.

   الحركة = نموذج أكورديون الحرس الوطني: استيفاء عرض حقيقي وإعادة
   تدفّق، لا translate. تفاصيل المرحلتين في القسم أدناه.
   ========================================================================== */

.nd-hero__deck {
  position: absolute;
  top: 0;
  left: 0;                       /* القسم dir=rtl لكن الكومة تُحسب بإحداثيات Figma */
  direction: ltr;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  /* مجموع الصفّ = 720 دائمًا (في السكون وأثناء الانتقال)، لأن البطاقات
     المطوية تمتصّ فراغ البطاقة المنكمشة عبر flex-grow. فلا يُزاح الصفّ
     ولا يخرج أي شريط عن حدود الكومة في أي لحظة. */
  justify-content: flex-start;
  width: 720px;
  width: calc(720 / 1440 * var(--nd-u));
  height: 100%;
  z-index: 2;
  overflow: hidden;
  container-type: inline-size;
  pointer-events: none;
}

.nd-hero__card {
  position: relative;
  /* flex-grow على البطاقات المطوية وحدها: تمتصّ الفراغ الذي تتركه
     البطاقة المنكمشة إلى صفر أثناء إعادة الترتيب، فيبقى المجموع 720.
     البطاقة المطوية نافذة تكشف جزءًا من صورتها الثابتة 491 — فاتّساعها
     المؤقّت يكشف قدرًا أكبر منها بلا أي تمديد أو تشويه.
     في السكون الفراغ = صفر، فالعروض = هندسة Figma بالضبط. */
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  order: var(--nd-pos, 0);       /* ترتيب الحالة — يضبطه الـJS من Figma */
  min-width: 0;
  width: 45.8px;
  width: calc(45.8 / 720 * 100cqw);
  height: 100%;
  overflow: hidden;
  /* قياس المرجع: عرض عنصر الأكورديون 0.45s cubic-bezier(.25,1,.5,1) */
  transition: width 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

.nd-hero__card.is-active {
  flex-grow: 0;                  /* النشطة لا تمتصّ الفراغ — تبقى 491 */
  width: 491px;
  width: calc(491 / 720 * 100cqw);
}

/* حدّ الصفر البنيوي — نموذج الحرس الوطني:
   البطاقة التي يجب أن تنتقل من طرف الكومة إلى الطرف الآخر تنكمش إلى
   صفر عرض أولًا، ثم يتغيّر ترتيبها وهي غير مرئية، ثم تعود إلى عرضها
   المطوي. الانكماش إلى صفر هو ما يُخفي إعادة الترتيب.

   ⚠️ بلا أي transition خاص: ترث الحركة نفسها من .nd-hero__card أعلاه
   (width 0.45s cubic-bezier(.25,1,.5,1))، فكل عروض الكومة تتحرّك
   بمنحنى واحد متناسق ولا تتصارع بطاقتان بتوقيتين مختلفين.
   تأتي بعد .is-active لتفوز عند تساوي الأولوية. */
.nd-hero__card.is-folding {
  flex-grow: 0;
  width: 0;
}

.nd-hero__card-img {
  display: block;
  width: 491px;                   /* الصورة كاملة داخل الصندوق المتمدّد/المنكمش */
  width: calc(491 / 720 * 100cqw);
  height: 100%;
  object-fit: cover;
  transform-origin: left center;  /* يثبّت الحافة اليسرى الظاهرة في الشريط المطوي */
  transform: scale(1);            /* ثابت — لا تصغير ولا تكبير للصورة إطلاقًا */
}

/* ⚠️ لا حركة scale على صورة الديسكتوب.
   صندوق البطاقة وحده هو الذي يتغيّر عرضه، فيكشف الصورة الثابتة
   491 × 491 أو يقصّها. الصورة لا تتحرّك ولا يتغيّر مقاسها في أي لحظة.
   (حركة الجوال مستقلة تمامًا وتقع في القسم 10 — لم تُمسّ.) */


/* ==========================================================================
   5. الشعار العمودي
   Figma: 175 × 80.295 — أعلى العمود النصي، تحته 32px
   ========================================================================== */

.nd-hero__logo {
  position: absolute;
  right: 80px;
  right: calc(80 / 1440 * var(--nd-u));
  top: 50.7px;
  top: calc(50.7047 / 491 * 100%);
  width: 175px;
  width: calc(175 / 1440 * var(--nd-u));
  height: auto;
  z-index: 3;
}


/* ==========================================================================
   6. العنوان والكتابة الآلية والمؤشّر
   Figma: «عِزّنا» Saudi Regular 74/72 tracking −1.48
          الكلمة   Saudi Bold    60/72 tracking −1.2
          المؤشّر  2 × 72، فجوة 4px،  الفجوة كلمة↔بادئة 8px
   ========================================================================== */

.nd-hero__text {
  position: absolute;
  right: 80px;
  right: calc(80 / 1440 * var(--nd-u));
  top: 163px;
  top: calc(163 / 491 * 100%);     /* 50.7047 + 80.295 + 32 */
  width: 604px;
  width: calc(604 / 1440 * var(--nd-u));
  z-index: 3;
  /* قياس المرجع: محتوى opacity + width 0.3s ease-in-out */
  transition: opacity 0.3s ease-in-out;
}

.nd-hero__title {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;     /* dir=rtl ⇒ البادئة إلى اليمين */
  gap: 8px;
  gap: calc(8 / 1440 * var(--nd-u));
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: 400;
  white-space: nowrap;
}

.nd-hero__prefix {
  /* !important هنا فقط — لتجاوز الفرض العالمي في force-ibm-plex-arabic.css */
  font-family: "Saudi", sans-serif !important;
  font-weight: 400;
  font-size: 74px;
  font-size: calc(74 / 1440 * var(--nd-u));
  line-height: 72px;
  line-height: calc(72 / 1440 * var(--nd-u));
  letter-spacing: -1.48px;
  letter-spacing: calc(-1.48 / 1440 * var(--nd-u));
  color: #FFFFFF;
}

/* في RTL يقع المؤشّر يسار الكلمة، أي ملاصقًا لآخر حرف مكتوب،
   ويتحرّك يسارًا كلّما طالت الكلمة — مطابق لتكوين Figma. */
.nd-hero__typer {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  gap: calc(4 / 1440 * var(--nd-u));
  color: var(--nd-word-color, #FFFFFF);
}

.nd-hero__word {
  font-family: "Saudi", sans-serif !important;
  font-weight: 700;
  font-size: 60px;
  font-size: calc(60 / 1440 * var(--nd-u));
  line-height: 72px;
  line-height: calc(72 / 1440 * var(--nd-u));
  letter-spacing: -1.2px;
  letter-spacing: calc(-1.2 / 1440 * var(--nd-u));
  white-space: nowrap;
  color: var(--nd-word-color, #d8b67a);
}

/* ألوان الكلمة الست — مقروءة من Figma */
.nd-hero[data-nd-state="0"] { --nd-word-color: #d8b67a; }
.nd-hero[data-nd-state="1"] { --nd-word-color: #ded8f7; }
.nd-hero[data-nd-state="2"] { --nd-word-color: #07b9ff; }
.nd-hero[data-nd-state="3"] { --nd-word-color: #ff85c7; }
.nd-hero[data-nd-state="4"] { --nd-word-color: #c9e0bb; }
.nd-hero[data-nd-state="5"] { --nd-word-color: #ebffe6; }

/* المؤشّر — مقاس Figma بالضبط، ولونه هو لون الكلمة الحالية نفسه.
   !important على اللون والظهور فقط: الثيم فيه قواعد عامة تستهدف
   span (انظر css/force-ibm-plex-arabic.css)، وهذا يضمن أن القيمة
   المحسوبة لـ background-color تساوي دائمًا قيمة color في
   .nd-hero__word لأن المصدر متغيّر واحد --nd-word-color. */
.nd-hero__caret {
  flex: 0 0 auto;
  display: block;
  width: 2px;
  width: calc(2 / 1440 * var(--nd-u));
  height: 72px;
  height: calc(72 / 1440 * var(--nd-u));
  color: var(--nd-word-color, #FFFFFF);
  background-color: var(--nd-word-color, #FFFFFF) !important;
  border: 0;
  /* الحالة الافتراضية = بعد انتهاء الكتابة: مخفي — بلا display:none */
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

/* أثناء الكتابة: ظاهر ويومض بتوقيت المرجع 0.75s steps(1) infinite.
   الـJS يضيف is-typing قبل كتابة أول حرف بفاصل واحد، فيظهر المؤشّر
   أولًا ثم تبدأ الحروف بالتوالي. */
.nd-hero__typer.is-typing .nd-hero__caret {
  /* بلا !important هنا عمدًا: إعلان !important يتغلّب على الحركات في
     CSS، فيقتل الوميض. الظهور مضمون بالأولوية (0,2,0) وحدها. */
  opacity: 1;
  animation: nd-hero-blink 0.75s steps(1) infinite;
}

/* لحظة استقرار قبل التلاشي: توقف الوميض وتثبّت المؤشّر ظاهرًا، فيبدأ
   التلاشي 0.2s من قيمة ظاهرة مؤكّدة مهما كانت نصف دورة الوميض التي
   انتهت عندها الكلمة. الـJS يضيفها ثم يزيلها مع is-typing. */
.nd-hero__typer.is-caret-settled .nd-hero__caret {
  animation: none;
  opacity: 1;
}

@keyframes nd-hero-blink {
  0%, 50%  { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}


/* ==========================================================================
   7. الوصف
   Figma: IBM Plex Sans Arabic Regular 20/30 أبيض، صندوق 604 × 120
   الخط محمّل أصلًا في الثيم — لا نضيف أي @font-face له
   ========================================================================== */

.nd-hero__descs {
  position: relative;
  margin-top: 24px;
  margin-top: calc(24 / 1440 * var(--nd-u));
  height: 120px;
  height: calc(120 / 1440 * var(--nd-u));
  /* قياس المرجع: ارتفاع الكتلة الداخلية 1.3s ease-in-out */
  transition: height 1.3s ease-in-out;
}

.nd-hero__desc {
  position: absolute;
  inset-inline: 0;
  top: 0;
  margin: 0;
  padding: 0;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 400;
  font-size: 20px;
  font-size: calc(20 / 1440 * var(--nd-u));
  line-height: 30px;
  line-height: calc(30 / 1440 * var(--nd-u));
  letter-spacing: 0;
  text-align: right;
  color: #FFFFFF;
  opacity: 0;
  visibility: hidden;
  /* قياس المرجع: شفافية النص 1.5s ease-in-out */
  transition: opacity 1.5s ease-in-out, visibility 0s linear 1.5s;
}

.nd-hero__desc.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.5s ease-in-out, visibility 0s linear 0s;
}

.nd-hero__desc-m { display: none; }   /* نص الجوال مخفي على الديسكتوب */


/* ==========================================================================
   8. شريط التنقّل
   Figma: Frame 96 — 40px من الأسفل، 80px من اليمين، ارتفاع 40
          السهم 40 × 40 دائري #1b8354 · النقطة 12px · الفجوة 8px
          الفجوة سهم↔أول نقطة = 22px  (10 فجوة الإطار + 12 حشو الحاوية)
   ========================================================================== */

.nd-hero__controls {
  position: absolute;
  right: 80px;
  right: calc(80 / 1440 * var(--nd-u));
  bottom: 40px;
  bottom: calc(40 / 491 * 100%);
  z-index: 4;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 22px;
  gap: calc(22 / 1440 * var(--nd-u));
}

.nd-hero__arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  width: calc(40 / 1440 * var(--nd-u));
  height: 40px;
  height: calc(40 / 1440 * var(--nd-u));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background-color: #1b8354;   /* Figma token: Button/button-background-primary-default */
  color: #FFFFFF;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity 0.2s ease-in-out;
}

.nd-hero__arrow img {
  display: block;
  width: 16px;
  width: calc(16 / 1440 * var(--nd-u));
  height: 16px;
  height: calc(16 / 1440 * var(--nd-u));
}

.nd-hero__arrow:hover  { opacity: 0.85; }
.nd-hero__arrow:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

.nd-hero__dots {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;                     /* Figma token: Global/spacing-md */
  gap: calc(8 / 1440 * var(--nd-u));
}

.nd-hero__dot {
  flex: 0 0 auto;
  width: 12px;
  width: calc(12 / 1440 * var(--nd-u));
  height: 12px;
  height: calc(12 / 1440 * var(--nd-u));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #e5e7eb;    /* Figma token: Background/background-neutral-200 */
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.3s ease-in-out;
}

.nd-hero__dot.is-active {
  background-color: #1b8354;    /* Figma token: Stepper/stepper-button-completed */
}

.nd-hero__dot:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}


/* شريط النقوش السفلي — يظهر في الجوال فقط */
.nd-hero__banner { display: none; }


/* ==========================================================================
   9. إخفاء بانر الفيديو الحالي — القاعدة الوحيدة خارج نطاق .nd-hero
   محصورة بـ body.nd96-on الذي يضيفه sass_theme_msd_preprocess_html()
   على الصفحة الرئيسية فقط.

   لا تحتاج !important: مكتبتنا معرّفة تحت css.theme بينما
   css/header-hero-standard.css تحت css.base، ودروبال يحمّل theme بعد base.

   ⚠️ بيانات الفقرة وإعداداتها وفيديوها سليمة تمامًا — إخفاء عرض فقط.
   ========================================================================== */

body.nd96-on .paragraph--type--hero-section { display: none; }


/* ==========================================================================
   10. الجوال — Mobile Hero Section V2 (430 × 648.662)
   تكوين مستقل تمامًا، وليس تصغيرًا للديسكتوب.
   ========================================================================== */

@media (max-width: 767px) {

  /* تدرّجات الجوال الستة — رأسية (to bottom)، داكن ← فاتح */
  .nd-hero[data-nd-state="0"] { background-image: linear-gradient(180deg, #211501 0%, #7C5D21 100%); }
  .nd-hero[data-nd-state="1"] { background-image: linear-gradient(180deg, #312D6E 0%, #6565E0 100%); }
  .nd-hero[data-nd-state="2"] { background-image: linear-gradient(180deg, #011D3A 0%, #0050AF 100%); }
  .nd-hero[data-nd-state="3"] { background-image: linear-gradient(180deg, #340117 0%, #971A4D 100%); }
  .nd-hero[data-nd-state="4"] { background-image: linear-gradient(180deg, #1B2613 0%, #607C4F 100%); }
  .nd-hero[data-nd-state="5"] { background-image: linear-gradient(180deg, #01572B 0%, #5ABA1C 100%); }
  .nd-hero { background-image: linear-gradient(180deg, #211501 0%, #7C5D21 100%); }

  .nd-hero__inner {
    max-width: none;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 14px;                      /* Figma: pt-[14px] */
    padding-top: calc(14 / 430 * 100cqw);
    overflow: hidden;                        /* Figma: overflow-clip على الجذر */
  }

  /* النقش الكامل غير موجود في تكوين الجوال */
  .nd-hero__pattern { display: none; }

  /* الشعار: أعلى ووسط — 145.287 × 66.662 */
  .nd-hero__logo {
    position: static;
    order: 1;
    width: 145.287px;
    width: calc(145.287 / 430 * 100cqw);
    height: auto;
    margin: 0;
  }

  /* الكومة: 430 × 359. ليست صفّ flex في الجوال — البطاقات مطلقة
     التموضع بإحداثيات Figma الصريحة لكل حالة. */
  .nd-hero__deck {
    position: relative;
    order: 2;
    display: block;
    justify-content: normal;
    left: auto;
    width: 100%;
    height: 359px;
    height: calc(359 / 430 * 100cqw);
    flex: 0 0 auto;
  }

  /* ــــــ بطاقات الجوال ــــــ
     المقاسات كما في Figma حرفيًا: الثانوية 238.81 × 238.81 والنشطة
     324 × 324 — عرض وارتفاع حقيقيان، لا تصغير بـ scale، فتبقى الصور
     حادّة في كل الحالات.

     التموضع: الـJS يضبط --nd-cx و --nd-cy = مركز البطاقة في تلك
     الحالة، مقروءًا من جدول صريح فيه إحداثيات Figma الست
     (العقد 36500 · 36975 · 37450 · 37925 · 38400 · 38875).
     لا صيغة رياضية واحدة تُعمَّم على الحالات.

     التموضع بالمركز (‎-50%) يجعل تغيّر العرض/الارتفاع يتمدّد وينكمش
     حول مركز البطاقة نفسه — أي سلوك الحرس الوطني: الخارجة تتحرّك
     نحو موضعها الثانوي وتصغر، والداخلة تتحرّك نحو موضع النشطة
     وتكبر، والباقي يعيد ترتيب مواضعه — كل بطاقة بمسافتها الخاصة
     (الخارجة تقطع مسافة أطول من البقية)، فليس انزلاق صفّ موحّد. */
  .nd-hero__card {
    position: absolute;
    order: 0;
    left: 0;
    top: 0;
    width: 238.81px;
    width: calc(238.81 / 430 * 100cqw);
    height: 238.81px;
    height: calc(238.81 / 430 * 100cqw);
    z-index: 1;
    opacity: 1;
    overflow: hidden;
    transform: translate(calc(var(--nd-cx, 0) * 1px - 50%), calc(var(--nd-cy, 0) * 1px - 50%));
    transform: translate(calc(var(--nd-cx, 0) / 430 * 100cqw - 50%),
                         calc(var(--nd-cy, 0) / 430 * 100cqw - 50%));
    /* قياس المرجع للجوال: 0.7s ease-in-out */
    transition: transform 0.7s ease-in-out,
                width     0.7s ease-in-out,
                height    0.7s ease-in-out,
                opacity   0.7s ease-in-out;
  }

  .nd-hero__card.is-active {
    width: 324px;
    width: calc(324 / 430 * 100cqw);
    height: 324px;
    height: calc(324 / 430 * 100cqw);
    z-index: 2;
  }

  /* طيّ الأكورديون خاص بالديسكتوب — يُبطَل هنا */
  .nd-hero__card.is-folding {
    width: 238.81px;
    width: calc(238.81 / 430 * 100cqw);
    transition: transform 0.7s ease-in-out,
                width     0.7s ease-in-out,
                height    0.7s ease-in-out,
                opacity   0.7s ease-in-out;
  }

  /* الصورة تملأ صندوق البطاقة بمقاسه الحقيقي، فتُرسم حادّة دائمًا */
  .nd-hero__card-img {
    width: 100%;
    height: 100%;
    transform: none;
  }

  /* حركة صورة الديسكتوب لا تنطبق هنا — البطاقة نفسها تحمل الحركة */
  .nd-hero__card.is-entering .nd-hero__card-img,
  .nd-hero__card.is-leaving  .nd-hero__card-img {
    animation: none;
  }

  /* شريط النقوش السفلي: 430 × 209 */
  .nd-hero__banner {
    display: block;
    position: relative;
    order: 3;
    width: 100%;
    height: 209px;
    height: calc(209 / 430 * 100cqw);
    overflow: hidden;
    flex: 0 0 auto;
    transition: background-color 0.3s ease-in-out;
  }

  .nd-hero[data-nd-state="0"] .nd-hero__banner { background-color: #7C5D21; }
  .nd-hero[data-nd-state="1"] .nd-hero__banner { background-color: #6565E0; }
  .nd-hero[data-nd-state="2"] .nd-hero__banner { background-color: #0050AF; }
  .nd-hero[data-nd-state="3"] .nd-hero__banner { background-color: #971A4D; }
  .nd-hero[data-nd-state="4"] .nd-hero__banner { background-color: #607C4F; }
  .nd-hero[data-nd-state="5"] .nd-hero__banner { background-color: #3E9A21; }

  /* نقش الشريط: 772.745 × 86.411، شفافية 19%، bottom 2.59، left 0 */
  .nd-hero__banner-pattern {
    position: absolute;
    left: 0;
    bottom: 2.59px;
    bottom: calc(2.59 / 430 * 100cqw);
    width: 772.745px;
    width: calc(772.745 / 430 * 100cqw);
    height: 86.411px;
    height: calc(86.411 / 430 * 100cqw);
    opacity: 0.19;
    background-image: url("../images/national-day/mobile-pattern-vision.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .nd-hero[data-nd-state="0"] .nd-hero__banner-pattern { background-image: url("../images/national-day/mobile-pattern-vision.svg"); }
  .nd-hero[data-nd-state="1"] .nd-hero__banner-pattern { background-image: url("../images/national-day/mobile-pattern-kindness.svg"); }
  .nd-hero[data-nd-state="2"] .nd-hero__banner-pattern { background-image: url("../images/national-day/mobile-pattern-generosity.svg"); }
  .nd-hero[data-nd-state="3"] .nd-hero__banner-pattern { background-image: url("../images/national-day/mobile-pattern-ambition.svg"); }
  .nd-hero[data-nd-state="4"] .nd-hero__banner-pattern { background-image: url("../images/national-day/mobile-pattern-support.svg"); }
  .nd-hero[data-nd-state="5"] .nd-hero__banner-pattern { background-image: url("../images/national-day/mobile-pattern-heritage.svg"); }

  /* النص فوق الشريط — طبقة تعتيم بتدرّج 181.4507deg */
  .nd-hero__text {
    position: absolute;
    inset: 0;
    top: auto;
    right: auto;
    bottom: 0;
    width: 100%;
    height: 209px;
    height: calc(209 / 430 * 100cqw);
    order: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    padding: calc(16 / 430 * 100cqw);
    box-sizing: border-box;
    overflow: hidden;
    z-index: 3;
  }

  .nd-hero[data-nd-state="0"] .nd-hero__text { background-image: linear-gradient(181.4507deg, #5F4617 23.541%, #61481A 62.158%, rgba(97,72,26,0) 110.35%); }
  .nd-hero[data-nd-state="1"] .nd-hero__text { background-image: linear-gradient(181.4507deg, #5453BB 23.541%, #5453BB 62.158%, rgba(84,83,187,0) 110.35%); }
  .nd-hero[data-nd-state="2"] .nd-hero__text { background-image: linear-gradient(181.4507deg, #00408A 23.541%, #01418A 62.158%, rgba(1,65,138,0) 110.35%); }
  .nd-hero[data-nd-state="3"] .nd-hero__text { background-image: linear-gradient(181.4507deg, #77123C 23.541%, #78133D 62.158%, rgba(120,19,61,0) 110.35%); }
  .nd-hero[data-nd-state="4"] .nd-hero__text { background-image: linear-gradient(181.4507deg, #4B613D 23.541%, #4B613D 62.158%, rgba(75,97,61,0) 110.35%); }
  .nd-hero[data-nd-state="5"] .nd-hero__text { background-image: linear-gradient(181.4507deg, #3D9A21 23.541%, #3D9921 62.158%, rgba(61,153,33,0) 110.35%); }

  /* العنوان: محاذاة وسط، فجوة 5.926 */
  .nd-hero__title {
    justify-content: center;
    gap: 5.926px;
    gap: calc(5.926 / 430 * 100cqw);
    width: 100%;
  }

  .nd-hero__prefix {
    font-size: 47.407px;
    font-size: calc(47.407 / 430 * 100cqw);
    line-height: 53.333px;
    line-height: calc(53.333 / 430 * 100cqw);
    letter-spacing: -0.9481px;
    letter-spacing: calc(-0.9481 / 430 * 100cqw);
  }

  .nd-hero__typer {
    gap: 2.631px;
    gap: calc(2.631 / 430 * 100cqw);
  }

  .nd-hero__word {
    font-size: 39.46px;
    font-size: calc(39.46 / 430 * 100cqw);
    line-height: 47.356px;
    line-height: calc(47.356 / 430 * 100cqw);
    letter-spacing: -0.7892px;
    letter-spacing: calc(-0.7892 / 430 * 100cqw);
  }

  /* مقاس المؤشّر في الجوال — الحالات ١..٥ */
  .nd-hero__caret {
    width: 1.315px;
    width: calc(1.315 / 430 * 100cqw);
    height: 47.356px;
    height: calc(47.356 / 430 * 100cqw);
  }

  /* الحالة ٦ وحدها في Figma بمقاس 1.333 × 48 */
  .nd-hero[data-nd-state="5"] .nd-hero__caret {
    width: 1.333px;
    width: calc(1.333 / 430 * 100cqw);
    height: 48px;
    height: calc(48 / 430 * 100cqw);
  }

  /* الوصف: نص الجوال المختصر، محاذاة وسط، 398 × 71 */
  .nd-hero__descs {
    margin-top: 12px;
    margin-top: calc(12 / 430 * 100cqw);
    width: 398px;
    width: calc(398 / 430 * 100cqw);
    height: 71px;
    height: calc(71 / 430 * 100cqw);
  }

  .nd-hero__desc { text-align: center; }
  .nd-hero__desc-d { display: none; }
  .nd-hero__desc-m { display: inline; }

  .nd-hero__desc {
    font-size: 20px;
    font-size: calc(20 / 430 * 100cqw);
    line-height: 30px;
    line-height: calc(30 / 430 * 100cqw);
  }

  /* النقاط: وسط تام — الأسهم غير موجودة في تكوين الجوال */
  .nd-hero__controls {
    position: absolute;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: 16px;
    bottom: calc(16 / 430 * 100cqw);
    z-index: 4;
  }

  .nd-hero__arrow { display: none; }

  .nd-hero__dots {
    gap: 8px;
    gap: calc(8 / 430 * 100cqw);
  }

  .nd-hero__dot {
    width: 12px;
    width: calc(12 / 430 * 100cqw);
    height: 12px;
    height: calc(12 / 430 * 100cqw);
  }
}


/* ==========================================================================
   11. تقليل الحركة
   التصميم لا يتغيّر — تتوقف الحركة والتبديل التلقائي فقط.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .nd-hero *,
  .nd-hero *::before,
  .nd-hero *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  /* لا تلاشٍ متقاطع للخلفية (الـJS لا يشغّله أصلًا) */
  .nd-hero::before { animation: none !important; }
  /* لا وميض، ولا يبقى المؤشّر ظاهرًا للأبد. الـJS لا يضيف is-typing
     في هذه الحالة، فتسري الشفافية 0 الافتراضية. */
  .nd-hero__caret,
  .nd-hero__typer.is-typing .nd-hero__caret { animation: none !important; }
}