/* =====================================================================
   مرصدك — preloader.css
   شاشة الترحيب عند أول دخول في الجلسة (partials/preloader.php).
   مخفية افتراضياً؛ لا تظهر إلا مع html.pl-on (سكربت الرأس)، فلا أثر لها بلا JavaScript.
   الألوان مكتوبة صراحةً (لا تعتمد على tokens.css) حتى تُرسم من أول إطار.
   ===================================================================== */

.pl{display:none}

html.pl-on,
html.pl-on body{overflow:hidden}

html.pl-on .pl{
  --plx:50%;
  --ply:42%;
  --T:2.4s;
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#070C26 linear-gradient(180deg,#0B1440 0%,#070C26 70%);
  color:#FAF7F1;
  font-family:'Thmanyah',system-ui,'Segoe UI',sans-serif;
  cursor:default;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  clip-path:circle(150% at var(--plx) var(--ply));
  transition:clip-path .95s cubic-bezier(.76,0,.24,1);
  /* مؤقت أمان: تختفي حتى لو تعطّل السكربت */
  animation:pl-failsafe .5s 7s forwards;
}

/* ---------- الخلفية: توهّج + شبكة خريطة ---------- */
.pl__glow,
.pl__grid{position:absolute;pointer-events:none}

.pl__glow{
  inset:0;
  background:
    radial-gradient(44% 34% at 50% 40%,rgba(109,61,214,.42),transparent 72%),
    radial-gradient(32% 26% at 90% 6%,rgba(155,93,232,.22),transparent 70%),
    radial-gradient(38% 30% at 6% 96%,rgba(60,79,166,.38),transparent 70%);
  animation:pl-breathe 4.8s ease-in-out infinite alternate;
}

