@charset "UTF-8";
/* ════════════════════════════════════════════════════════════════════════════
 * 95-cinematic-cosmos.css — طبقة الواجهة السينمائية (إضافية، آخر طبقة، قابلة للإزالة)
 * ────────────────────────────────────────────────────────────────────────────
 * تُحمَّل بعد كل شرائح landing (01→99) + cine-cosmos.css المشترك. بصرية بحتة، لا
 * تلمس أي JS / id / class / data-attr. تتكفّل بـ:
 *   (1) تثبيت اللوحة الكحلية/السماوية على body.lp-gateway مهما كان الثيم المحفوظ.
 *   (2) إخفاء زرّ الثيم #lpThemeBtn (الصفحات العامة بلا مبدّل ثيم).
 *   (3) إظهار خلفية المعبد (cine-cosmos) full-bleed خلف كل شيء داخل lp-bg الثابتة،
 *       مع بقاء الأوربس فوقها كطبقة سديم خفيفة.
 *   (4) سكريم قراءة ناعم خلف نصّ الهيرو (.lp-hero-text::after) ⇒ تباين AA فوق
 *       المناطق المضيئة من الصورة — إضافة بصرية على نفس العنصر، بلا تعديل DOM.
 *   (5) تكبير حضور الشعار في نواة البوّابة كبطل: هالة + أشعة + نبض (سماوي صرف).
 *   (6) رفع بصري خفيف للأزرار/الـ eyebrow/الـ nav (زجاج، توهّج).
 *
 * 2026-06-03 (إحياء): صارت الخلفية صورة المعبد (عبر cine-cosmos.css المشترك)؛
 *   هذا الملف يضمن ظهورها وتثبيت اللوحة ووضوح النص فوقها فقط.
 *
 * للإزالة: احذف <link> هذا الملف + <link> cine-cosmos.css + كتلة
 *   <div class="cine-cosmos"> من landing.html.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── (1) تثبيت اللوحة السينمائية مهما كان data-theme (blue/pink/light) ───────── */
