/* صفحة الإطلاق/الصيانة. مستقلّة عن أصول اللوحة: تُخدَم أحيانًا على مسار
   `/app` حيث سياسة المحتوى تمنع أي سكربت مضمَّن، فكل شيء هنا في ملفّين. */
:root{
  --bg:#08090e; --bg2:#0b0d13; --surface:#141824; --line:#232838;
  --ink:#f4f6fb; --muted:#8e97ad; --dim:#5b6377;
  --accent:#5b6bff; --accent2:#3b53ff;
}
:root[data-tone="maintenance"]{ --accent:#e5a23d; --accent2:#c9832a; }

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;color:var(--ink);background:var(--bg);
  font-family:Cairo,system-ui,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  display:grid;place-items:center;padding:28px;
}

/* ── الخلفية ── */
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;border-radius:50%;filter:blur(110px);display:block}
.aurora i:nth-child(1){width:620px;height:620px;background:var(--accent2);opacity:.26;top:-220px;inset-inline-start:-160px;animation:drift 24s ease-in-out infinite}
.aurora i:nth-child(2){width:520px;height:520px;background:var(--accent);opacity:.20;bottom:-200px;inset-inline-end:-140px;animation:drift 30s ease-in-out infinite reverse}
.aurora i:nth-child(3){width:420px;height:420px;background:#22c37c;opacity:.10;top:46%;inset-inline-start:38%;animation:drift 36s ease-in-out infinite}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(46px,-38px,0) scale(1.1)}
  66%{transform:translate3d(-34px,30px,0) scale(.94)}
}

/* شبكة خافتة تعطي عمقًا بلا صورة */
.grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(circle at 50% 42%,#000 0,transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 42%,#000 0,transparent 72%);
}

/* ── المحتوى ── */
main{position:relative;z-index:1;width:min(100%,660px);text-align:center}

.badge{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:26px;
  padding:8px 16px;border-radius:999px;border:1px solid var(--line);
  background:rgba(20,24,36,.6);backdrop-filter:blur(8px);
  color:var(--muted);font-size:13.5px;font-weight:600;
}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 2.2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(91,107,255,.55)}50%{opacity:.6;box-shadow:0 0 0 8px rgba(91,107,255,0)}}

/* الختم: حلقة تدور خلف الدرع */
.seal{position:relative;display:grid;place-items:center;width:158px;height:158px;margin:0 auto 26px}
.seal::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 62%,var(--accent) 84%,transparent 100%);
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
  animation:spin 5.5s linear infinite;opacity:.85;
}
.seal::after{
  content:"";position:absolute;inset:14px;border-radius:50%;
  border:1px solid var(--line);background:radial-gradient(circle at 50% 30%,rgba(91,107,255,.16),transparent 70%);
}
.seal svg{position:relative;width:82px;height:82px;filter:drop-shadow(0 0 26px rgba(91,107,255,.45))}
@keyframes spin{to{transform:rotate(360deg)}}

h1{margin:0;font-size:clamp(30px,5.6vw,50px);line-height:1.2;font-weight:800;letter-spacing:-1px}
h1 .grad{
  background:linear-gradient(115deg,var(--accent),#9aa6ff 55%,var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.say{margin:18px auto 0;max-width:52ch;color:var(--muted);font-size:clamp(15px,2vw,17.5px);line-height:1.85}

/* ── العدّاد ── */
.count{display:flex;justify-content:center;gap:10px;margin:34px 0 0;flex-wrap:wrap}
.unit{
  min-width:88px;padding:16px 12px 12px;border-radius:16px;
  border:1px solid var(--line);background:rgba(20,24,36,.62);backdrop-filter:blur(8px);
  box-shadow:0 22px 50px -30px rgba(0,0,0,.9);
}
.unit b{
  display:block;font-size:clamp(26px,5vw,38px);font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-1px;
}
.unit span{display:block;margin-top:7px;color:var(--dim);font-size:12px;font-weight:600}

.when{margin-top:20px;color:var(--dim);font-size:13.5px}
.foot{margin-top:34px;color:var(--dim);font-size:13px;line-height:1.9}
.foot a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.foot a:hover{color:var(--ink)}

/* ── الستارة: نفس افتتاحية الموقع ── */
#curtain{position:fixed;inset:0;z-index:99;pointer-events:none;animation:c-gone .01s linear 2.6s forwards}
#curtain .panel{position:absolute;top:0;bottom:0;width:50.5%;background:var(--bg)}
#curtain .panel.l{left:0;animation:c-panel-l 1s cubic-bezier(.76,0,.24,1) 1.6s forwards}
#curtain .panel.r{right:0;animation:c-panel-r 1s cubic-bezier(.76,0,.24,1) 1.6s forwards}
#curtain .seam{
  position:absolute;top:0;bottom:0;left:50%;width:1px;transform:translateX(-50%);opacity:0;
  background:linear-gradient(180deg,transparent,var(--accent),transparent);
  animation:c-seam 2.1s ease .5s forwards;
}
#curtain .mark{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:16px;
  animation:c-out .4s ease 1.55s forwards;
}
#curtain .mark svg{width:min(30vw,116px);height:auto;filter:drop-shadow(0 0 34px rgba(91,107,255,.5))}
#curtain .draw{
  fill:none;stroke:var(--accent);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:190;stroke-dashoffset:190;animation:c-draw .95s cubic-bezier(.6,0,.3,1) .12s forwards;
}
#curtain .fill{fill:var(--accent);opacity:0;transform-box:fill-box;transform-origin:center;
  animation:c-pop .5s cubic-bezier(.2,1.5,.4,1) .85s forwards}
#curtain .word{font-weight:800;font-size:clamp(24px,6vw,31px);direction:ltr;opacity:0;animation:c-rise .55s ease .8s forwards}
#curtain .bar{width:min(44vw,164px);height:3px;border-radius:3px;background:var(--line);overflow:hidden;opacity:0;
  animation:c-rise .45s ease .95s forwards}
#curtain .bar i{display:block;height:100%;border-radius:3px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--accent2),var(--accent));animation:c-fill .85s cubic-bezier(.4,0,.2,1) .9s forwards}

@keyframes c-draw{to{stroke-dashoffset:0}}
@keyframes c-pop{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:scale(1)}}
@keyframes c-rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes c-fill{to{transform:scaleX(1)}}
@keyframes c-seam{0%{opacity:0}45%{opacity:.85}100%{opacity:0}}
@keyframes c-out{to{opacity:0;transform:scale(1.05)}}
@keyframes c-panel-l{to{transform:translateX(-101%)}}
@keyframes c-panel-r{to{transform:translateX(101%)}}
@keyframes c-gone{to{visibility:hidden}}

@media (max-width:520px){
  .unit{min-width:74px;padding:13px 9px 10px}
  .seal{width:130px;height:130px}
  .seal svg{width:68px;height:68px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  #curtain{display:none}
}