/* ===================================================================
   X0T — شاشة الدخول السينمائية

   المبدأ الحاكم: الشعار يُعرض كما هو تماماً.
   لا قناع يعيد تلوينه، ولا قصّ، ولا تشويه للنِّسب — الصورة الأصلية
   بتدرّجها البنفسجي/الأزرق كاملة، ويقتصر التحريك على العتامة والتمويه
   والمقياس والإزاحة. (النسخة السابقة كانت تملأ شكل الشعار بتدرّج من
   الهوية عبر قناع، فتضيع ألوانه الأصلية — وهو ما لا تسمح به المواصفة.)

   الأداء: بلا مكتبات وبلا كانفس وبلا جسيمات جافاسكربت. الخلفية تدرّجات
   ثابتة، والحركة كلّها opacity / transform / filter على عنصرين اثنين.
   =================================================================== */

body.x0t-mg .mg-pre.x0pre{
  --x0pre-ease:cubic-bezier(.16,1,.3,1);   /* المنحنى المطلوب */
  --x0pre-enter:900ms;                     /* دخول الشعار */
  --x0pre-fade:650ms;                      /* تلاشي الستارة */

  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:center;justify-content:center;
  background:#000;                         /* ستارة سوداء كاملة */
  overflow:hidden;

  opacity:1;
  transition:opacity var(--x0pre-fade) ease;
}
body.x0t-mg .mg-pre.x0pre.is-out{opacity:0}

/* ---------- خلفية داكنة مستقبلية هادئة ----------
   تدرّجان شعاعيّان + شبكة خطوط باهتة جداً. ثابتة تماماً: لا حركة
   مستمرّة تستهلك المعالج طوال ظهور الشاشة. */
body.x0t-mg .mg-pre.x0pre::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(46vw 46vw at 50% 46%, rgba(var(--mg-a-rgb),.20), transparent 62%),
    radial-gradient(36vw 36vw at 78% 88%, rgba(var(--mg-b-rgb),.13), transparent 60%);
}
body.x0t-mg .mg-pre.x0pre::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(168,146,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,146,255,.05) 1px, transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(58% 58% at 50% 46%, #000, transparent 78%);
          mask-image:radial-gradient(58% 58% at 50% 46%, #000, transparent 78%);
}

/* ---------- المشهد ----------
   أسفل المنتصف الرأسي قليلاً كما هو مطلوب. */
body.x0t-mg .x0pre__stage{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(18px,2.6vw,26px);
  text-align:center;
  margin-top:5vh;
}

/* ---------- الشعار: الصورة الأصلية بلا أي تعديل ---------- */
body.x0t-mg .x0pre__logo{
  display:block;
  width:var(--x0pre-logo,150px);
  height:auto;                 /* النِّسب الأصلية محفوظة */
  opacity:0;
  filter:blur(8px);
  transform:translateY(14px) scale(.94);
  animation:x0pre-in var(--x0pre-enter) var(--x0pre-ease) 60ms forwards;
  will-change:opacity,transform,filter;
}
@keyframes x0pre-in{
  to{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}
}

/* ---------- الجملة ---------- */
body.x0t-mg .x0pre__text{
  font-family:'Inter','Cairo',system-ui,sans-serif;
  font-size:clamp(10.5px,1.05vw,12.5px);
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:#d9d2ff;
  margin:0;padding-inline-start:.34em;   /* يوازن تباعد الأحرف بصرياً */
  opacity:0;transform:translateY(8px);
  animation:x0pre-tag 620ms var(--x0pre-ease) 410ms forwards;
}
@keyframes x0pre-tag{to{opacity:.95;transform:none}}

/* ---------- شريط التقدّم ---------- */
body.x0t-mg .x0pre__bar{
  position:relative;display:block;overflow:hidden;
  width:clamp(160px,20vw,240px);
  height:2px;border-radius:2px;
  background:rgba(255,255,255,.15);
  opacity:0;
  animation:x0pre-tag 460ms ease 520ms forwards;
}
body.x0t-mg .x0pre__bar i{
  position:absolute;inset-block:0;inset-inline-start:0;
  display:block;width:0;border-radius:2px;
  background:linear-gradient(90deg,#8b6bff,#6d3fe0 46%,#3b5bf5);
  box-shadow:0 0 10px rgba(var(--mg-a-rgb),.85);   /* توهّج خفيف */
  /* يملأ تماماً خلال مدّة ظهور الشاشة، فينتهي مع بدء التلاشي */
  animation:x0pre-fill var(--x0pre-dur,3s) cubic-bezier(.32,.72,.28,1) 240ms forwards;
}
@keyframes x0pre-fill{
  0%{width:0}
  26%{width:34%}
  58%{width:66%}
  82%{width:86%}
  100%{width:100%}
}

/* ===================================================================
   الاستجابة
   =================================================================== */
@media (max-width:900px){
  body.x0t-mg .x0pre__stage{margin-top:4vh;gap:20px}
}
@media (max-width:600px){
  body.x0t-mg .x0pre__logo{width:min(var(--x0pre-logo,150px),58vw)}
  body.x0t-mg .x0pre__text{font-size:10px;letter-spacing:.26em}
  body.x0t-mg .x0pre__bar{width:min(200px,62vw)}
  body.x0t-mg .mg-pre.x0pre::after{background-size:56px 56px}
}

/* ===================================================================
   تقليل الحركة — بلا تمويه ولا خلفية متحرّكة، ظهور شبه فوري
   (وطبقة الجافاسكربت تُزيل الشاشة فوراً في هذه الحالة أصلاً)
   =================================================================== */
@media (prefers-reduced-motion: reduce){
  body.x0t-mg .mg-pre.x0pre::after{display:none}
  body.x0t-mg .x0pre__logo{
    filter:none;transform:none;opacity:1;
    animation:x0pre-rm 160ms linear forwards;
  }
  @keyframes x0pre-rm{from{opacity:.4}to{opacity:1}}
  body.x0t-mg .x0pre__text,
  body.x0t-mg .x0pre__bar{opacity:1;transform:none;animation:none}
  body.x0t-mg .x0pre__bar i{width:100%;animation:none;box-shadow:none}
  body.x0t-mg .mg-pre.x0pre{transition:opacity 160ms linear}
}