/*
=========================================================
الملف      : home.mobile.css
القسم      : الواجهة الرئيسية (Hero) — الجوال فقط

المسؤوليات:
✓ كل قواعد الجوال الخاصة بقسم Hero (.hero/.badge/.hero-cta/
  .stats/.orb*) فقط
✓ كل قاعدة هنا داخل @media(max-width:...) — بلا استثناء

ممنوع:
✗ أي قاعدة Desktop (بدون @media)
✗ تصميم أقسام أخرى غير Hero (Features/About/Contact/Auth)

مصدر هذا الملف: نُقل بالكامل من modules/shared/mobile.css. القواعد
المشتركة مع أقسام أخرى (.btn العام المشترك مع Navbar، #home/#features/
#about/#contact{scroll-margin-top}، .section-header) بقيت في مكانها
داخل mobile.css كما هي، ولم تُنقل هنا لأنها ليست حصرية لـ Hero.

home.css كان يحتوي أيضاً نسخة مكرَّرة بالكامل من هذه القواعد نفسها
(@1200px و@768px) — كانت متجاوَزة تماماً (dead code) لأن mobile.css
يُحمَّل بعدها بنفس القيم حرفياً؛ حُذفت من home.css عند هذا الفصل بدل
نقلها هنا لتفادي أي تكرار (القيم الفائزة فعلياً هي المنقولة هنا من
mobile.css، وهي نفسها).

ترتيب الكتل هنا مطابق **حرفياً** لترتيبها الأصلي داخل mobile.css. لا
تُعِد ترتيب الكتل أدناه.
=========================================================
*/

/* =================================================================================================
   TABLET (≤1200px) — Hero
   ================================================================================================= */
