/*
=========================================================
الملف      : home.css (منقول من الرئيسيه/hero/hero.css)
القسم      : الواجهة الرئيسية

المسؤوليات:
✓ تصميم قسم الهيرو والكرة الأنيمية
✓ تخطيط الإحصائيات والأزرار

ممنوع:
✗ تصميم أقسام أخرى

أي تعديل بصري لهذا القسم يتم من داخل هذا الملف فقط.
=========================================================
*/
/* =================================================================================================
   ☰ توثيق احترافي — Professional Documentation
   =================================================================================================
   اسم الملف     : الرئيسيه.css
   وظيفة الملف   : قسم الهيرو الرئيسي: العنوان، الأزرار، الإحصائيات، والكرة التفاعلية وحركاتها.
   الأقسام داخله :
   - RESET + VARIABLES + BODY
   - HERO LAYOUT + BADGE + TITLE + DESCRIPTION + CTA
   - STATS + ORB (الكرة والحلقات والنواة والشعار)
   - ANIMATIONS + RTL + RESPONSIVE
   تاريخ التوثيق : 2026-06-05 (الخامس من يونيو 2026)
   ملاحظة        : لم يُحذف أو يُختصر أي سطر من الكود الأصلي — أُضيفت الشروحات فقط.
   ================================================================================================= */


/* =================================================================================================
   HERO CSS - نسخة مشروحة
   -------------------------------------------------------------------------------------------------
   هذا الملف يحتوي على شرح عربي للأقسام الرئيسية والكلاسات المهمة.
   الهدف منه تسهيل فهم التصميم وتطويره مستقبلاً.
================================================================================================= */

/* =====================================================
   hero.css — قسم الهيرو الرئيسي
   =====================================================
   العناصر:
   1. :root + * + body + .container  — متغيرات وريسيت
   2. .hero                          — تقسيم grid (نص | كرة)
   3. .hero-content                  — جانب النص الأيسر
   4. .badge / .badge-dot            — البادج العلوي المضيء
   5. .hero h1 / .white/.blue/.gold  — العنوان الكبير وألوانه
   6. .hero p                        — النص التوضيحي
   7. .hero-cta / .btn               — أزرار Create Account / Log in
   8. .stats / .stat-box             — بطاقات الأرقام (120+ / 99.9%...)
   9. .hero-visual / .orb-wrapper    — جانب الكرة الأيمن
   10. .orb-glow                     — توهج خلف الكرة
   11. .orb                          — الكرة الرئيسية
   12. .orb-inner-ring               — الحلقة الداخلية
   13. .orb-core                     — النواة المضيئة
   14. .orb-logo                     — اللوغو داخل الكرة
   15. .dot-ring / .dot-ring span    — النقطة الدوارة حول الكرة
   16. @keyframes                    — spin, pulse, floatGlow, logoFloat
   17. @media                        — responsive للجوال والتابلت
   ===================================================== */

/* Global reset, :root, html, body, .container — defined in base.css & variables.css */

/* ══════════════════════════════════
   HERO LAYOUT
══════════════════════════════════ */
/* تخطيط قسم الهيرو: تقسيم النص والكرة إلى عمودين */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 34px;
  min-height: calc(100vh - 110px);
  /* dvh — يمنع قفز ارتفاع الهيرو عند ظهور/اختفاء شريط عنوان المتصفح على
     الجوال (Android Chrome/iOS Safari)؛ يُتجاهل بأمان بلا دعم */
  min-height: calc(100dvh - 110px);
  padding: 42px 0 56px;
}

/* منطقة النصوص والعنوان الرئيسي */
.hero-content {
  max-width: 700px;
}

/* ── BADGE ── */
/* الشارة العلوية المضيئة لعرض رسالة أو ميزة مهمة */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid rgba(53,217,255,.24);
  background: rgba(0,255,255,.04);
  color: #74efff;
  box-shadow:
    inset 0 0 12px rgba(255,255,255,.03),
    0 0 18px rgba(53,217,255,.09);
  margin-bottom: 24px;
  font-size: 15px;
}

/* النقطة المضيئة داخل الشارة */
.badge-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cyan-2);
  box-shadow: 0 0 12px var(--cyan-2);
  flex-shrink: 0;
}

/* ── TITLE ── */
/* العنوان الرئيسي الكبير في الهيرو */
.hero h1 {
  font-size: 78px;
  line-height: 1.02;
  font-weight: 900;
  margin-bottom: 22px;
  letter-spacing: -1.4px;
}

.white { color: white; }
.blue  { color: #4ce3ff; }
.gold  { color: var(--gold); }

/* ── DESCRIPTION ── */
/* الوصف النصي أسفل العنوان */
.hero p {
  font-size: 20px;
  line-height: 1.8;
  color: var(--text-soft);
  max-width: 620px;
  margin-bottom: 30px;
}

/* ── CTA BUTTONS ── */
/* حاوية أزرار الإجراءات الرئيسية */
.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}

/* التنسيق الأساسي لجميع الأزرار */
.btn {
  padding: 13px 22px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.12);
  cursor: pointer;
  transition: .3s ease;
  min-width: 165px;
}

.btn:hover { transform: translateY(-2px); }

/* الزر الرئيسي المتوهج */
.btn-primary {
  background: linear-gradient(135deg, var(--cyan), var(--cyan-2));
  color: #00131e;
  box-shadow: 0 0 20px rgba(53,217,255,.28);
}

