/* ==========================================================================
   فواتيري — الحركة
   قاعدتان تحكمان كل شيء هنا:
   1. الحركة عبر transform و opacity فقط (تسريع GPU، بلا إعادة تخطيط).
   2. كل ما في هذا الملف ينطفئ تحت prefers-reduced-motion (آخر الملف).
   ========================================================================== */

/* ==========================================================================
   1) الظهور عند التمرير
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--t-reveal) var(--ease-out) var(--reveal-delay, 0ms),
    transform var(--t-reveal) var(--ease-out) var(--reveal-delay, 0ms);
}

[data-reveal='fade']  { transform: none; }
[data-reveal='scale'] { transform: scale(0.94); }
[data-reveal='left']  { transform: translateX(-30px); }
[data-reveal='right'] { transform: translateX(30px); }

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   2) الخيط الذهبي — «مسار الأتعاب»
   ========================================================================== */
@keyframes threadGlowPulse {
  0%, 100% { r: 4;   opacity: 0.95; }
  50%      { r: 5.6; opacity: 0.65; }
}

@keyframes threadHaloPulse {
  0%, 100% { r: 9;  opacity: 0.28; }
  50%      { r: 15; opacity: 0.06; }
}

.thread__glow-core { animation: threadGlowPulse 2.4s var(--ease) infinite; }
.thread__glow-halo { animation: threadHaloPulse 2.4s var(--ease) infinite; }

/* المقطع المكسور في قسم الألم — الشرطات تنزلق ببطء كأن التيار متعثّر */
@keyframes threadStutter {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: 28px; }
}
.thread__broken { animation: threadStutter 2.8s linear infinite; }

/* ==========================================================================
   3) الهيرو — الخط المرسوم تحت كلمة «أتعابك»
      الحيلة: pathLength="1" على المسار يجعل الطول = 1 مهما كان شكله،
      فيكفي dashoffset من 1 إلى 0 بلا أي JS.
   ========================================================================== */
@keyframes drawUnderline {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

.mark__stroke {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: drawUnderline 1.05s var(--ease-out) 0.75s forwards;
}

/* ==========================================================================
   4) الهيرو — خلفية الأقواس العالمية
      الشرطات تنساب على القوس باتجاه فلسطين = المال في الطريق.
   ========================================================================== */
@keyframes arcFlow {
  to { stroke-dashoffset: -160; }
}

.arc__flow {
  stroke-dasharray: 2 11;
  stroke-linecap: round;
  animation: arcFlow 5.5s linear infinite;
}
.arc__flow--2 { animation-duration: 7s;   animation-delay: -1.6s; }
.arc__flow--3 { animation-duration: 6.2s; animation-delay: -3.1s; }
.arc__flow--4 { animation-duration: 8s;   animation-delay: -0.7s; }

/* نقاط المدن تنبض */
@keyframes cityPulse {
  0%, 100% { transform: scale(1);   opacity: 0.85; }
  50%      { transform: scale(1.9); opacity: 0.15; }
}
.city__ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: cityPulse 3s var(--ease) infinite;
}
.city__ring--2 { animation-delay: -0.8s; }
.city__ring--3 { animation-delay: -1.7s; }
.city__ring--4 { animation-delay: -2.4s; }

/* عقدة فلسطين — نبض أدفأ وأبطأ */
@keyframes homePulse {
  0%, 100% { transform: scale(1);   opacity: 0.55; }
  50%      { transform: scale(2.3); opacity: 0;    }
}
.home__halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: homePulse 3.6s var(--ease-out) infinite;
}

/* ==========================================================================
   5) الهيرو — الفاتورة الحية
      التسلسل الزمني: البطاقة ← البنود ← الإجمالي ← الختم ← إشعار الوصول
   ========================================================================== */
