/* ════════════════════════════════════════════════════════════════════════════
 * 93-gateway-hero.css — إعادة تصميم الهيرو «البوّابة» (إضافي، قابل للإزالة)
 * ────────────────────────────────────────────────────────────────────────────
 * الرؤية: الطالب يقف أمام باب من ضوء، خلفه فضاء عميق هادئ، وفي القلب يتنفّس
 *   حرف «ح» كنواة مضيئة تدور حولها كلمات المعرفة كأقمار. شاشة واحدة، صفاء مطلق:
 *   اسم المنصّة + بابان (إنشاء حساب / تسجيل دخول). لا شيء غيرهما.
 *
 * المبدأ: طبقة إضافية فوق الشرائح 01→20 (تبقى byte-identical). تعتمد tokens
 *   المشروع (primary / surface / text …) وبنية .lp-portal الموجودة (نهذّب
 *   ونرفع، لا نبني من صفر). تحترم prefers-reduced-motion، ولا تكسر 91 (أداء
 *   الجوال) ولا 99 (التجاوب) — كلاهما يبقى مؤثّراً (يأتي 91 قبلها بـ !important،
 *   و99 يملك التجاوب/المقاسات ≤1024 وأهداف اللمس).
 *
 * للإزالة: احذف هذا الملف + سطر <link> الخاص به في landing.html ⇒ يعود الهيرو
 *   لتصميم الشرائح الأصلي تماماً.
 * ════════════════════════════════════════════════════════════════════════════ */

:root { --lp-nav-h: 70px; }            /* ارتفاع الـ nav على الكمبيوتر (حشوة 14×2 + 40 + حد) */

/* ─── (0) إحياء توكنات --homepage-* (إصلاح حرج، إضافي) ────────────────────────
 * اكتشاف: شريحة 20-scifi-polish.css تبدأ بترويسة تعليق «مكسورة» (بلا فاتحة تعليق
 * — أثر تقطيع landing.css byte-identical). هذا يبتلع أول قاعدة فيها = كتلة
 * تعريف توكنات homepage. النتيجة: التوكنات (homepage-glow/electric/violet…)
 * غير معرّفة في الثيمات dark/blue/pink (الفاتح يعمل لأن كتلته القاعدة الثانية).
 * فتصبح كل قاعدة تستعمل تلك التوكنات «invalid at computed-value time» وترتدّ
 * لقيمتها الابتدائية → نواة البوّابة تفقد توهّجها + الأورورا + توهّج الـ nav.
 * (بقي مكسوراً في الأصل أيضاً — لهذا بدا التصميم باهتاً.)
 *
 * الإصلاح الإضافي: نُعيد تعريف التوكنات هنا (نفس قيم الأصل) فتُحيا قاعدة 20
 * المقصودة عبر كل الثيمات. لا نلمس الشريحة (تبقى byte-identical). الفاتح يحتفظ
 * بقيمه (قاعدته :root[data-theme="light"] أعلى تخصّصاً). للإزالة: احذف هذا الملف. */
