/* شاشة التحميل الأولى (مشتركة بين كل الصفحات) — تختفي عند استدعاء window.octoBoot() */
.boot { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; background: #F7F6FD; transition: opacity .5s cubic-bezier(.2, .8, .2, 1), visibility .5s; animation: bootAuto 0s 10s forwards; }
[data-theme="dark"] .boot { background: #100F1C; }
.boot::before { content: ""; position: absolute; width: 520px; height: 520px; max-width: 120vw; max-height: 120vw; border-radius: 50%; background: radial-gradient(circle, rgba(100, 87, 200, .18), transparent 65%); }
.boot-in { position: relative; width: 104px; height: 104px; display: grid; place-items: center; }
.boot-mark { position: relative; width: 88px; height: 88px; display: block; animation: bootTick 2.2s cubic-bezier(.65, 0, .35, 1) infinite; }
.boot-ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(100, 87, 200, .45); animation: bootPulse 1.8s cubic-bezier(.2, .8, .2, 1) infinite; }
.boot-ring.r2 { animation-delay: .9s; }
.boot .on-dark { display: none; }
[data-theme="dark"] .boot .on-dark { display: block; }
[data-theme="dark"] .boot .on-light { display: none; }
.boot-done .boot { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-done .boot .boot-mark { transform: scale(1.15); transition: transform .5s; animation-play-state: paused; }
@keyframes bootTick { 0% { transform: rotate(0) scale(1); } 45% { transform: rotate(45deg) scale(.9); } 55%, 100% { transform: rotate(45deg) scale(1); } }
@keyframes bootPulse { from { transform: scale(.75); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
@keyframes bootAuto { to { opacity: 0; visibility: hidden; pointer-events: none; } }
/* كلمة «جاري التحميل» / «Loading» حسب لغة الصفحة، بلمعة تمرّ عليها ونقاط تتراقص */
.boot-txt { position: relative; display: flex; align-items: baseline; gap: 3px; font-family: "Alexandria", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif; font-size: 17px; font-weight: 600; letter-spacing: .01em; animation: bootIn .6s .15s cubic-bezier(.2, .8, .2, 1) both; }
.boot-txt .w { background: linear-gradient(90deg, #8A80D8 0%, #8A80D8 35%, #FFFFFF 50%, #8A80D8 65%, #8A80D8 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bootShine 1.8s linear infinite; }
:root:not([data-theme="dark"]) .boot-txt .w { background-image: linear-gradient(90deg, #6457C8 0%, #6457C8 35%, #C9C3F5 50%, #6457C8 65%, #6457C8 100%); }
[dir="rtl"] .boot-txt .w { animation-direction: reverse; }
.boot-txt .t-en { display: none; }
html[lang="en"] .boot-txt .t-en { display: inline; }
html[lang="en"] .boot-txt .t-ar { display: none; }
.boot-txt .dots { display: inline-flex; gap: 3px; }
.boot-txt .dots i { width: 5px; height: 5px; border-radius: 50%; background: #8A80D8; animation: bootDot 1.2s ease-in-out infinite; }
:root:not([data-theme="dark"]) .boot-txt .dots i { background: #6457C8; }
.boot-txt .dots i:nth-child(2) { animation-delay: .15s; }
.boot-txt .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bootShine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes bootDot { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-6px); opacity: 1; } }
@keyframes bootIn { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .boot *, .boot::before { animation: none !important; } }