@charset "UTF-8";
/* ════════════════════════════════════════════════════════════════════════════
 * cine-cosmos.css — الخلفية السينمائية الكونية المشتركة (صورة «المعبد الكوني»)
 * ────────────────────────────────────────────────────────────────────────────
 * طبقة إضافية مشتركة بين landing.html و index.html (صفحتا الدخول/التسجيل).
 *
 * 2026-06-03 (إحياء): صار المشهد صورةً حقيقية (بوستر «المعبد الكوني») بدل الرسم
 *   بالـCSS. الصورة تُوضع على .cine-cosmos نفسها ⇒ تُورَّث تلقائياً إلى
 *   .h-auth-cosmos في صفحتي الدخول/التسجيل (لأنها .cine-cosmos أيضاً)، فيُكتب
 *   مسار الصورة هنا مرّة واحدة ويستفيد منه الطرفان. فوق الصورة طبقات حياة خفيفة:
 *     (أ) سكريم قراءة (.cine-cosmos::before)  — يعمّق الأعلى/الحواف ويُبقي عمود
 *         النور أسفل-الوسط حيّاً ⇒ تباين قراءة عالٍ للنصوص/البطاقة.
 *     (ب) نجوم حيّة (.cine-stars + ::after)   — وميض opacity بطيء فقط (لمسة حياة).
 *     (ج) توهّج وجزيئات الأرضية (.cine-aurora + ::before/::after) — تطابق الأرضية
 *         العاكسة المتوهّجة في البوستر (transform/opacity فقط).
 *     (د) تنفّس بارالاكس خفيف جدّاً (scale ضئيل) على الكمبيوتر فقط — عمق سينمائي.
 *
 * مبادئ:
 *   • لوحة باردة صارمة: كحلي/سماوي صرف — بلا أي بنفسجي/أحمر (توكنات --cine-* فقط).
 *   • الحركة transform/opacity فقط؛ تخفيف/إلغاء تدريجي على الجوال؛ احترام
 *     prefers-reduced-motion.
 *   • Namespace: .cine-*  ⇒ صفر تعارض مع أي class قائم. لا يلمس أي JS/id/handler.
 *   • المسار نسبي لمجلد هذا الـCSS ⇒ url("cosmos-wide.webp") يكفي (الصور في نفس
 *     المجلد): cosmos-wide.* للعريض، cosmos-tall.* للطولي (portrait).
 *
 * للإزالة: احذف <link> هذا الملف + كتلة <div class="cine-cosmos"> من الصفحة.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── الحاوية + خلفية الصورة (تملأ lp-bg الثابتة / h-auth-cosmos الثابتة) ──────── */
.cine-cosmos {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;

  /* توكنات لونية محلية للمشهد — سماوي/كحلي صرف (بلا بنفسجي a855f7 إطلاقاً) */
  --cine-cyan:  #22d3ee;
  --cine-teal:  #00b4d8;
  --cine-blue:  #2b6fe0;
  --cine-deep:  #0098b8;
  --cine-ink:   #060912;
  --cine-ink-2: #0a1120;

  /* خلفية المشهد: بوستر المعبد العريض. سطر url() سقوطٌ آمن لأي متصفّح لا يفهم
     image-set؛ ثم image-set يقدّم WebP مع سقوط JPG حسب دعم المتصفّح. */
  background-color: var(--cine-ink);
  background-image: url("cosmos-wide.jpg");
  background-image: image-set(
    url("cosmos-wide.webp") type("image/webp"),
    url("cosmos-wide.jpg")  type("image/jpeg"));
  background-repeat: no-repeat;
  background-position: center bottom;   /* المعبد مثبّت في أسفل-الوسط */
  background-size: cover;
}

/* تبديل حسب التوجّه: الجوال/التابلت الرأسي + أي شاشة ضيّقة ⇒ البوستر الطولي.
   هكذا البورتريه يأخذ cosmos-tall، والكمبيوتر/الأفقي يبقى على cosmos-wide. */
@media (orientation: portrait), (max-width: 820px) {
  .cine-cosmos {
    background-image: url("cosmos-tall.jpg");
    background-image: image-set(
      url("cosmos-tall.webp") type("image/webp"),
      url("cosmos-tall.jpg")  type("image/jpeg"));
  }
}

