/* ==========================================================================
   شاشة التحميل — رحلة عبر تاريخ مصر
   أحمر غامق + أبيض، تظهر في الصفحة الرئيسية فقط.
   ========================================================================== */

.bsl{
  position:fixed;
  inset:0;
  /* أعلى من طبقات مشغّل الفيديو التي تستخدم أقصى قيمة تقريبًا */
  z-index:2147483600;
  display:grid;
  place-items:center;
  padding:clamp(16px,4vw,40px);
  color:#FFF;
  background:
    radial-gradient(120% 85% at 50% -10%, #8C1723 0%, #5E0D15 42%, #3F080D 72%, #2B0508 100%);
  opacity:1;
  transition:opacity .45s ease;
  overflow:hidden;
  /* شبكة أمان: لو تعطّل السكربت تختفي الشاشة وحدها ولا تحجب المحتوى */
  animation:bslFailsafe .4s ease 7s forwards;
}

/* السكربت يلغي شبكة الأمان ويتولّى الإخفاء بنفسه */
.bsl--js{ animation:none; }

@keyframes bslFailsafe{
  to{ opacity:0; visibility:hidden; }
}

.bsl.is-off{
  opacity:0;
  pointer-events:none;
}

.bsl[hidden]{ display:none !important; }

html.bsl-lock,
html.bsl-lock body{ overflow:hidden; }

/* نسيج محفور خفيف فوق الخلفية */
.bsl::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.5;
  background-image:repeating-linear-gradient(
    0deg,
    rgba(255,255,255,.035) 0 1px,
    transparent 1px 4px
  );
}

.bsl__inner{
  position:relative;
  z-index:1;
  width:min(680px,100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(10px,2.2vh,20px);
  text-align:center;
}

/* ---------- الهوية ---------- */
.bsl__brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  animation:bslFadeDown .6s ease both;
}

.bsl__logo{
  width:clamp(104px, 26vw, 156px);
  height:clamp(104px, 26vw, 156px);
  flex:none;
  object-fit:contain;
  filter:drop-shadow(0 10px 28px rgba(0,0,0,.38));
}

.bsl__seal{
  width:44px;
  height:44px;
  flex:none;
  color:#FFF;
  opacity:.95;
}
.bsl__seal svg{ width:100%; height:100%; display:block; }

.bsl__brandText{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  line-height:1.25;
}
.bsl__brandText strong{
  font-size:clamp(15px,2.4vw,18px);
  font-weight:800;
  letter-spacing:.2px;
}
.bsl__brandText em{
  font-style:normal;
  font-size:clamp(11px,1.8vw,12.5px);
  color:rgba(255,255,255,.62);
}

/* ---------- المسرح: الخريطة + الشخصية ---------- */
/* الطبقات كلها في خلية شبكة واحدة: لا تموضع مطلق ولا التباس في اتجاه RTL */
.bsl__stage{
  position:relative;
  width:100%;
  height:clamp(180px,32vh,300px);
  flex:none;
  min-height:0;
  display:grid;
}
.bsl__stage > *{
  grid-area:1 / 1;
  min-width:0;
  min-height:0;
}

/* خريطة مصر كنقش أبيض شفّاف خلف الشخصية */
.bsl__map{
  place-self:center;
  width:min(620px,96%);
  height:auto;
  max-height:100%;
  object-fit:contain;
  opacity:.28;
  filter:grayscale(1) contrast(1.2) brightness(1.15);
  mix-blend-mode:screen;
  pointer-events:none;
  animation:bslMapDrift 18s ease-in-out infinite alternate;
}

/* هالة أرضية تحت الشخصية */
.bsl__ground{
  place-self:end center;
  width:min(320px,70%);
  height:34px;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.20), rgba(255,255,255,0) 78%);
  pointer-events:none;
}

/* المسارات صريحة: لولاها لتمدّد الصف إلى الارتفاع الطبيعي للصورة
   وصار height:100% محسوبًا عليه بدل ارتفاع المسرح */
.bsl__figWrap{
  place-self:stretch;
  display:grid;
  grid-template-rows:minmax(0,1fr);
  grid-template-columns:minmax(0,1fr);
}

.bsl__fig{
  grid-area:1 / 1;
  min-width:0;
  min-height:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:bottom center;
  opacity:0;
  translate:0 10px;
  scale:.985;
  transition:opacity .5s ease, translate .5s ease, scale .5s ease;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.45));
}
.bsl__fig.is-on{
  opacity:1;
  translate:0 0;
  scale:1;
}

