/* ═══════════════════════════════════════════════════════════
   شاشة التحميل — Loading overlay
   ═══════════════════════════════════════════════════════════ */

html.is-loading, html.is-loading body{overflow:hidden}

.loader{
  position:fixed; inset:0; z-index:9999;
  background:
    radial-gradient(1200px 620px at 50% 42%, #17212C 0%, #0B1016 62%, #070A0E 100%);
  display:grid; place-items:center;
  opacity:1; transition:opacity .68s cubic-bezier(.4,0,.2,1);
}
.loader.out{opacity:0; pointer-events:none}
.loader.instant .loader-canvas{display:none}
.loader.instant .loader-inner::before{
  content:''; width:132px; height:132px; margin-inline:auto;
  background:url('../img/logo.png') center/contain no-repeat;
  filter:invert(1) hue-rotate(180deg) brightness(1.4);
  animation:loaderPulse 1s ease-in-out infinite;
}
@keyframes loaderPulse{0%,100%{opacity:.5}50%{opacity:1}}

/* نسيج خفيف فوق الخلفية */
.loader::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(214,165,82,.055) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 72%);
}

.loader-inner{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  width:min(560px, 88vw);
}

/* حاوية الحركة — يملؤها runAssembly بلوحة رسم وطبقة الشعار النهائي */
.loader-stage{
  position:relative; width:100%; height:min(52vh, 420px);
  filter:drop-shadow(0 0 26px rgba(214,165,82,.18));
}
.loader.instant .loader-stage{display:none}

.loader-meta{
  display:flex; flex-direction:column; align-items:center; gap:11px;
  width:min(300px,66vw); margin-top:10px;
}

.loader-line{
  display:flex; align-items:baseline; justify-content:space-between;
  width:100%; gap:14px;
}

.loader-word{
  font-family:'Tajawal',system-ui,sans-serif; font-weight:700;
  font-size:15px; letter-spacing:.02em; color:rgba(242,245,248,.86);
}
/* ثلاث نقاط تتابع بعد «جارٍ التحميل» — تتوقّف عند الجاهزية */
.loader-word::after{
  content:''; display:inline-block; width:1.1em; text-align:start;
  animation:dots 1.4s steps(4,end) infinite;
}
.loader-word.done::after{animation:none; content:''}
@keyframes dots{
  0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%,100%{content:'...'}
}
.loader-word.flip{animation:wordIn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes wordIn{
  from{opacity:0; transform:translateY(7px); filter:blur(3px)}
  to{opacity:1; transform:none; filter:blur(0)}
}

.loader-track{
  width:100%; height:3px; border-radius:3px;
  background:rgba(242,245,248,.13); overflow:hidden;
}
.loader-fill{
  display:block; height:100%; width:100%; transform-origin:left center;
  transform:scaleX(0);
  background:linear-gradient(90deg,#A8762C,#E4BC78 55%,#D6A552);
}
[dir="rtl"] .loader-fill{transform-origin:right center}

.loader-pct{
  font-family:'Tajawal',system-ui,sans-serif; font-weight:800;
  font-size:15px; color:#D6A552; letter-spacing:.02em; flex:none;
}
.loader-pct small{font-size:.62em; opacity:.62; margin-inline-start:1px}

.loader-skip{
  position:absolute; inset-block-end:26px; inset-inline-end:26px; z-index:3;
  background:transparent; border:1px solid rgba(242,245,248,.2); color:rgba(242,245,248,.62);
  font-size:12px; font-weight:600; padding:7px 16px; border-radius:100px; cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.loader-skip:hover{border-color:rgba(214,165,82,.7); color:#D6A552}
.loader.instant .loader-skip{display:none}

@media (prefers-reduced-motion:reduce){
  .loader-word.flip{animation:none}
  .loader.instant .loader-inner::before{animation:none; opacity:1}
}