/* ═══ (أ) سكريم القراءة — يطلى فوق الصورة (::before = أوّل طبقة فوق الخلفية) ═══════
 * يعمّق الأعلى (تحت الـnav/العنوان) والحواف نحو الأسود، ويُبقي مركز-أسفل المشهد
 * (عمود النور) حيّاً ⇒ النصوص والبطاقة تُقرأ بوضوح فوق المناطق المضيئة. */
.cine-cosmos::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* تعتيم الشريط العلوي (مساحة العنوان/الـnav) */
    linear-gradient(180deg,
      rgba(3, 6, 14, 0.66) 0%,
      rgba(3, 6, 14, 0.30) 22%,
      rgba(3, 6, 14, 0.05) 45%,
      transparent 62%),
    /* تعتيم الحواف/الزوايا لتأطير البوّابة */
    radial-gradient(126% 100% at 50% 72%,
      transparent 40%,
      rgba(2, 4, 10, 0.40) 76%,
      rgba(1, 2, 7, 0.66) 100%),
    /* رفع سماوي خفيف جدّاً عند القاع ⇒ الأرضية تبقى نابضة */
    radial-gradient(72% 46% at 50% 110%,
      color-mix(in oklab, var(--cine-cyan) 12%, transparent),
      transparent 60%);
}

/* ═══ (ب) نجوم حيّة فوق الصورة — طبقتان خفيفتان (الصورة فيها نجوم؛ هذه لمسة حياة) ══
 * وميض opacity بطيء فقط — بلا تحريك background-position (الذي يسبّب repaint ثقيل).
 * يُفعّل الوميض على الكمبيوتر فقط (كتلة الحركة بالأسفل). */
.cine-stars,
.cine-stars::after {
  content: "";
  position: absolute;
  inset: -10% 0;
}
.cine-stars {
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(234,242,255,.80), transparent 60%),
    radial-gradient(1.2px 1.2px at 28% 8%,  rgba(180,225,255,.62), transparent 60%),
    radial-gradient(1px   1px   at 44% 22%, rgba(234,242,255,.48), transparent 60%),
    radial-gradient(1.6px 1.6px at 62% 12%, rgba(190,235,255,.78), transparent 60%),
    radial-gradient(1px   1px   at 78% 26%, rgba(234,242,255,.48), transparent 60%),
    radial-gradient(1.3px 1.3px at 90% 9%,  rgba(190,235,255,.70), transparent 60%),
    radial-gradient(1px   1px   at 8%  40%, rgba(234,242,255,.44), transparent 60%),
    radial-gradient(1.5px 1.5px at 36% 46%, rgba(190,235,255,.64), transparent 60%),
    radial-gradient(1px   1px   at 70% 42%, rgba(234,242,255,.42), transparent 60%),
    radial-gradient(1.2px 1.2px at 96% 38%, rgba(180,225,255,.56), transparent 60%);
  background-repeat: repeat;
  background-size: 100% 60vh;
  opacity: .5;
}
/* طبقة ثانية أصغر ⇒ إحساس عمق ساكن */
.cine-stars::after {
  background-image:
    radial-gradient(1px 1px at 20% 12%, rgba(234,242,255,.44), transparent 60%),
    radial-gradient(1px 1px at 52% 6%,  rgba(190,235,255,.38), transparent 60%),
    radial-gradient(1px 1px at 84% 18%, rgba(234,242,255,.40), transparent 60%),
    radial-gradient(1px 1px at 16% 34%, rgba(190,235,255,.34), transparent 60%),
    radial-gradient(1px 1px at 60% 30%, rgba(234,242,255,.38), transparent 60%),
    radial-gradient(1px 1px at 92% 28%, rgba(190,235,255,.34), transparent 60%);
  background-repeat: repeat;
  background-size: 100% 48vh;
  opacity: .4;
}

/* ═══ (ج) توهّج الأرضية + جزيئات صاعدة — تطابق الأرضية العاكسة المتوهّجة بالبوستر ══
 * .cine-aurora = توهّج سماوي ناعم أسفل-الوسط (يتنفّس بهدوء على الكمبيوتر).
 * ::before/::after = «جزيئتان» (عناقيد box-shadow) تصعدان ببطء وتتلاشيان. */
