/* ===== لوحة الانتقال بين الصفحات =====
 * مأخوذة من افتتاحية الصفحة الرئيسية بنفس شكلها: لوحة داكنة والشعار
 * يمتلئ من أسفله كالكأس ثم تذوب اللوحة وتنزل الترويسة.
 *
 * غرضها هنا عمليّ لا زخرفي: بنر كل صفحة يأتي من الإعدادات بعد نداء
 * الشبكة، وكانت الصفحة تعرض في تلك الفترة صورةً مؤقّتة ثم تستبدلها —
 * فيراها الزائر ومضةً غريبة. اللوحة تغطّي هذه الفترة بالضبط: لا ترتفع
 * حتى يصل البنر الحقيقي (أو ينقضي السقف الزمني).
 *
 * الافتتاحية في الصفحة الرئيسية تبقى في ملفها — فيها تتابعٌ خاص
 * بالشعار الرئيسي لا وجود له في بقيّة الصفحات.
 */

html.intro-on, html.intro-on body{ overflow:hidden; }

.page-intro{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-darker, #0d1620);
  opacity:1;
  transition:opacity .55s cubic-bezier(.33,0,.2,1);
}
/* اللوحة تذوب والشعار معها — حركة واحدة بلا فاصل */
.page-intro.is-gone{ opacity:0; pointer-events:none; }

/* نسختان من الشعار إحداهما فوق الأخرى: الباهتة ثابتة، والساطعة
   تنكشف من أسفل إلى أعلى */
.page-intro-mark{ position:relative; display:block; }
.page-intro-mark svg{ display:block; height:69px; width:auto; }
.page-intro-mark .fill{
  position:absolute; inset:0;
  clip-path:inset(100% 0 0 0);
  transition:clip-path .7s cubic-bezier(.36,.06,.3,1);
}
.page-intro-mark .base svg .st0, .page-intro-mark .base svg path{ fill:#f4f2ec; }
.page-intro-mark .fill svg .st0, .page-intro-mark .fill svg path{ fill:#ffffff; }
.page-intro-mark .base{ opacity:.10; }
.page-intro.is-filling .page-intro-mark .fill{ clip-path:inset(0 0 0 0); }

@media(max-width:900px){ .page-intro-mark svg{ height:44px; } }

/* الترويسة تصل بكامل قوّتها بعد انقشاع اللوحة؛ لا تتلاشى وهي تنزل
   وإلا بدا الشعار والأزرار باهتةً في الطريق */
html.hold-header header{ visibility:hidden; transform:translateY(-26px); }
html.intro-header header{
  visibility:visible; transform:translateY(0);
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion:reduce){
  .page-intro, .page-intro-mark .fill{ transition:none; }
  html.intro-header header{ transition:none; }
}