:root {
  --homepage-bg:           #0c0618;
  --homepage-bg-soft:      #120a24;
  --homepage-card:         rgba(14, 22, 38, 0.55);
  --homepage-card-bord:    rgba(180, 150, 235, 0.10);
  --homepage-card-bord-hi: rgba(180, 150, 235, 0.20);
  /* ⚠️ يجب أن تكون قيماً بنفسجية صريحة لا var(--primary): هذه التوكنات معرّفة على
   * :root بينما اللوحة البنفسجية مثبّتة على body.lp-gateway فقط ⇒ var(--primary)
   * هنا يُحَلّ على :root = #00b4d8 (سماوي 01-tokens) فتطلع الكورة/الأوربس سماوية. */
  --homepage-primary:      #a855f7;
  --homepage-electric:     #a855f7;        /* بنفسجي كهربائي */
  /* 2026-06-03 (الثيم البنفسجي): --homepage-violet صار بنفسجياً متناغماً مع primary
   * (كان سماوياً #22d3ee في حقبة إلغاء الأزرق). الواجهة الآن بنفسجية مثبّتة. */
  --homepage-violet:       #a855f7;
  --homepage-sky:          #d9c9f5;        /* بنفسجي فاتح/فضي */
  --homepage-glow:         color-mix(in oklab, #a855f7 38%, transparent);
  --homepage-glow-soft:    color-mix(in oklab, #a855f7 16%, transparent);
  --homepage-violet-glow:  color-mix(in oklab, #a855f7 22%, transparent);
}

/* ─── (1) المسرح — الهيرو يملأ شاشة واحدة والمحتوى في القلب ────────────────── */
.lp-hero {
  min-height: calc(100svh - var(--lp-nav-h) - env(safe-area-inset-top, 0px));
  display: grid;
  align-items: center;
  /* حشوة عمودية مرنة بدل 64/80 الثابتة — تتنفّس دون أن تفيض */
  padding-block: clamp(18px, 4vh, 52px);
}
/* متصفّحات بلا svh: نرجع لـ vh (تمرير ضئيل محتمل عند ظهور أشرطة الجوال) */
@supports not (min-height: 100svh) {
  .lp-hero { min-height: calc(100vh - var(--lp-nav-h)); }
}
/* شبكة الهيرو: فجوة مهيبة، توسيط رأسي للعمودين */
.lp-hero-inner {
  gap: clamp(28px, 5.5vw, 92px);
  align-items: center;
}
.lp-hero-text { max-width: 600px; }

/* ─── (2) Vignette — تعتيم لطيف عند الحواف يركّز العين على مركز البوّابة ───── */
.lp-vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(135% 105% at 50% 44%,
    transparent 50%,
    color-mix(in oklab, #01030a 78%, transparent) 100%);
}
:root[data-theme="light"] .lp-vignette {
  background: radial-gradient(135% 105% at 50% 44%,
    transparent 58%,
    color-mix(in oklab, #9fb2d6 34%, transparent) 100%);
}

/* ─── (3) العنوان والنصّ — أفخم وأوضح (لا يمسّ تجاوب 99 على ≤1024) ───────── */
@media (min-width: 1025px) {
  .lp-h1 { font-size: clamp(3.4rem, 5.2vw, 5.6rem); }
}
.lp-tagline { color: var(--text-1); opacity: .94; }
.lp-desc { margin-bottom: clamp(22px, 3.2vh, 36px); color: var(--text-2); }

/* ─── (4) البابان — أكبر لمسةً وأبهى ──────────────────────────────────────── */
.lp-cta-group { margin-bottom: 0; gap: 14px; }
.lp-btn {
  height: 56px;
  padding: 0 30px;
  border-radius: 16px;
  font-size: 1.04rem;
}

/* ─── (5) دخول مسرحي — choreography ناعم متتالٍ (يُلغى تحت reduced-motion) ── */
/* نُبقي حركات §16 (lpFadeUp) ونضيف للبوّابة دخولاً أبهى: تكبّر لطيف + توهّج */
.lp-portal { animation: lpGateIn 1.1s var(--ease-soft) .25s both; }
@keyframes lpGateIn {
  from { opacity: 0; transform: scale(.9); filter: blur(6px); }
  to   { opacity: 1; transform: scale(1);  filter: blur(0); }
}
/* النواة «ح» تتنفّس بهدوء أعمق (يتجاوز نبض §6/§20 الافتراضي) */
.lp-portal-core { animation: lpCoreBreathe 7s ease-in-out infinite; }
@keyframes lpCoreBreathe {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.045); }
}

/* ─── (6) الجوال — البوّابة هالة طافية خلف نصّ متمركز، عمود واحد، حركة هادئة ─ */
@media (max-width: 760px) {
  .lp-hero {
    /* الجوال: زر الثيم يصبح هدف لمس 44px (99-responsive) ⇒ nav أطول (~73px).
       نرفع --lp-nav-h فيُعاد حساب min-height القاعدي تلقائياً (يقرأ المتغيّر). */
    --lp-nav-h: 74px;
    place-items: center;
  }
  /* طبقات الكمبيوتر الزخرفية (mesh conic + grain) لا لزوم لها على الجوال —
     إخفاؤها يمنع فيضاناً رأسياً بسيطاً (height:130%) ويوفّر أداءً. */
  .lp-hero::before,
  .lp-hero::after { display: none; }
  .lp-hero-inner { position: relative; }
  /* النص في القلب ومتمركز (gateway feel) */
  .lp-hero-text {
    position: relative; z-index: 2;
    text-align: center;
    margin-inline: auto;
    max-width: 560px;
  }
  .lp-eyebrow,
  .lp-cta-group { justify-content: center; }
  .lp-desc { margin-inline: auto; }
  /* البوّابة (نواة + حلقات؛ الأقمار مخفيّة على الجوال عبر §22) تصير هالة خلف النص */
  .lp-portal {
    position: absolute; inset: 0; margin: auto;
    z-index: 0; opacity: .5;
    animation: none;            /* الجوال: ظهور هادئ بلا تكبّر */
  }
  /* أزرار بعرض متّزن لا تفيض */
  .lp-cta-group { width: 100%; max-width: 420px; margin-inline: auto; }
}

/* الجوال الصغير جداً: نخفّف الهالة قليلاً كي يبقى النص هو البطل */
@media (max-width: 420px) {
  .lp-portal { opacity: .42; }
}

/* ─── (7) احترام تقليل الحركة — لا دخول مسرحي ولا تنفّس ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lp-portal,
  .lp-portal-core { animation: none !important; }
}