@media (max-width: 1200px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding-top: 24px;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero p {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-cta {
    justify-content: center;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero h1 {
    font-size: 58px;
  }
}

/* =================================================================================================
   MOBILE (≤768px) — Orb + Hero Title/Description/Stats
   ================================================================================================= */
@media (max-width: 768px) {
  .orb-wrapper {
    width: 350px;
    height: 350px;
    /* تموضع الدائرة رأسياً فقط — .orb-wrapper هو العنصر الذي يرسم مجموعة
       الدائرة كاملة (.orb-glow + .orb وكل ما بداخلها معاً، ممركزة عبر
       flex)، وليس .hero-visual (حاوية Layout عامة قد تحوي عناصر أخرى
       مستقبلاً — لم تُمس هنا إطلاقاً). لم يكن هذا العنصر يحمل أي margin
       من قبل. القيمة مبنية على متغيّرين موجودين فعلاً (لا رقم عشوائي):
       --mh-height (ارتفاع الهيدر الفعلي، navbar.mobile.css) + --mh-pad
       (وحدة التباعد القياسية، نفس الملف) = 70px + 16px = 86px. */
    margin-top: calc(var(--mh-height) + var(--mh-pad));
  }

  .orb {
    width: 320px;
    height: 320px;
  }

  .orb::before {
    width: 250px;
    height: 250px;
  }

  .orb-inner-ring {
    width: 220px;
    height: 220px;
  }

  .dot-ring {
    width: 240px;
    height: 240px;
  }

  .dot-ring span {
    transform-origin: 0 -110px;
    width: 10px;
    height: 10px;
  }

  .orb-core {
    width: 130px;
    height: 130px;
  }

  .orb-core::before {
    width: 86px;
    height: 86px;
  }

  .orb-logo {
    width: 76px;
    height: 76px;
  }

  /* ══════════════════════════════════
     ORB — مطابقة تصميم شعار الـ Navbar الجديد (نفس الطبقات/الألوان/التوهج/
     الحلقة الواحدة الخارجية والداخلية/نقطة واحدة تدور)، بحجم أكبر فقط.
     الألوان rgba(24,214,255,…) هي --mh-accent المستخدم في navbar.mobile.css
     (نفس عائلة --cyan-2 اللونية أصلاً في هذه الكرة) — لا ألوان جديدة، فقط
     إعادة معايرة الشدة/الطبقات لتهدئة التصميم ليطابق .logo-icon. لا تغيير
     على أي width/height/position هنا. ══════════════════════════════════ */
  /* نصف قطر دوران النقطة الفعلي مضبوط عبر transform العنصر الأول
     (rotate(0deg) translateY(-155px)) في navbar.html نفسه — ثابت في
     الـ HTML بلا تغيير (ممنوع لمس HTML)، مصمَّم أصلاً لقطر الكرة الكامل
     على سطح المكتب (500px). "scale" هنا (خاصية CSS مستقلة عن transform،
     لا تتعارض مع "animation: spin" أعلاه التي تستهدف transform فقط) تقلّص
     تلك الـ 155px تناسبياً لتطابق نصف قطر الحلقة الخارجية الفعلي عند هذا
     العرض (.orb::before = 250px هنا → 125px نصف قطر → 125/155 ≈ 0.806)،
     بدل أن تبقى ثابتة على 155px وتفيض خارج .orb (overflow:hidden) على
     الأعراض الأضيق — هذا تحديداً سبب أي اهتزاز/قصّ كانت النقطة تعانيه. */
  .dot-ring {
    animation: spin 10s linear infinite;
    scale: 0.806;
  }

  .dot-ring span:not(:first-child) {
    display: none;
  }

  .dot-ring span {
    /* أوضح قليلاً (طلب صريح) — لون أشد تشبعاً + توهج أعرض، بلا تغيير الحجم */
    background: rgba(24, 214, 255, 1);
    box-shadow: 0 0 12px 3px rgba(24, 214, 255, 0.7);
    /* scale الأب (0.806) يُصغّر معه حجم النقطة المرسومة نفسها كأثر جانبي —
       عكسه هنا (1/0.806) يبقي حجم النقطة نفسه (width/height) كما كان تماماً
       بلا تغيير فعلي، دون التأثير على موضعها/نصف قطرها (translateY الموروث
       من الوالد يبقى محكوماً بـ scale الوالد وحده، فلا يتعارض). */
    scale: 1.241;
  }

  .orb {
    box-shadow:
      0 0 26px rgba(24, 214, 255, 0.22),
      inset 0 0 16px rgba(24, 214, 255, 0.06);
  }

  .orb::before {
    border-color: rgba(24, 214, 255, 0.6);
    box-shadow: 0 0 6px rgba(24, 214, 255, 0.3);
  }

  .orb::after {
    content: none;
  }

  .orb-inner-ring {
    border-color: rgba(24, 214, 255, 0.22);
    box-shadow: none;
  }

  .orb-core {
    background: rgba(24, 214, 255, 0.05);
    box-shadow: none;
    animation: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .orb-core::before {
    opacity: 0.3;
  }

  .orb-logo {
    animation: none;
    filter: drop-shadow(0 0 6px rgba(24, 214, 255, 0.35));
    /* mix-blend-mode:screen (من home.css سطح المكتب) يبقى مفعَّلاً هنا افتراضياً
       لأنه لم يُلغَ سابقاً — يمزج الشعار مع كل ما تحته (الحلقات/التوهج المُعاد
       ضبطها للتو)، وقد ينتج ألواناً غير متوقعة (تحول أصفر/باهت) حسب الطبقات
       الجديدة. تحييده هنا يضمن بقاء لون الشعار Cyan كما هو تماماً بلا تفاعل. */
    mix-blend-mode: normal;
  }

  .hero h1 {
    font-size: 40px;
  }

  .hero p {
    font-size: 17px;
  }

  .stats {
    grid-template-columns: 1fr;
  }
}

/* =================================================================================================
   MOBILE APP POLISH (≤480px) — Hero
   ================================================================================================= */
@media (max-width: 480px) {
  .hero-cta {
    gap: 10px;
  }

  .hero-cta .btn {
    flex: 1;
    min-width: 140px;
  }

  /* ── HERO TYPOGRAPHY + SPACING ── */
  .hero {
    padding: 18px 0 24px;
    gap: 20px;
  }

  .badge {
    padding: 8px 14px;
    font-size: 12.5px;
    margin-bottom: 16px;
  }

  .hero h1 {
    font-size: 30px;
    line-height: 1.16;
    letter-spacing: -0.4px;
    margin-bottom: 12px;
  }

  .hero p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 18px;
  }

  .hero-cta {
    margin-bottom: 20px;
  }

  /* ── STATS/CARDS — شبكة عمودين بدل عمود واحد لتقليل الارتفاع الكلي،
     وتقريب الوصف من الرقم مباشرة ── */
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .stat-box {
    padding: 12px 10px;
    border-radius: 16px;
  }

  .stat-box h3 {
    font-size: 19px;
    margin-bottom: 3px;
  }

  .stat-box p {
    font-size: 11px;
    line-height: 1.3;
  }

  /* ── ORB ILLUSTRATION — ~20% أصغر من قيم 768px، تبقى Responsive ومحصورة
     داخل .hero-visual ── */
  .orb-glow {
    /* نسبي لعرض الشاشة (لا قيمة ثابتة) — يضمن عدم خروج التوهج خارج
       الشاشة على أي عرض بين 320-480px */
    width: min(85vw, 380px);
    height: min(85vw, 380px);
    filter: blur(20px);
  }

  .orb-wrapper {
    width: 280px;
    height: 280px;
  }

  .orb {
    width: 256px;
    height: 256px;
  }

  .orb::before {
    width: 200px;
    height: 200px;
  }

  .orb-inner-ring {
    width: 176px;
    height: 176px;
  }

  .dot-ring {
    width: 192px;
    height: 192px;
  }

  .dot-ring span {
    width: 8px;
    height: 8px;
    transform-origin: 0 -96px;
  }

  .orb-core {
    width: 104px;
    height: 104px;
  }

  .orb-core::before {
    width: 68px;
    height: 68px;
  }

  .orb-logo {
    width: 60px;
    height: 60px;
  }

  /* ── PERFORMANCE — تخفيف (لا إزالة) لـ blur/box-shadow الثقيلة على
     الجوال فقط؛ رسوم GPU أخف = تمرير أسلس على أجهزة متوسطة ── */
  .stat-box {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
  }

  .orb {
    box-shadow:
      0 0 26px rgba(24, 214, 255, 0.22),
      inset 0 0 16px rgba(24, 214, 255, 0.06);
  }
}

/* =================================================================================================
   MOBILE UI/UX FINAL POLISH (≤480px) — Hero
   ================================================================================================= */
@media (max-width: 480px) {
  /* ── HERO — تقليل أكبر للـ padding والعنوان، أزرار متساوية تماماً ── */
  .hero { padding: 16px 0 20px; gap: 16px; }
  .hero h1 { font-size: 28px; line-height: 1.14; margin-bottom: 12px; }
  .hero-cta { margin-bottom: 16px; }
  .hero-cta .btn {
    flex: 1 1 0%;
    min-width: 0;
  }

  /* ── WHY CANAAN (الدائرة الرسومية في الهيرو) — تصغير إضافي طفيف ── */
  .orb-glow { width: min(75vw, 320px); height: min(75vw, 320px); }
  .orb-wrapper { width: 240px; height: 240px; }
  .orb { width: 220px; height: 220px; }
  .orb::before { width: 170px; height: 170px; }
  .orb-inner-ring { width: 150px; height: 150px; }
  /* نفس منطق الـ scale أعلاه (768px)، معاد حسابه لنصف قطر الحلقة الخارجية
     هنا: .orb::before=170px → نصف قطر 85px → 85/155 ≈ 0.548 */
  .dot-ring { width: 164px; height: 164px; scale: 0.548; }
  .dot-ring span { width: 7px; height: 7px; transform-origin: 0 -82px; scale: 1.825; }
  .orb-core { width: 90px; height: 90px; }
  .orb-core::before { width: 58px; height: 58px; }
  .orb-logo { width: 52px; height: 52px; }
}