.cine-aurora {
  position: absolute;
  left: 50%;
  bottom: -10%;
  width: 128%;
  height: 54%;
  transform: translateX(-50%);
  background:
    radial-gradient(58% 80% at 50% 100%,
      color-mix(in oklab, var(--cine-cyan) 24%, transparent), transparent 70%),
    radial-gradient(40% 64% at 36% 100%,
      color-mix(in oklab, var(--cine-teal) 16%, transparent), transparent 72%);
  filter: blur(26px);
  opacity: .32;
  mix-blend-mode: screen;
}
.cine-aurora::before,
.cine-aurora::after {
  content: "";
  position: absolute;
  bottom: 9%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #d7f6ff;
  opacity: 0;            /* تظهر فقط أثناء حركة الصعود (الكمبيوتر) */
}
.cine-aurora::before {
  left: 38%;
  box-shadow:
    0    0   7px 1px color-mix(in oklab, var(--cine-cyan) 70%, transparent),
    34px 30px 5px -1px color-mix(in oklab, var(--cine-cyan) 55%, transparent),
    -46px 56px 5px -1px color-mix(in oklab, var(--cine-teal) 52%, transparent);
}
.cine-aurora::after {
  left: 61%;
  box-shadow:
    0    0   7px 1px color-mix(in oklab, var(--cine-teal) 66%, transparent),
    40px 48px 5px -1px color-mix(in oklab, var(--cine-cyan) 50%, transparent),
    -30px 26px 5px -1px color-mix(in oklab, var(--cine-cyan) 48%, transparent);
}

/* ════════════════════════════════ الحركات ════════════════════════════════════ */
@keyframes cineTwinkle {              /* وميض نجوم هادئ (opacity فقط) */
  0%, 100% { opacity: .32; }
  50%      { opacity: .6; }
}
@keyframes cineFloorBreathe {         /* تنفّس توهّج الأرضية */
  0%, 100% { opacity: .26; transform: translateX(-50%) scale(1); }
  50%      { opacity: .42; transform: translateX(-50%) scale(1.05); }
}
@keyframes cineMoteRise {             /* صعود جزيئة وتلاشيها */
  0%   { opacity: 0;   transform: translateY(0); }
  14%  { opacity: .85; }
  82%  { opacity: .5; }
  100% { opacity: 0;   transform: translateY(-180px); }
}
@keyframes cineBreathe {              /* بارالاكس: تنفّس خلفية ضئيل جدّاً */
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}

/* ─── تفعيل الحياة على الكمبيوتر فقط (وعند السماح بالحركة) ───────────────────────
 * على الجوال نُبقي الصورة + السكريم + التوهّج الساكن فقط ⇒ أداء أعلى. */
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  .cine-cosmos        { animation: cineBreathe 26s ease-in-out infinite; }
  .cine-stars         { animation: cineTwinkle 7s ease-in-out infinite; }
  .cine-stars::after  { animation: cineTwinkle 9s ease-in-out .8s infinite; }
  .cine-aurora        { animation: cineFloorBreathe 12s ease-in-out infinite; }
  .cine-aurora::before { animation: cineMoteRise 9s  ease-in-out infinite; }
  .cine-aurora::after  { animation: cineMoteRise 11s ease-in-out 2.6s infinite; }
}

/* ════════════════════════════════ أداء الجوال ════════════════════════════════ */
@media (max-width: 768px) {
  /* لا بارالاكس ولا وميض نجوم؛ توهّج أرضية ساكن أخفّ وبلا mix-blend-mode الثقيل */
  .cine-cosmos { background-attachment: scroll; animation: none !important; }
  .cine-stars,
  .cine-stars::after { animation: none !important; }
  .cine-aurora {
    filter: blur(30px);
    opacity: .38;
    mix-blend-mode: normal;
    animation: none !important;
  }
}
@media (max-width: 420px) {
  /* أصغر الشاشات: صورة + سكريم + توهّج فقط (إلغاء الجزيئات) */
  .cine-aurora::before,
  .cine-aurora::after { display: none; }
}

/* ════════════════════════════════ تقليل الحركة ═══════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .cine-cosmos,
  .cine-stars,
  .cine-stars::after,
  .cine-aurora,
  .cine-aurora::before,
  .cine-aurora::after { animation: none !important; }
}