/* =====================================================================
   مرصدك — animations.css
   الحركات المسمّاة + أدوات الظهور عند التمرير.
   كل ما هنا زخرفي بحت: تعطيله لا يكسر أي وظيفة.
   القسم الأخير يعطّل الحركة بالكامل عند prefers-reduced-motion: reduce.
   ===================================================================== */

/* =====================================================================
   1) الإطارات المفتاحية
   ===================================================================== */

/* نبض النقطة الحمراء — الأخبار العاجلة والفعاليات الجارية */
@keyframes pulse-dot{
  0%{box-shadow:0 0 0 0 rgba(214,69,80,.55);transform:scale(1)}
  60%{box-shadow:0 0 0 9px rgba(214,69,80,0);transform:scale(1.06)}
  100%{box-shadow:0 0 0 0 rgba(214,69,80,0);transform:scale(1)}
}

/* النبض نفسه بهالة بيضاء — للنقاط فوق الخلفيات الحمراء/الداكنة */
@keyframes pulse-dot-light{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.7);transform:scale(1)}
  60%{box-shadow:0 0 0 8px rgba(255,255,255,0);transform:scale(1.06)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0);transform:scale(1)}
}

/* تمرير شريط الأخبار اللانهائي — المسار يحوي نسختين متطابقتين */
@keyframes ticker-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* طفو ناعم لكرات التوهج في الهيرو */
@keyframes float{
  0%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(18px,-26px,0) scale(1.05)}
  66%{transform:translate3d(-14px,16px,0) scale(.97)}
  100%{transform:translate3d(0,0,0) scale(1)}
}

/* لمعة الهياكل العظمية */
@keyframes shimmer{
  from{transform:translateX(-100%)}
  to{transform:translateX(100%)}
}

/* لمعة معكوسة للاتجاه RTL */
@keyframes shimmer-rtl{
  from{transform:translateX(100%)}
  to{transform:translateX(-100%)}
}

/* ظهور مع صعود */
@keyframes fade-up{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:translateY(0)}
}

/* ظهور بسيط */
@keyframes fade-in{
  from{opacity:0}
  to{opacity:1}
}

/* اختفاء */
@keyframes fade-out{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(-8px)}
}

/* ظهور بتكبير */
@keyframes scale-in{
  from{opacity:0;transform:scale(.94)}
  to{opacity:1;transform:scale(1)}
}

/* انزلاق من جهة البداية (اليمين في RTL) */
@keyframes slide-in-start{
  from{opacity:0;transform:translateX(28px)}
  to{opacity:1;transform:translateX(0)}
}

/* انزلاق من جهة النهاية (اليسار في RTL) */
@keyframes slide-in-end{
  from{opacity:0;transform:translateX(-28px)}
  to{opacity:1;transform:translateX(0)}
}

/* دوران — دوّارات التحميل */
@keyframes spin{
  to{transform:rotate(360deg)}
}

/* تحريك موضع التدرّج — النصوص والأزرار المتدرّجة */
@keyframes gradient-shift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* اهتزاز خفيف — أخطاء النماذج */
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}

/* ارتداد خفيف للأعلى — تلميحات التمرير */
@keyframes bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}

/* حلقة متمدّدة حول دبابيس الخريطة الجارية */
@keyframes ping{
  0%{transform:scale(.85);opacity:.7}
  75%,100%{transform:scale(2.1);opacity:0}
}

/* رسم خط سفلي متدرّج */
@keyframes underline-grow{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}

/* =====================================================================
   2) أدوات الظهور عند التمرير (.reveal)
   يضيف IntersectionObserver في assets/js/reveal.js الصنف .is-visible
   --delay : تأخير متدرّج بالثواني أو بالمللي ثانية، مثال: style="--delay:.12s"
   ===================================================================== */

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity var(--dur-4) var(--ease),
    transform var(--dur-4) var(--ease);
  transition-delay:var(--delay,0s);
  will-change:opacity,transform;
}

.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
  will-change:auto;
}

/* اتجاهات بديلة للظهور */
.reveal--start{transform:translateX(30px)}          /* يدخل من اليمين في RTL */
.reveal--end{transform:translateX(-30px)}           /* يدخل من اليسار في RTL */
.reveal--scale{transform:scale(.94)}
.reveal--fade{transform:none}
.reveal--down{transform:translateY(-24px)}

.reveal--start.is-visible,
.reveal--end.is-visible{transform:translateX(0)}

.reveal--scale.is-visible{transform:scale(1)}

.reveal--down.is-visible{transform:translateY(0)}

/* تأخير متدرّج تلقائي لأبناء الحاوية — لا حاجة لكتابة --delay يدوياً */
.reveal-stagger > *{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity var(--dur-4) var(--ease),
    transform var(--dur-4) var(--ease);
}

.reveal-stagger.is-visible > *{opacity:1;transform:translateY(0)}

