/* شاشة البدء — مربوطة من index.html لتظهر قبل تحميل JavaScript، وتُزال من src/App.vue */
#app-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  font-family: 'Qomra Arabic', system-ui, sans-serif;
  background:
    radial-gradient(circle at 50% 42%, rgba(185, 167, 121, 0.18), transparent 45%),
    radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(160deg, #054239 0%, #002623 100%);
}
#app-splash .emblem {
  position: relative;
  width: 168px;
  height: 168px;
  display: grid;
  place-items: center;
  animation: rise 600ms ease-out both;
}
/* حلقتان ذهبيتان: خارجية دوّارة، وداخلية ثابتة خافتة */
#app-splash .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(185, 167, 121, 0.15) 120deg, #b9a779 300deg, #edebe0 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: spin 1.6s linear infinite;
}
#app-splash .ring-inner {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 1px solid rgba(185, 167, 121, 0.25);
  background: radial-gradient(circle, rgba(185, 167, 121, 0.12), transparent 70%);
}
#app-splash .logo {
  position: relative;
  width: 104px;
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(185, 167, 121, 0.35));
  animation: breathe 2.4s ease-in-out infinite;
}
#app-splash .brand {
  margin-top: 28px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #edebe0;
  animation: rise 600ms 120ms ease-out both;
}
#app-splash .desc {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #b9a779;
  animation: rise 600ms 200ms ease-out both;
}
#app-splash .progress {
  position: relative;
  width: 180px;
  height: 3px;
  margin-top: 26px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  animation: rise 600ms 280ms ease-out both;
}
#app-splash .progress .bar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #b9a779, #edebe0);
  animation: slide 1.3s ease-in-out infinite;
}
#app-splash .footer {
  position: absolute;
  bottom: max(24px, env(safe-area-inset-bottom));
  font-size: 12px;
  color: rgba(237, 235, 224, 0.55);
  letter-spacing: 0.3px;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slide {
  from { left: -40%; }
  to { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  #app-splash .ring { animation-duration: 4s; }
  #app-splash .logo,
  #app-splash .emblem,
  #app-splash .brand,
  #app-splash .desc,
  #app-splash .progress { animation: none; }
  #app-splash .progress .bar { animation-duration: 3s; }
}
#app-splash.fade-out {
  animation: splashFadeOut 300ms ease forwards;
}
@keyframes splashFadeOut {
  to { opacity: 0; visibility: hidden; }
}