/* الزر الثانوي الداكن */
.btn-dark {
  background: rgba(255,255,255,.05);
  color: white;
  box-shadow: inset 0 0 10px rgba(255,255,255,.04);
}

/* ── STATS ── */
/* شبكة بطاقات الإحصائيات */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 16px;
}

/* بطاقة إحصائية منفردة */
.stat-box {
  padding: 20px 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025));
  border: 1px solid var(--border);
  box-shadow:
    inset 0 0 12px rgba(255,255,255,.03),
    0 10px 30px rgba(0,0,0,.18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.stat-box h3 {
  font-size: 24px;
  color: #86f3ff;
  margin-bottom: 8px;
}

.stat-box p {
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,.66);
  line-height: 1.5;
}

/* ══════════════════════════════════
   ORB (الكرة)
══════════════════════════════════ */
/* الحاوية البصرية للكرة التفاعلية */
.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* الحاوية الخارجية للكرة */
.orb-wrapper {
  width: 560px;
  height: 560px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* توهج خلفي متحرك خلف الكرة */
.orb-glow {
  position: absolute;
  width: 820px;
  height: 820px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(28,212,255,.18) 0%,
    rgba(28,212,255,.06) 35%,
    transparent 70%
  );
  filter: blur(34px);
  animation: floatGlow 5s ease-in-out infinite;
  will-change: transform;
}

/* الكرة الرئيسية */
.orb {
  position: relative;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(10,44,60,.85) 0%,
    rgba(4,16,28,.92) 52%,
    rgba(0,0,0,.98) 100%
  );
  border: 1px solid rgba(255,255,255,.05);
  box-shadow:
    0 0 90px rgba(0,225,255,.14),
    inset 0 0 90px rgba(0,0,0,.95),
    inset 0 0 30px rgba(53,217,255,.04);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.orb::before {
  content: "";
  position: absolute;
  width: 396px;
  height: 396px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.04);
  box-shadow: 0 0 20px rgba(0,255,255,.08);
}

.orb::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(53,217,255,.08), transparent 70%);
  filter: blur(10px);
}

/* الحلقة الداخلية داخل الكرة */
.orb-inner-ring {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 2px solid rgba(78,235,255,.16);
  box-shadow: 0 0 30px rgba(78,235,255,.10);
}

/* النواة المضيئة في مركز الكرة */
.orb-core {
  width: 205px;
  height: 205px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0,255,240,.16) 0%,
    rgba(0,188,212,.10) 45%,
    rgba(0,42,56,.28) 82%
  );
  box-shadow:
    0 0 45px rgba(0,255,240,.52),
    0 0 90px rgba(53,217,255,.20),
    inset 0 0 25px rgba(255,255,255,.08);
  animation: pulse 2.8s infinite ease-in-out;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  will-change: transform;
  z-index: 2;
}

.orb-core::before {
  content: "";
  position: absolute;
  width: 142px;
  height: 142px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 18px rgba(255,255,255,.06);
}

/* شعار المنصة داخل الكرة */
.orb-logo {
  position: relative;
  z-index: 3;
  width: 118px;
  height: 118px;
  object-fit: contain;
  mix-blend-mode: screen;
  filter:
    brightness(1.2) contrast(1.12)
    drop-shadow(0 0 10px rgba(0,255,240,.82))
    drop-shadow(0 0 28px rgba(0,255,240,.34));
  animation: logoFloat 3s ease-in-out infinite;
  will-change: transform;
}

/* الحلقة الدوارة التي تحمل النقاط المضيئة */
.dot-ring {
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  animation: spin 18s linear infinite;
  will-change: transform;
  z-index: 1;
}

.dot-ring span {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--cyan-2);
  border-radius: 50%;
  box-shadow: 0 0 20px var(--cyan-2);
  top: 50%;
  left: 50%;
  transform-origin: 0 -155px;
}

/* ══════════════════════════════════
   ANIMATIONS
══════════════════════════════════ */
/* @keyframes spin/pulse/floatGlow/logoFloat: مُعرَّفة مركزياً في
   modules/shared/animations.css (يُحمَّل بعد هذا الملف فيُلغي أي نسخة محلية
   هنا بالكامل — كانتا متطابقتين حرفياً، لذا حذف هذه النسخة المكرَّرة هنا
   لا يغيّر أي حركة أو مظهر إطلاقاً، فقط يزيل كوداً ميتاً كان يُستبدَل دوماً). */

/* ── RTL ── */
html[dir="rtl"] /* منطقة النصوص والعنوان الرئيسي */
.hero-content { text-align: right; }

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
/* كل قواعد الجوال/التابلت (@media) انتقلت إلى modules/home/home.mobile.css
   (ملف مستقل، يُحمَّل بعد modules/shared/mobile.css). كانت هذه القواعد هنا
   نسخة مطابقة حرفياً لما هو موجود أصلاً في modules/shared/mobile.css (الذي
   يُحمَّل بعد هذا الملف فيفوز دوماً) — أي أنها كانت كوداً ميتاً متجاوَزاً
   بالكامل؛ حُذفت من هنا بدل نقلها لتفادي أي تكرار، والقيم الفائزة فعلياً
   (المنقولة إلى home.mobile.css) هي نفسها بلا أي تغيير. */