body.lp-gateway {
  --primary:       #a855f7;
  --primary-hi:    #c084fc;
  --primary-hover: #9333ea;
  --primary-deep:  #7c3aed;
  --logo-color:    #ffffff;

  --bg-page:       #0c0618;
  --bg-page-soft:  #120a24;
  --bg-card:       #1a1030;
  --bg-card-2:     #221538;
  --surface-1:     rgba(255,255,255,0.04);
  --surface-2:     rgba(255,255,255,0.07);
  --hairline:      rgba(255,255,255,0.08);
  --hairline-2:    rgba(255,255,255,0.14);

  --text-1:        #f3e9ff;
  --text-2:        #c4b3da;
  --text-3:        #8576a0;
  --text-muted:    #6b5e85;

  --halo:          color-mix(in oklab, #a855f7 35%, transparent);
  --halo-soft:     color-mix(in oklab, #a855f7 18%, transparent);

  background: #0c0618;
}
/* خلفية body الثابتة — سماوي صرف (خلف الصورة كقاع آمن لو تأخّر تحميلها) */
:root[data-theme="light"] body.lp-gateway,
body.lp-gateway {
  background:
    radial-gradient(80% 60% at 50% 120%, rgba(168,85,247,0.12), transparent 60%),
    radial-gradient(56% 48% at 88% 118%, rgba(109,40,217,0.07), transparent 60%),
    #0c0618;
  background-attachment: fixed;
}

/* ─── (2) لا مبدّل ثيم في الواجهة العامة ───────────────────────────────────────── */
.lp-gateway #lpThemeBtn { display: none !important; }

/* ─── (3) صورة المعبد تملأ lp-bg الثابتة وتقف خلف كل شيء (full-bleed) ──────────── */
.lp-bg .cine-cosmos { z-index: 0; }
/* الأوربس الملوّنة تبقى فوق صورة المعبد كطبقة سديم إضافية خفيفة */
.lp-bg .lp-orb { z-index: 1; }
.lp-bg .lp-particles { z-index: 2; }

/* ─── (4) سكريم قراءة خلف نصّ الهيرو — يضمن تباين AA فوق المناطق المضيئة ─────────
 * نستعمل ::after (الحرّ) لأن ::before محجوز لهالة العنوان في شريحة 20. z-index:-1
 * يضعه خلف النص وفوق الصورة (داخل سياق .lp-hero-text المرفوع z-index:2). */
.lp-hero-text { position: relative; }
.lp-hero-text::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -26px -38px -30px -42px;
  border-radius: 30px;
  background: radial-gradient(120% 92% at 26% 44%,
    rgba(3, 6, 14, 0.60) 0%,
    rgba(3, 6, 14, 0.34) 46%,
    transparent 78%);
  pointer-events: none;
}

/* ─── (5) الشعار بطل البوّابة — هالة + أشعة هادئة + نبض (سماوي صرف، بلا بنفسجي) ──── */

/* الأشعة خلف الشعار — ساكنة سماوية صرفة، شفافية منخفضة، بلا mix-blend-mode */
.lp-portal .lp-portal-rays {
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    transparent 0deg,
    color-mix(in oklab, var(--primary-hi) 22%, transparent) 2deg,
    transparent 6deg,
    transparent 14deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 32%, #000 48%, transparent 78%);
          mask-image: radial-gradient(closest-side, transparent 32%, #000 48%, transparent 78%);
  opacity: .14;
  z-index: 0;
}

/* هالة سماوية واسعة ناعمة خلف النواة — تقرأ كنواة الضوء فوق المعبد */
.lp-portal-core::before {
  content: "";
  position: absolute;
  inset: -38%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in oklab, var(--primary-hi) 34%, transparent) 0%,
    color-mix(in oklab, var(--primary) 14%, transparent) 46%,
    transparent 74%);
  z-index: -1;
  animation: cineHaloBreathe 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cineHaloBreathe {
  0%, 100% { transform: scale(1);    opacity: .8; }
  50%      { transform: scale(1.06); opacity: .95; }
}

/* النواة نفسها: كرة بنفسجية لامعة بعمق ثلاثي + توهّج أهدأ + نبض أبطأ
   (تتجاوز التدرّج السماوي القديم في slice 20 بحكم ترتيب التحميل — 95 آخر طبقة) */
.lp-portal-core {
  background:
    radial-gradient(circle at 30% 28%,
      #f5efff 0%,      /* بريق علوي لافندر شبه أبيض (مصدر الضوء) */
      #cda4fb 24%,     /* لافندر فاتح */
      #a855f7 58%,     /* بنفسجي نابض (جسم الكرة) */
      #7c3aed 100%);   /* حافة بنفسجية عميقة (الظل السفلي) */
  box-shadow:
    inset 0 4px 18px rgba(255,255,255,0.30),
    inset 0 -12px 28px rgba(76,29,149,0.40),
    0 0 60px var(--halo),
    0 0 120px var(--halo-soft) !important;
  animation: lpCoreBreathe 9s ease-in-out infinite !important;
}

/* الشعار الأبيض: توهّج سماوي صرف، بلا بنفسجي */
.lp-portal-logo {
  filter:
    drop-shadow(0 6px 18px rgba(0,0,0,0.45))
    drop-shadow(0 0 22px color-mix(in oklab, var(--primary-hi) 50%, transparent)) !important;
  animation: lpLogoFloat 8s ease-in-out infinite !important;
}

/* الأقمار الدوّارة (.lp-pill) أوضح قليلاً ⇒ مزاج حيوي متناغم مع الخلفية */
.lp-pill {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 28px -8px rgba(0,0,0,0.5),
    0 0 0 1px color-mix(in oklab, var(--primary) 26%, transparent),
    0 0 22px -6px color-mix(in oklab, var(--primary-hi) 50%, transparent);
}

/* ─── (6) رفع بصري خفيف — eyebrow / أزرار / nav ───────────────────────────────── */
.lp-eyebrow {
  background:
    linear-gradient(180deg, rgba(168,85,247,0.06), rgba(255,255,255,0.02));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 8px 24px -12px var(--halo);
}
.lp-btn-primary {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.26),
    inset 0 -2px 0 rgba(0,0,0,0.10),
    0 14px 32px -10px var(--halo),
    0 0 0 1px color-mix(in oklab, var(--primary-hi) 28%, transparent) !important;
}
.lp-nav {
  background:
    linear-gradient(180deg, rgba(8,14,28,0.72), rgba(8,14,28,0.42));
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* ─── (7) الجوال — البوّابة هالة خلف نصّ متمركز فوق البوستر الطولي ─────────────── */
@media (max-width: 760px) {
  /* السكريم يتمركز خلف النص المتمركز (focal 50%) */
  .lp-hero-text::after {
    inset: -22px -18px;
    background: radial-gradient(120% 92% at 50% 46%,
      rgba(3, 6, 14, 0.58) 0%,
      rgba(3, 6, 14, 0.30) 50%,
      transparent 80%);
  }
}

/* ─── (8) تقليل الحركة ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lp-portal .lp-portal-rays,
  .lp-portal-core,
  .lp-portal-core::before,
  .lp-portal-core::after,
  .lp-portal-logo { animation: none !important; }

  /* شبكة أمان: محتوى الهيرو يعتمد دخوله على حركة fill (opacity:0 → 1). تحت تقليل
     الحركة قد يبقى مخفياً لو أُلغيت الحركة من شرائح سابقة ⇒ نضمن ظهوره النهائي. */
  .lp-eyebrow, .lp-h1, .lp-tagline, .lp-desc, .lp-cta-group, .lp-trust,
  .lp-hero-text, .lp-portal {
    opacity: 1 !important;
    transform: none !important;
  }
}