/* ECS — motion
   الحركة: هادئة، كلها CSS، وتتوقف كاملة مع prefers-reduced-motion.
   هذا الملف جزء من نظام الأنماط: الترتيب في src/modules/setup.php
   هو ترتيب التتالي، فلا يُعاد ترتيبه إلا بعلم. */
/* ============================================================
   40 — MOTION  (حركة هادئة، كلها CSS، وتتوقف كاملة مع prefers-reduced-motion)
   المبدأ: الحركة تشرح البنية ولا تلفت النظر إلى نفسها.
   المدد ≤ .6s، والمنحنى واحد، ولا شيء يتحرك بعد أول ظهور.
   ============================================================ */
:root{
  --ecs-ease: cubic-bezier(.22,1,.36,1);
  --ecs-t-fast: .22s;
  --ecs-t-mid: .42s;
}

/* 40.1 — الهيرو عند التحميل: العنوان ثم المقدمة ثم الأزرار */
.ecs-hero h1,
.ecs-hero .ecs-lede,
.ecs-hero .ecs-shero__cta,
.ecs-hero .ecs-tag{
  animation: ecsHeroIn .62s var(--ecs-ease) both;
}
.ecs-hero .ecs-tag{ animation-delay:.02s }
.ecs-hero h1{ animation-delay:.08s }
.ecs-hero .ecs-lede{ animation-delay:.16s }
.ecs-hero .ecs-shero__cta{ animation-delay:.24s }
@keyframes ecsHeroIn{
  from{ opacity:0; transform:translateY(16px) }
  to{ opacity:1; transform:none }
}

/* 40.2 — علامة ECS الخلفية تتنفّس ببطء شديد */
.ecs-hero::before,
.ecs-panel::after{
  animation: ecsDrift 26s ease-in-out infinite alternate;
}
@keyframes ecsDrift{
  from{ transform:translate3d(0,0,0) scale(1) }
  to{ transform:translate3d(0,-14px,0) scale(1.03) }
}

/* 40.3 — خط العنوان الفرعي يُرسم عند الظهور */
.ecs-eyebrow .elementor-heading-title{ position:relative }
.ecs-eyebrow.is-in .elementor-heading-title::after{
  content:""; position:absolute; inset-inline-start:0; bottom:-2px; height:2px;
  width:100%; background: currentColor; transform-origin: inline-start;
  animation: ecsRule .5s var(--ecs-ease) both;
}
@keyframes ecsRule{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

/* 40.4 — البطاقات: ارتفاع محسوس عند المرور، والسهم يتقدّم */
.ecs-card,
.elementor-widget-icon-box.ecs-doc .elementor-icon-box-wrapper,
.elementor-widget-icon-box.ecs-ccard .elementor-icon-box-wrapper,
.ecs-acard{
  transition: transform var(--ecs-t-mid) var(--ecs-ease),
              box-shadow var(--ecs-t-mid) var(--ecs-ease),
              border-color var(--ecs-t-fast) ease;
  will-change: transform;
}
.ecs-card:hover,
.elementor-widget-icon-box.ecs-doc:hover .elementor-icon-box-wrapper,
.elementor-widget-icon-box.ecs-ccard:hover .elementor-icon-box-wrapper,
.ecs-acard:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(15,29,44,.10);
}
.ecs-card .ecs-more,
.ecs-acard__go{ transition: gap var(--ecs-t-fast) ease, letter-spacing var(--ecs-t-fast) ease }
.ecs-card:hover .ecs-more,
.ecs-acard:hover .ecs-acard__go{ letter-spacing:.01em }

/* 40.5 — الهيدر يرقّ بعد التمرير */
body.ecs-stuck .ekit-template-content-header,
body.ecs-stuck .ecs-head{
  box-shadow: 0 6px 24px rgba(15,29,44,.10);
  transition: box-shadow var(--ecs-t-mid) var(--ecs-ease);
}
body.ecs-stuck .ekit-template-content-header img{
  transform: scale(.94);
  transition: transform var(--ecs-t-mid) var(--ecs-ease);
}

/* 40.6 — الأرقام تُعدّ عند أول ظهور */
.ecs-stat__n.is-counting{ font-variant-numeric: tabular-nums }

/* 40.7 — صفوف الجداول تظهر بالتتابع */
.ecs-table.is-in tbody tr,
.is-in .ecs-table tbody tr{ animation: ecsRowIn .4s var(--ecs-ease) both }
.ecs-table.is-in tbody tr:nth-child(1), .is-in .ecs-table tbody tr:nth-child(1){ animation-delay:.02s }
.ecs-table.is-in tbody tr:nth-child(2), .is-in .ecs-table tbody tr:nth-child(2){ animation-delay:.06s }
.ecs-table.is-in tbody tr:nth-child(3), .is-in .ecs-table tbody tr:nth-child(3){ animation-delay:.10s }
.ecs-table.is-in tbody tr:nth-child(4), .is-in .ecs-table tbody tr:nth-child(4){ animation-delay:.14s }
.ecs-table.is-in tbody tr:nth-child(5), .is-in .ecs-table tbody tr:nth-child(5){ animation-delay:.18s }
.ecs-table.is-in tbody tr:nth-child(n+6), .is-in .ecs-table tbody tr:nth-child(n+6){ animation-delay:.22s }
@keyframes ecsRowIn{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }

/* 40.8 — الأسئلة: فتح ناعم */
.ecs-qa details[open] > div.a{ animation: ecsAnswer .32s var(--ecs-ease) both }
@keyframes ecsAnswer{ from{ opacity:0; transform:translateY(-4px) } to{ opacity:1; transform:none } }

/* 40.9 — شعارات العملاء تدخل بتدرّج وتتضح عند المرور */
.ecs-mark img{ transition: filter var(--ecs-t-mid) ease, transform var(--ecs-t-mid) var(--ecs-ease) }
.ecs-mark:hover img{ transform: translateY(-2px) }

/* 40.10 — احترام تقليل الحركة: كل ما سبق يتوقف */
@media (prefers-reduced-motion: reduce){
  .ecs-hero h1, .ecs-hero .ecs-lede, .ecs-hero .ecs-shero__cta, .ecs-hero .ecs-tag,
  .ecs-hero::before, .ecs-panel::after,
  .ecs-eyebrow.is-in .elementor-heading-title::after,
  .ecs-table.is-in tbody tr, .is-in .ecs-table tbody tr,
  .ecs-qa details[open] > div.a{ animation:none !important }
  .ecs-card, .ecs-acard, .ecs-mark img,
  .elementor-widget-icon-box.ecs-doc .elementor-icon-box-wrapper,
  .elementor-widget-icon-box.ecs-ccard .elementor-icon-box-wrapper{ transition:none !important }
  .ecs-card:hover, .ecs-acard:hover{ transform:none !important; box-shadow:none !important }
}