.reveal-stagger.is-visible > *:nth-child(1){transition-delay:0s}
.reveal-stagger.is-visible > *:nth-child(2){transition-delay:.07s}
.reveal-stagger.is-visible > *:nth-child(3){transition-delay:.14s}
.reveal-stagger.is-visible > *:nth-child(4){transition-delay:.21s}
.reveal-stagger.is-visible > *:nth-child(5){transition-delay:.28s}
.reveal-stagger.is-visible > *:nth-child(6){transition-delay:.35s}
.reveal-stagger.is-visible > *:nth-child(7){transition-delay:.42s}
.reveal-stagger.is-visible > *:nth-child(8){transition-delay:.49s}
.reveal-stagger.is-visible > *:nth-child(9){transition-delay:.56s}
.reveal-stagger.is-visible > *:nth-child(n+10){transition-delay:.63s}

/* =====================================================================
   3) أصناف حركة جاهزة للاستعمال المباشر
   ===================================================================== */

.anim-fade-in{animation:fade-in var(--dur-4) var(--ease) both;animation-delay:var(--delay,0s)}
.anim-fade-up{animation:fade-up .55s var(--ease) both;animation-delay:var(--delay,0s)}
.anim-scale-in{animation:scale-in .42s var(--ease) both;animation-delay:var(--delay,0s)}
.anim-slide-start{animation:slide-in-start .45s var(--ease) both;animation-delay:var(--delay,0s)}
.anim-slide-end{animation:slide-in-end .45s var(--ease) both;animation-delay:var(--delay,0s)}
.anim-shake{animation:shake .5s var(--ease-in-out) both}
.anim-bob{animation:bob 2.6s var(--ease-in-out) infinite}
.anim-spin{animation:spin .8s linear infinite}
.anim-float{animation:float 15s var(--ease-in-out) infinite}
.anim-gradient{
  background-size:200% 200%;
  animation:gradient-shift 8s var(--ease-in-out) infinite;
}

/* دوّار تحميل مستقل */
.spinner{
  display:inline-block;
  inline-size:22px;
  block-size:22px;
  border:2.5px solid var(--violet-200);
  border-block-start-color:var(--violet-500);
  border-radius:50%;
  animation:spin .75s linear infinite;
  flex-shrink:0;
}

.spinner--sm{inline-size:16px;block-size:16px;border-width:2px}
.spinner--lg{inline-size:34px;block-size:34px;border-width:3px}
.spinner--white{border-color:rgba(255,255,255,.3);border-block-start-color:#fff}

/* طبقة تحميل فوق حاوية */
.is-busy{position:relative;pointer-events:none}

.is-busy::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:var(--z-raised);
  background:rgba(250,247,241,.62);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  border-radius:inherit;
  animation:fade-in var(--dur-2) var(--ease) both;
}

/* حلقة نابضة حول عنصر (دبوس فعالية جارية) */
.ping{position:relative}

.ping::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:currentColor;
  opacity:.5;
  animation:ping 1.9s var(--ease) infinite;
  pointer-events:none;
  z-index:-1;
}

/* عدّاد أرقام متحرّك — يحدّث JS محتوى العنصر؛ هنا فقط استقرار العرض */
.counter{
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
  display:inline-block;
}

/* تسليط الضوء على عنصر بعد انتقال إليه عبر hash */
:target{animation:fade-in .5s var(--ease) both}

/* =====================================================================
   4) احترام تفضيل تقليل الحركة — إلزامي
   يوقف كل ما سبق: الحركات، الانتقالات، والتمرير الناعم.
   ===================================================================== */

@media (prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0ms !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }

  /* عناصر الظهور تظهر فوراً في مكانها النهائي */
  .reveal,
  .reveal--start,
  .reveal--end,
  .reveal--scale,
  .reveal--fade,
  .reveal--down,
  .reveal-stagger > *{
    opacity:1 !important;
    transform:none !important;
  }

  /* إيقاف الحركات الدائمة تماماً */
  .ticker__track,
  .hero__orb,
  .anim-float,
  .anim-bob,
  .anim-gradient,
  .ping::before,
  .skeleton::after,
  .hero__title em{
    animation:none !important;
  }

  /* النقطة النابضة تبقى ظاهرة بلا نبض */
  .badge--live::before,
  .ticker__label::before,
  .timeline__item.is-now::before{
    animation:none !important;
    box-shadow:none !important;
  }

  /* الدوّارات تبقى دائرة ببطء لأنها تدلّ على انتظار فعلي */
  .spinner,
  .anim-spin,
  .btn.is-loading::after{
    animation:spin 1.4s linear infinite !important;
    animation-duration:1.4s !important;
  }

  /* إلغاء الرفع عند التحويم */
  .card--hover:hover,
  .btn:hover,
  .chip:hover,
  .step:hover,
  .tool-card:hover,
  .gallery__item:hover,
  .share-btn:hover,
  .pagination__link:hover{
    transform:none !important;
  }

  .card:hover .card__media img,
  .gallery__item:hover img,
  .logo-strip a:hover img{transform:none !important}
}