/*
=========================================================
الملف      : animations.css
القسم      : الحركات المشتركة

المسؤوليات:
✓ @keyframes المشتركة بين الأقسام
✓ تأثيرات الدخول والحركة

ممنوع:
✗ تصميم قسم بعينه (يذهب لملف القسم)

يُحمَّل بعد ملفات الأقسام وقبل mobile.css.
=========================================================
*/
/* =================================================================================================
   ☰ توثيق احترافي — Professional Documentation
   =================================================================================================
   اسم الملف     : انيميشن.css
   وظيفة الملف   : تجميع كل حركات (Animations) الموقع ودعم اتجاه RTL.
   الأقسام داخله :
   - مجموعة @keyframes (spin / pulse / floatGlow / logoFloat / logoGlow)
   - قواعد دعم اللغة العربية RTL
   تاريخ التوثيق : 2026-06-05 (الخامس من يونيو 2026)
   ملاحظة        : لم يُحذف أو يُختصر أي سطر من الكود الأصلي — أُضيفت الشروحات فقط.
   ================================================================================================= */


/* animations.css — كل الأنيميشنات
 * @keyframes spin      → دوران حلقات الكرة
 * @keyframes pulse     → نبض الكرة المضيئة
 * @keyframes floatGlow → طفو وتوهج الكرة
 * @keyframes logoFloat → حركة اللوغو
 * @keyframes logoGlow  → توهج اللوغو
 */

/* =================================================================================================
   ANIMATION — spin (الدوران)  |  دوران مستمر 360°
   - تُستخدم لتدوير حلقات الكرة والنقاط حول مركزها بشكل لا نهائي.
   - from: تبدأ من الزاوية 0 درجة.
   - to: تصل إلى 360 درجة لإكمال دورة كاملة.
================================================================================================= */
      @keyframes spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

/* =================================================================================================
   ANIMATION — pulse (النبض)  |  نبض النواة المضيئة
   - تكبّر العنصر قليلاً ثم تعيده، مع تغيّر شدة التوهج (box-shadow).
   - 0% و 100%: الحجم الطبيعي وتوهج هادئ.
   - 50%: تكبير 1.08 مع توهج أقوى لإيحاء الحياة والطاقة.
================================================================================================= */
      @keyframes pulse {
        0%,
        100% {
          transform: scale(1);
          box-shadow:
            0 0 45px rgba(0, 255, 240, 0.52),
            0 0 90px rgba(53, 217, 255, 0.2),
            inset 0 0 25px rgba(255, 255, 255, 0.08);
        }
        50% {
          transform: scale(1.08);
          box-shadow:
            0 0 62px rgba(0, 255, 240, 0.8),
            0 0 115px rgba(53, 217, 255, 0.28),
            inset 0 0 30px rgba(255, 255, 255, 0.12);
        }
      }

/* =================================================================================================
   ANIMATION — floatGlow (طفو التوهج)  |  حركة طفو وتوهج خلفي
   - تجعل هالة الضوء خلف الكرة تتمدد وتخفت بهدوء.
   - 50%: تكبير بسيط (1.05) مع تقليل الشفافية إلى 0.85.
================================================================================================= */
      @keyframes floatGlow {
        0%,
        100% {
          transform: scale(1);
          opacity: 1;
        }
        50% {
          transform: scale(1.05);
          opacity: 0.85;
        }
      }

/* =================================================================================================
   ANIMATION — logoFloat (طفو الشعار)  |  حركة عائمة للّوغو
   - ترفع شعار المنصة للأعلى قليلاً وتكبّره بشكل طفيف ثم يعود.
   - 50%: scale(1.04) مع رفع 4px للأعلى.
================================================================================================= */
      @keyframes logoFloat {
        0%,
        100% {
          transform: scale(1) translateY(0);
        }
        50% {
          transform: scale(1.04) translateY(-4px);
        }
      }

/* =================================================================================================
   ANIMATION — logoGlow (توهج الشعار)  |  تأرجح إضاءة اللوغو
   - تزيد سطوع وتباين الشعار وتكثّف ظلال التوهج (drop-shadow) ذهاباً وإياباً.
   - تُستعمل عادةً مع alternate لتنبض الإضاءة بنعومة.
================================================================================================= */
      @keyframes logoGlow {
        from {
          filter: brightness(1.18) contrast(1.1)
            drop-shadow(0 0 8px rgba(0, 255, 240, 0.75))
            drop-shadow(0 0 22px rgba(0, 255, 240, 0.32));
        }
        to {
          filter: brightness(1.22) contrast(1.12)
            drop-shadow(0 0 14px rgba(0, 255, 240, 0.95))
            drop-shadow(0 0 32px rgba(0, 255, 240, 0.44));
        }
      }

/* =================================================================================================
   RTL SUPPORT — دعم اللغة العربية  |  تفعيل الاتجاه من اليمين لليسار
   - عند ضبط dir="rtl" يتحول اتجاه الصفحة بالكامل إلى rtl.
================================================================================================= */
      html[dir="rtl"] body {
        direction: rtl;
      }

/* RTL: محاذاة نص الشعار والهيرو وعناوين الأقسام إلى اليمين */
      html[dir="rtl"] .brand-text,
      html[dir="rtl"] .hero-content,
      html[dir="rtl"] .section-header {
        text-align: right;
      }

/* RTL: محاذاة حقول الإدخال إلى اليمين */
      html[dir="rtl"] .input-group {
        text-align: right;
      }

/* =================================================================================================
   REDUCED MOTION — دعم تفضيل تقليل الحركة (إتاحة/Accessibility)
   -------------------------------------------------------------------------------------------------
   عند تفعيل المستخدم لخيار "تقليل الحركة" على مستوى نظام التشغيل، تُختصر كل
   الحركات والانتقالات إلى ما يقارب الصفر بدل إلغائها بالكامل — يبقى العنصر
   في حالته النهائية الصحيحة فوراً دون أي حركة مزعجة. لا يؤثر إطلاقاً على أي
   مستخدم لم يفعّل هذا الخيار — نفس الحركات تماماً كما هي بلا أي تغيير.
================================================================================================= */
@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;
  }
}