/* ==========================================================================
   Animations — حركة مقتضبة جدًا: ظهور ناعم عند التمرير فقط.
   ========================================================================== */
[data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity var(--t-slow) var(--ease-out),
             transform var(--t-slow) var(--ease-out);
}
[data-reveal="fade"]{transform:none}
[data-reveal="right"]{transform:translateX(22px)}
[data-reveal="left"]{transform:translateX(-22px)}

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

/* تتابع خفيف داخل المجموعات */
[data-reveal-group] > [data-reveal]{transition-delay:calc(var(--reveal-i,0) * 70ms)}

/* دخول الهيرو بلا انتظار المراقب */
.hero__body > *{animation:rise var(--t-slow) var(--ease-out) backwards}
.hero__body > *:nth-child(1){animation-delay:40ms}
.hero__body > *:nth-child(2){animation-delay:100ms}
.hero__body > *:nth-child(3){animation-delay:160ms}
.hero__body > *:nth-child(4){animation-delay:220ms}
.hero__body > *:nth-child(5){animation-delay:280ms}
.hero__media{animation:rise 700ms var(--ease-out) 160ms backwards}

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

/* نبضة عقدة الخط الزمني في «كيف نعمل» — مرة واحدة عند الظهور */
@keyframes rail-draw{
  from{transform:scaleY(0)}
  to{transform:scaleY(1)}
}

@keyframes node-pop{
  from{opacity:0;transform:scale(.4)}
  to{opacity:1;transform:none}
}

@keyframes node-ping{
  from{opacity:.5;transform:scale(.75)}
  to{opacity:0;transform:scale(1.4)}
}

@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
  .hero__body > *,.hero__media{animation:none !important}
  .svc:hover{transform:none}
}