/* ===================================================================
   شاشة التحميل الرعبية (#app-loader / .ldr-*)
   مستخرَج حرفياً من: اعصار (2).html  (الأسطر 71-175)
   ⚠️ ترتيب الملفات في index.html يطابق ترتيب الكتل الأصلي — لا تغيّره (cascade).
   =================================================================== */

#app-loader {
    position:fixed; inset:0; z-index:99999; overflow:hidden;
    background:#000; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    transition:opacity .6s ease, transform .6s ease;
}
#app-loader.fade-out { opacity:0; transform:scale(1.04); pointer-events:none; }
/* ✅ ديكور إضافي للرسالة الأولى (شاشة تحميل النظام) — نفس روح صفحة "من نحن" */
.ldr-vignette {
    position:absolute; inset:0; pointer-events:none; z-index:0;
    background: radial-gradient(ellipse at 50% 50%, rgba(50,0,0,.28) 0%, rgba(0,0,0,0) 55%),
                radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,.8) 100%);
}
.ldr-embers { position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.ldr-ember {
    position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%;
    background:#ff6a00; box-shadow:0 0 6px 2px rgba(255,106,0,.75);
    animation: ldrEmberRise linear infinite;
}
/* [حُذف] @keyframes pulse — اسم عام معرَّف ولا يستدعيه شيء. الاسم المجرّد
   خطر بذاته: أي حركة جديدة تكتب `animation: pulse` تلتقطه بالغلط بدل ما
   تفشل بوضوح، فحذفه يمنع ربطاً صامتاً خاطئاً لاحقاً. */
@keyframes ldrEmberRise {
    0% { transform:translate(0,0) scale(1); opacity:0; }
    10% { opacity:1; }
    90% { opacity:.5; }
    100% { transform:translate(var(--ldr-drift,15px), -100vh) scale(.3); opacity:0; }
}
.ldr-hud-corner { position:absolute; width:26px; height:26px; border-color:rgba(255,0,0,.32); z-index:2; }
.ldr-hud-tl { top:22px; left:22px; border-top:2px solid; border-left:2px solid; }
.ldr-hud-tr { top:22px; right:22px; border-top:2px solid; border-right:2px solid; }
.ldr-hud-bl { bottom:22px; left:22px; border-bottom:2px solid; border-left:2px solid; }
.ldr-hud-br { bottom:22px; right:22px; border-bottom:2px solid; border-right:2px solid; }
.ldr-tagline {
    position:relative; z-index:2; font-family:'Cairo',sans-serif; font-size:.78rem;
    color:#a83333; margin-top:10px; letter-spacing:.02em; opacity:0;
    animation: ldrTaglineIn .8s ease .4s forwards;
}
@keyframes ldrTaglineIn { to { opacity:.85; } }
/* دم يسيل من الأعلى */
.ldr-blood {
    position:absolute; top:0; left:0; right:0; height:0; overflow:visible; pointer-events:none;
}
.ldr-drop {
    position:absolute; top:0; width:4px; border-radius:0 0 50% 50%;
    height:var(--h,120px); transform-origin:top center; will-change:transform,opacity;
    background:linear-gradient(180deg,#8a0000,#cc0000);
    animation:ldrDrip var(--dur,2s) ease-in var(--delay,0s) infinite;
    box-shadow:0 0 8px rgba(200,0,0,.6);
}
@keyframes ldrDrip {
    0%   { transform:scaleY(0);   opacity:0; }
    10%  { opacity:1; }
    60%  { transform:scaleY(1);   opacity:1; }
    100% { transform:scaleY(1) translateY(20px); opacity:0; }
}
/* شبكة مسح (scanlines) */
.ldr-scan {
    position:absolute; inset:0; pointer-events:none; z-index:1;
    background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0px,rgba(0,0,0,.18) 1px,transparent 1px,transparent 3px);
}
/* كلمة KABOOS */
.ldr-logo-wrap { position:relative; z-index:2; margin-bottom:8px; }
.ldr-logo {
    font-family:'Cairo',sans-serif; font-size:clamp(2.6rem,9vw,5rem); font-weight:900;
    letter-spacing:.22em; color:transparent;
    background:linear-gradient(180deg,#ff2a2a 0%,#8a0000 60%,#3a0000 100%);
    -webkit-background-clip:text; background-clip:text;
    text-shadow:0 0 40px rgba(200,0,0,.5), 0 0 80px rgba(200,0,0,.2);
    animation:ldrPulse 1.8s ease-in-out infinite alternate;
}
/* 🖼️ شعارنا الحقيقي بدل نص "كابوس" — نفس نبضة التوهج بس بشكل صورة */
.ldr-logo-img {
    display:block; max-width:min(220px,55vw); width:100%; height:auto; margin:0 auto;
    filter:drop-shadow(0 0 25px rgba(200,0,0,.55)) drop-shadow(0 0 50px rgba(200,0,0,.25));
    animation:ldrPulse 1.8s ease-in-out infinite alternate;
}
@keyframes ldrPulse { from{filter:brightness(.8)} to{filter:brightness(1.15) drop-shadow(0 0 12px #ff2a2a)} }
/* شريط التحميل */
.ldr-bar-wrap {
    position:relative; z-index:2; width:min(260px,55vw); height:2px;
    background:rgba(255,255,255,.06); border-radius:2px; overflow:hidden; margin:22px 0 14px;
}
.ldr-bar {
    height:100%; width:100%; border-radius:2px;
    transform:scaleX(0); transform-origin:right center; will-change:transform;
    background:linear-gradient(90deg,#3a0000,#cc0000,#ff6060,#cc0000,#3a0000);
    background-size:300% 100%;
    animation:ldrBarFill 2.5s ease-out forwards, ldrBarShine 1.2s linear 0s infinite;
}
@keyframes ldrBarFill  { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes ldrBarShine { from{background-position:300% 0} to{background-position:0% 0} }
/* نص الحالة */
.ldr-msg {
    position:relative; z-index:2; font-family:'Cairo',sans-serif;
    font-size:clamp(.65rem,.9vw,.8rem); letter-spacing:.15em;
    color:#5a0000; text-transform:uppercase; min-height:1.2em;
    animation:ldrMsgFade 2.5s ease-in-out forwards;
}
@keyframes ldrMsgFade { 0%{color:#3a0000} 60%{color:#8a0000} 100%{color:#cc2222} }
.ldr-sub {
    position:relative; z-index:2; font-family:'Cairo',sans-serif;
    font-size:.68rem; color:#2a0000; margin-top:5px; letter-spacing:.08em;
}