@keyframes invoiceIn {
  from { opacity: 0; transform: translateY(26px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

@keyframes rowIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* الختم يهبط من الأعلى بدوران ثم يستقرّ مائلاً قليلاً */
@keyframes stampIn {
  0%   { opacity: 0; transform: rotate(-26deg) scale(2.1); }
  55%  { opacity: 1; transform: rotate(-9deg)  scale(0.92); }
  75%  {              transform: rotate(-11deg) scale(1.04); }
  100% { opacity: 1; transform: rotate(-10deg) scale(1); }
}

/* موجة ضوء تعبر البطاقة لحظة الدفع */
@keyframes paidSweep {
  from { transform: translateX(-120%) skewX(-14deg); opacity: 0; }
  35%  { opacity: 0.9; }
  to   { transform: translateX(120%) skewX(-14deg);  opacity: 0; }
}

@keyframes arriveIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.invoice        { opacity: 0; }
.invoice__row   { opacity: 0; }
.invoice__total { opacity: 0; }
.invoice__stamp { opacity: 0; }
.invoice__arrive{ opacity: 0; }

.invoice.is-playing            { animation: invoiceIn .85s var(--ease-out) forwards; }
.invoice.is-playing .invoice__row   { animation: rowIn .55s var(--ease-out) forwards; }
.invoice.is-playing .invoice__row:nth-of-type(1) { animation-delay: .45s; }
.invoice.is-playing .invoice__row:nth-of-type(2) { animation-delay: .65s; }
.invoice.is-playing .invoice__total { animation: rowIn .55s var(--ease-out) .9s forwards; }
.invoice.is-playing .invoice__stamp { animation: stampIn .7s var(--ease-spring) 1.95s forwards; }
.invoice.is-playing .invoice__sweep { animation: paidSweep 1.1s var(--ease) 1.95s; }
/* شارة الوصول تقع خارج البطاقة، فتُشغَّل من الحاوية */
.hero__stage.is-playing .invoice__arrive { animation: arriveIn .6s var(--ease-out) 2.65s forwards; }

/* نبضة خفيفة دائمة على شارة الوصول بعد استقرارها */
@keyframes livePulse {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.82); }
}
.live-dot { animation: livePulse 2s var(--ease) infinite; }

/* ==========================================================================
   6) الهيدر وشريط الفعل
   ========================================================================== */
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}
.header__inner { animation: fadeDown .7s var(--ease-out) both; }

/* ==========================================================================
   7) قسم الألم — كل أيقونة تروي عطبها
   ========================================================================== */
@keyframes lockClick {
  0%   { transform: translateY(-5px); }
  60%  { transform: translateY(1px); }
  100% { transform: none; }
}
@keyframes frostShimmer { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes ghostFlicker { 0%, 100% { opacity: 1; } 45% { opacity: 0.25; } 70% { opacity: 0.7; } }

.pain__card.is-revealed .pain__icon--lock  svg { animation: lockClick .55s var(--ease-spring) .25s; }
.pain__card.is-revealed .pain__icon--frost svg { animation: frostShimmer 2.6s var(--ease) .2s 2; }
.pain__card.is-revealed .pain__icon--ghost svg { animation: ghostFlicker 2.8s var(--ease) .2s 2; }

.pain__card:hover .pain__icon { transform: translateY(-3px); }

/* ==========================================================================
   8) كيف تعمل — شاشات المنصة
      حلّت محلّ الرسوم التجريدية، فحلّت هذه الحركات محلّ تموّج الدفع
      والسهم المنقّط.
   ========================================================================== */
/* سطر النجاح يصل متأخّراً قليلاً عن الشاشة: يقرأ الزائر الحقول أولاً ثم يرى
   نتيجتها — نفس تسلسل ما يحدث داخل المنصة */
@keyframes puiOk {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.how__viz.is-active .pui__ok { animation: puiOk .5s var(--ease-out) .45s both; }

/* هالة هادئة حول زر «إرسال الفاتورة» — الفعل الوحيد المطلوب في الشاشة الأولى */
@keyframes puiCta {
  0%, 100% { box-shadow: 0 0 0 0 rgb(207 169 107 / 0); }
  45%      { box-shadow: 0 0 0 6px rgb(207 169 107 / 0.16); }
}
.how__viz.is-active .pui__cta { animation: puiCta 2.6s var(--ease) .6s infinite; }

/* ==========================================================================
   9) القنوات — نبض العقدة المركزية
   ========================================================================== */
@keyframes corePulse {
  0%, 100% { transform: scale(1);    opacity: 0.16; }
  50%      { transform: scale(1.38); opacity: 0; }
}
.flow__pulse { animation: corePulse 3s var(--ease-out) infinite; }

/* ==========================================================================
   10) لمن فواتيري — شريطا المهن
   ========================================================================== */
/* الإزاحة نصف العرض = مجموعة كاملة (الـJS يضاعف الرقاقات)، لكن **اتجاهها منطقي
   لا فيزيائي**: في LTR يبدأ الصفّ ملتصقاً بالحافة اليسرى وفائضه إلى اليمين،
   فيزحف يساراً ليدخل الفائض. وفي RTL ينقلب كل شيء: الصفّ يلتصق بالحافة اليمنى
   وفائضه إلى اليسار، فزحفه يساراً كان يُبعده عن النافذة ويترك فراغاً يتّسع مع
   كل دورة — وهو سبب «انقطاع الشريط في منتصفه» بالعربية دون الإنجليزية. */
@keyframes marqueeMove {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--marquee-shift)); }
}
.marquee__row {
  --marquee-shift: -50%;
  animation: marqueeMove 42s linear infinite;
}
html[dir='rtl'] .marquee__row { --marquee-shift: 50%; }
.marquee__row:nth-child(2) { animation-duration: 52s; animation-direction: reverse; }
.marquee:hover .marquee__row { animation-play-state: paused; }