.pl__grid{
  inset:-46px;
  background-image:
    linear-gradient(rgba(216,204,247,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(216,204,247,.055) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(58% 48% at 50% 42%,#000 10%,transparent 78%);
  mask-image:radial-gradient(58% 48% at 50% 42%,#000 10%,transparent 78%);
  animation:pl-grid 9s linear infinite;
}

/* ---------- المسرح ---------- */
.pl__stage{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:0 16px;
  margin-block-end:12vh;
}

/* ---------- الرادار ---------- */
.pl__scope{
  position:relative;
  inline-size:min(58vw,232px);
  block-size:min(58vw,232px);
  margin-block-end:22px;
}

.pl__ring,
.pl__sweep,
.pl__ping,
.pl__blip{position:absolute;border-radius:50%;pointer-events:none}

.pl__ring{
  border:1px solid rgba(216,204,247,.16);
  opacity:0;
  transform:scale(.6);
  animation:pl-ring-in .9s cubic-bezier(.16,1,.3,1) forwards;
}
.pl__ring--1{
  inset:0;
  border-color:rgba(216,204,247,.22);
  /* علامات تدريج حول الإطار */
  background:repeating-conic-gradient(from 0deg,rgba(216,204,247,.42) 0 .7deg,transparent .7deg 10deg);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));
  mask:radial-gradient(closest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));
}
.pl__ring--2{inset:15%;animation-delay:.12s}
.pl__ring--3{inset:30%;animation-delay:.24s;border-style:dashed;border-color:rgba(216,204,247,.2)}

.pl__sweep{
  inset:2px;
  background:conic-gradient(from 0deg,transparent 0 262deg,rgba(155,93,232,.07) 290deg,rgba(185,139,240,.34) 352deg,rgba(255,255,255,.9) 359.4deg,transparent 360deg);
  -webkit-mask:radial-gradient(closest-side,#000 97%,transparent);
  mask:radial-gradient(closest-side,#000 97%,transparent);
  opacity:0;
  animation:
    pl-fade-in .5s .95s forwards,
    pl-spin var(--T) 1s linear infinite;
}

.pl__ping{
  inset:36%;
  border:1.5px solid rgba(185,139,240,.8);
  opacity:0;
  animation:pl-ping var(--T) 1s cubic-bezier(.2,.6,.3,1) infinite;
}
.pl__ping--late{animation-delay:2.2s}

/* فعاليات تومض حين يمرّ عليها المسح: التأخير = بدء المسح + (الزاوية ÷ ٣٦٠) × الدورة */
.pl__blip{
  inline-size:7px;
  block-size:7px;
  margin:-3.5px 0 0 -3.5px;
  background:#FFFFFF;
  box-shadow:0 0 0 3px rgba(155,93,232,.35),0 0 16px 5px rgba(185,139,240,.75);
  opacity:0;
  animation:pl-blip var(--T) infinite;
}
.pl__blip--1{left:75%;top:20%;animation-delay:1.27s}
.pl__blip--2{left:75.8%;top:59.4%;animation-delay:1.73s;inline-size:5px;block-size:5px}
.pl__blip--3{left:61%;top:91%;animation-delay:2.1s}
.pl__blip--4{left:32.2%;top:75.4%;animation-delay:2.43s;inline-size:5px;block-size:5px}
.pl__blip--5{left:6.7%;top:42.4%;animation-delay:2.87s}
.pl__blip--6{left:35.7%;top:29.5%;animation-delay:3.17s;inline-size:5px;block-size:5px}

/* ---------- عين مرصدك ---------- */
.pl__mark{
  position:absolute;
  inset:24%;
  inline-size:52%;
  block-size:52%;
  overflow:visible;
  filter:drop-shadow(0 0 18px rgba(155,93,232,.55));
}

.pl__draw{
  fill:none;
  stroke:#D8CCF7;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:
    pl-draw .85s .15s cubic-bezier(.65,0,.35,1) forwards,
    pl-fade-out .4s 1.05s forwards;
}
.pl__draw--inner{animation-delay:.32s,1.05s}

.pl__fill{
  opacity:0;
  animation:pl-fade-in .55s .85s ease-out forwards;
}

.pl__tail{
  opacity:0;
  transform:translateY(-16px);
  animation:pl-drop .6s .95s cubic-bezier(.34,1.56,.64,1) forwards;
}

.pl__pupil{
  transform-box:fill-box;
  transform-origin:center;
  transform:scale(0);
  animation:pl-pop .5s 1.1s cubic-bezier(.34,1.56,.64,1) forwards;
}
.pl__look{animation:pl-look 2.2s 1.6s ease-in-out infinite}

/* ---------- الاسم ---------- */
.pl__word{display:flex;flex-direction:column;align-items:center;gap:2px}

.pl__name{
  display:block;
  padding:.08em .2em .32em;
  font-family:'Thmanyah Display','Thmanyah',sans-serif;
  font-weight:700;
  font-size:clamp(46px,12.5vw,70px);
  line-height:1.3;
  color:transparent;
  background:linear-gradient(100deg,#FFFFFF 0%,#FFFFFF 38%,#B98BF0 50%,#FFFFFF 62%,#FFFFFF 100%) 100% 0/260% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  clip-path:inset(-20% -12% -35% 100%);
  animation:
    pl-reveal .85s 1.15s cubic-bezier(.16,1,.3,1) forwards,
    pl-shine 2.6s 2s ease-in-out infinite;
}

.pl__latin{
  direction:ltr;
  unicode-bidi:isolate;
  padding-left:.55em;
  font-size:11px;
  font-weight:500;
  letter-spacing:1.1em;
  color:rgba(216,204,247,.66);
  opacity:0;
  animation:pl-track .9s 1.5s cubic-bezier(.16,1,.3,1) forwards;
}

.pl__tag{
  margin:14px 0 0;
  font-size:14px;
  line-height:1.7;
  color:rgba(250,247,241,.74);
  opacity:0;
  transform:translateY(8px);
  animation:pl-rise .7s 1.75s cubic-bezier(.16,1,.3,1) forwards;
}

.pl__bar{
  display:block;
  inline-size:132px;
  block-size:3px;
  margin-block-start:22px;
  border-radius:3px;
  background:rgba(255,255,255,.1);
  overflow:hidden;
}
.pl__bar > span{
  display:block;
  block-size:100%;
  border-radius:inherit;
  background:linear-gradient(to left,#9B5DE8,#FFFFFF);
  transform-origin:right center;
  transform:scaleX(0);
  animation:pl-load 2.3s .3s cubic-bezier(.65,0,.35,1) forwards;
}

/* ---------- أفق الرياض ---------- */
.pl__skyline{
  position:absolute;
  left:50%;
  bottom:-2px;
  block-size:min(20vh,170px);
  inline-size:auto;
  aspect-ratio:600/260;
  max-inline-size:118vw;
  transform:translateX(-50%);
  fill:none;
  stroke:rgba(185,139,240,.5);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
  pointer-events:none;
}
.pl__skyline path,
.pl__skyline circle{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:pl-draw 1.5s cubic-bezier(.65,0,.35,1) forwards;
}
.pl__skyline :nth-child(1){animation-delay:.2s}
.pl__skyline :nth-child(2){animation-delay:.3s}
.pl__skyline :nth-child(3){animation-delay:.4s}
.pl__skyline :nth-child(4){animation-delay:.55s}
.pl__skyline :nth-child(5){animation-delay:.7s}
.pl__skyline :nth-child(6){animation-delay:.75s}
.pl__skyline :nth-child(7){animation-delay:.45s}
.pl__skyline :nth-child(8){animation-delay:.65s}
.pl__skyline :nth-child(9){animation-delay:.8s}
.pl__skyline :nth-child(10){animation-delay:.5s}
.pl__skyline :nth-child(11){animation-delay:.65s}
.pl__skyline :nth-child(12){animation-delay:.6s}
.pl__skyline :nth-child(13){animation-delay:.8s}
.pl__skyline .pl__ground{stroke:rgba(216,204,247,.7);animation-delay:0s}

/* ---------- الخروج: العين «تلتقط» الصفحة — الدائرة تنغلق على البؤبؤ ---------- */
html.pl-on .pl.is-out{clip-path:circle(0% at var(--plx) var(--ply))}

.pl.is-out .pl__word,
.pl.is-out .pl__tag,
.pl.is-out .pl__bar,
.pl.is-out .pl__skyline,
.pl.is-out .pl__grid{
  opacity:0;
  transition:opacity .35s ease;
}
.pl.is-out .pl__scope{
  transform:scale(.72);
  transition:transform .95s cubic-bezier(.76,0,.24,1);
}

/* ---------- الشاشات القصيرة (جوال بالعرض) ---------- */
@media (max-height:560px){
  .pl__skyline{display:none}
  .pl__scope{inline-size:min(34vh,200px);block-size:min(34vh,200px);margin-block-end:10px}
  .pl__name{font-size:clamp(34px,9vh,52px)}
  .pl__tag{margin-top:6px}
  .pl__bar{margin-block-start:12px}
  .pl__stage{margin-block-end:0}
}

/* ---------- تقليل الحركة: مشهد ثابت يختفي بتلاشٍ سريع ---------- */
@media (prefers-reduced-motion:reduce){
  html.pl-on .pl{transition:opacity .3s ease;clip-path:none}
  html.pl-on .pl.is-out{clip-path:none;opacity:0}
  .pl *,
  .pl *::before,
  .pl *::after{animation:none !important;transition:none !important}
  .pl__ring,.pl__fill,.pl__tail,.pl__latin,.pl__tag{opacity:1;transform:none}
  .pl__pupil{transform:none}
  .pl__draw,.pl__sweep,.pl__ping,.pl__blip{opacity:0}
  .pl__name{clip-path:none}
  .pl__bar > span{transform:none}
  .pl__skyline path,.pl__skyline circle{stroke-dashoffset:0}
}

/* ---------- الإطارات ---------- */
@keyframes pl-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
@keyframes pl-breathe{from{opacity:.75}to{opacity:1}}
@keyframes pl-grid{to{transform:translate3d(46px,46px,0)}}
@keyframes pl-ring-in{to{opacity:1;transform:scale(1)}}
@keyframes pl-spin{to{transform:rotate(360deg)}}
@keyframes pl-fade-in{to{opacity:1}}
@keyframes pl-fade-out{to{opacity:0}}
@keyframes pl-draw{to{stroke-dashoffset:0}}
@keyframes pl-drop{to{opacity:1;transform:translateY(0)}}
@keyframes pl-pop{to{transform:scale(1)}}
@keyframes pl-look{
  0%,100%{transform:translate(0,0)}
  22%{transform:translate(-6px,-1px)}
  48%{transform:translate(6px,1px)}
  70%{transform:translate(2px,-3px)}
}
@keyframes pl-ping{
  0%{opacity:.85;transform:scale(.5)}
  80%,100%{opacity:0;transform:scale(2.75)}
}
@keyframes pl-blip{
  0%{opacity:0;transform:scale(.3)}
  5%{opacity:1;transform:scale(1.25)}
  14%{transform:scale(1)}
  55%{opacity:.35}
  100%{opacity:0}
}
@keyframes pl-reveal{to{clip-path:inset(-20% -12% -35% -12%)}}
@keyframes pl-shine{
  0%{background-position:100% 0}
  60%,100%{background-position:0 0}
}
@keyframes pl-track{
  from{opacity:0;letter-spacing:1.1em}
  to{opacity:1;letter-spacing:.55em}
}
@keyframes pl-rise{to{opacity:1;transform:translateY(0)}}
@keyframes pl-load{to{transform:scaleX(1)}}