/* ---------- بطاقة التعريف ---------- */
.bsl__caption{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  min-height:74px;
  flex:none;
}

.bsl__era{
  font-size:clamp(10.5px,1.9vw,12px);
  font-weight:700;
  letter-spacing:.6px;
  color:#E9A5AC;
  text-transform:none;
}

.bsl__name{
  font-size:clamp(19px,4.2vw,27px);
  font-weight:900;
  line-height:1.2;
  text-shadow:0 2px 14px rgba(0,0,0,.4);
}

.bsl__years{
  font-size:clamp(11px,2vw,13px);
  color:rgba(255,255,255,.58);
  letter-spacing:.3px;
}

/* تبديل ناعم للنص مع كل شخصية */
.bsl__caption.is-swap .bsl__era,
.bsl__caption.is-swap .bsl__name,
.bsl__caption.is-swap .bsl__years{
  animation:bslTextIn .45s ease both;
}
.bsl__caption.is-swap .bsl__name{ animation-delay:.04s; }
.bsl__caption.is-swap .bsl__years{ animation-delay:.08s; }

/* ---------- الشريط الزمني ---------- */
.bsl__track{
  position:relative;
  width:min(420px,92%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:16px;
}

.bsl__rail{
  position:absolute;
  inset-inline:0;
  inset-block-start:50%;
  height:1px;
  translate:0 -50%;
  background:linear-gradient(
    to left,
    transparent,
    rgba(255,255,255,.28) 12%,
    rgba(255,255,255,.28) 88%,
    transparent
  );
}

.bsl__dot{
  position:relative;
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(255,255,255,.30);
  transition:background .3s ease, scale .3s ease, box-shadow .3s ease;
}
.bsl__dot.is-on{
  background:#FFF;
  scale:1.7;
  box-shadow:0 0 0 3px rgba(255,255,255,.16);
}
.bsl__dot.is-past{ background:rgba(255,255,255,.55); }

.bsl__hint{
  margin:0;
  font-size:clamp(11px,2vw,12.5px);
  color:rgba(255,255,255,.55);
  letter-spacing:.2px;
}

/* ---------- شريط التقدّم من ٠ إلى ١٠٠ ---------- */
.bsl__progress{
  display:flex;
  align-items:center;
  gap:12px;
  width:min(320px,88%);
  flex:none;
}

.bsl__bar{
  flex:1 1 auto;
  height:5px;
  border-radius:99px;
  background:rgba(255,255,255,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  overflow:hidden;
}
.bsl__bar i{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  /* الشريط ينمو من اليمين في الاتجاه العربي، فيكون رأسه اللامع لليسار */
  background:linear-gradient(90deg, #FFF, #F2C9CE);
  box-shadow:0 0 12px rgba(255,255,255,.45);
}

.bsl__pct{
  flex:none;
  min-width:46px;
  text-align:center;
  font-size:clamp(11.5px,2vw,13px);
  font-weight:700;
  color:rgba(255,255,255,.88);
  font-variant-numeric:tabular-nums;
}

/* ---------- الحركات ---------- */
@keyframes bslTextIn{
  from{ opacity:0; transform:translateY(7px); }
  to  { opacity:1; transform:translateY(0); }
}

@keyframes bslFadeDown{
  from{ opacity:0; transform:translateY(-8px); }
  to  { opacity:1; transform:translateY(0); }
}

@keyframes bslMapDrift{
  from{ transform:scale(1); }
  to  { transform:scale(1.05); }
}

/* ---------- الوضع الخفيف وتقليل الحركة ---------- */
.bsl--lite .bsl__stage{ height:clamp(150px,24vh,220px); }

@media (prefers-reduced-motion: reduce){
  .bsl,
  .bsl__map,
  .bsl__brand,
  .bsl__caption.is-swap .bsl__era,
  .bsl__caption.is-swap .bsl__name,
  .bsl__caption.is-swap .bsl__years{
    animation:none !important;
  }
  .bsl__fig{ transition:opacity .2s linear; translate:none; scale:1; }
}

@media (max-height: 520px){
  .bsl__stage{ height:clamp(120px,26vh,170px); }
  .bsl__brandText,
  .bsl__hint{ display:none; }
  .bsl__logo{ width:76px; height:76px; }
  .bsl__caption{ min-height:0; }
}