/* ==========================================================================
   11) المزايا — رسم متحرك لكل بطاقة
   ========================================================================== */

/* خريطة فلسطين: يُرسَم الحدّ ثم يُسكب اللون */
.feat__map { stroke-dasharray: 1; stroke-dashoffset: 1; }
.feat__card.is-revealed .feat__map { animation: drawUnderline 1.5s var(--ease-out) .15s forwards; }

/* المستندات تتراوح كمروحة */
.feat__doc { transform-box: fill-box; transform-origin: 50% 100%; }
.feat__card.is-revealed .feat__doc--2 { transform: rotate(-7deg)  translate(-7px, -4px); }
.feat__card.is-revealed .feat__doc--3 { transform: rotate(-14deg) translate(-14px, -8px); }
.feat__card.is-revealed .feat__seal   { animation: stampIn .7s var(--ease-spring) .85s forwards; }

/* الأعمدة تنمو من الصفر ثم يُرسم خط الاتجاه فوقها */
.feat__bar--1 { --h: 0.45; }
.feat__bar--2 { --h: 0.72; }
.feat__bar--3 { --h: 1; }
@keyframes barGrow { to { transform: scaleY(var(--h)); } }
.feat__card.is-revealed .feat__bar { animation: barGrow .85s var(--ease-out) forwards; }
.feat__card.is-revealed .feat__bar--2 { animation-delay: .12s; }
.feat__card.is-revealed .feat__bar--3 { animation-delay: .24s; }
.feat__card.is-revealed .feat__trend  { animation: drawUnderline .9s var(--ease-out) .6s forwards; }

/* ==========================================================================
   12) الأمان — عناوين الركائز تُكشف كأنها تُفكّ شيفرتها
      مسح بصري لا تبديل حروف: تبديل الحروف يكسر تشكيل العربية ويُقفز التخطيط.
   ========================================================================== */
@keyframes decodeWipeRtl { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes decodeWipeLtr { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.pillar__title { clip-path: inset(0 0 0 100%); }
[dir='ltr'] .pillar__title { clip-path: inset(0 100% 0 0); }

.pillar.is-revealed .pillar__title { animation: decodeWipeRtl .85s var(--ease-out) .25s forwards; }
[dir='ltr'] .pillar.is-revealed .pillar__title { animation-name: decodeWipeLtr; }

/* خط ضوئي ذهبي يمرّ مع المسح */
@keyframes scanLine {
  0%   { opacity: 0; transform: scaleY(0.4); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: scaleY(1); }
}
.pillar__icon { position: relative; }
.pillar.is-revealed .pillar__icon::after {
  content: '';
  position: absolute;
  inset-block: 6px;
  inset-inline-start: -6px;
  inline-size: 2px;
  background: var(--dark-gold);
  border-radius: 2px;
  animation: scanLine 1s var(--ease-out) .2s;
}

/* ==========================================================================
   13) الأرقام — الرقم يدور صاعداً داخل نافذته عند الظهور
   ========================================================================== */
@keyframes odoRoll {
  from { transform: translateY(0.42em); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.odo__item.is-revealed .odo__num { animation: odoRoll .7s var(--ease-out) both; }

/* ==========================================================================
   14) الشهادات — بلا حركة.
      حُذفت حلقة التقدّم الذهبية مع كاروسيل الاقتباسات: الشهادات صارت شبكة
      ثابتة من وجوه حقيقية، وحركتها الوحيدة ظهورها عبر [data-reveal].
   ========================================================================== */

/* ==========================================================================
   15) الدعم — نقاط «يكتب…» ونبض حالة الاتصال
   ========================================================================== */
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.45; }
  30%           { transform: translateY(-4px); opacity: 1; }
}
.chat__dots i { animation: typingDot 1.4s var(--ease) infinite; }
.chat__dots i:nth-child(2) { animation-delay: .18s; }
.chat__dots i:nth-child(3) { animation-delay: .36s; }

/* الفقاعتان تدخلان عند ظهور البطاقة */
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.chat .chat__bubble { opacity: 0; }
/* سؤال الزائر أولاً ثم ردّ الدعم — بنفس ترتيب المحادثة */
.chat.is-revealed .chat__bubble--me   { animation: bubbleIn .5s var(--ease-out) .25s forwards; }
.chat.is-revealed .chat__bubble--them { animation: bubbleIn .5s var(--ease-out) .8s forwards; }

/* ==========================================================================
   16) التطبيق — زر السحب ينبض بهدوء داخل الشاشة
   ========================================================================== */
@keyframes ctaPulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0    rgba(162, 128, 73, 0.45); }
  50%      { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(162, 128, 73, 0); }
}
.phone__cta { animation: ctaPulse 2.6s var(--ease-out) infinite; }

/* ==========================================================================
   17) احترام تفضيل تقليل الحركة — يُلغى كل ما سبق
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* العناصر التي تبدأ مخفية بانتظار حركة تصبح ظاهرة فوراً */
  [data-reveal],
  .invoice,
  .invoice__row,
  .invoice__total,
  .invoice__stamp,
  .invoice__arrive {
    opacity: 1 !important;
    transform: none !important;
  }

  .mark__stroke { stroke-dashoffset: 0; }
  .invoice__sweep { display: none; }
  .arc__flow { stroke-dasharray: 2 11; }

  /* عناوين الأمان تظهر كاملة بلا مسح */
  .pillar__title,
  [dir='ltr'] .pillar__title { clip-path: none; }
  .pillar.is-revealed .pillar__icon::after { display: none; }

  /* شريطا المهن يقفان ساكنين بدل الانزلاق اللانهائي */
  .marquee__row { animation: none !important; }

  /* فقاعات المحادثة تظهر كاملة بلا دخول متتابع */
  .chat .chat__bubble { opacity: 1 !important; transform: none !important; }

  /* شاشات المنصة تظهر كاملة بلا وصول متأخّر ولا هالة نابضة */
  .how__viz.is-active .pui__ok  { animation: none !important; opacity: 1; transform: none; }
  .how__viz.is-active .pui__cta { animation: none !important; }

  /* بطاقات الشهادات لا ترتفع عند المرور */
  .story:hover .story__photo { transform: none; }
  .story:hover .story__play  { transform: none; }

  /* زر السحب في لقطة التطبيق يسكن، والهاتف لا يميل */
  .phone__cta { animation: none !important; }
  .phone { transform: none !important; }
}