/* ============================================================
   NEXUS VISION — PAGE LOADER
   ============================================================ */

.nexus-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg, #0d1117);
  overflow: hidden;
  transition: opacity .6s ease, visibility .6s ease;
}

/* حالت مخفی */
.nexus-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* حالت fade-out نرم */
.nexus-loader.fade-out {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .55s ease, transform .55s ease;
  pointer-events: none;
}

/* ============================================================
   ORBS (پس‌زمینه متحرک)
   ============================================================ */
.loader-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.loader-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .5;
  animation: orbFloat 8s ease-in-out infinite;
}

.loader-orb-1 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, #0098b0, transparent 70%);
  top: -100px; left: -100px;
  animation-delay: 0s;
}

.loader-orb-2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, #8b2fd9, transparent 70%);
  bottom: -120px; right: -100px;
  animation-delay: 2s;
}

.loader-orb-3 {
  width: 280px; height: 280px;
  background: radial-gradient(circle, #d6005a, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  opacity: .25;
  animation-delay: 4s;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(30px, -40px) scale(1.1); }
  66%      { transform: translate(-30px, 30px) scale(.95); }
}

/* ============================================================
   LOADER CONTENT
   ============================================================ */
.loader-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 20px;
}

/* ---------- LOGO ---------- */
.loader-logo {
  position: relative;
  width: 110px;
  height: 110px;
  display: grid;
  place-items: center;
}

.loader-logo-mark {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 2.2rem;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #0098b0, #8b2fd9);
  box-shadow:
    0 12px 40px -10px rgba(0,152,176,.6),
    0 8px 30px -8px rgba(139,47,217,.5),
    inset 0 2px 0 rgba(255,255,255,.15);
  animation: logoPulse 2.2s ease-in-out infinite;
  position: relative;
  z-index: 2;
}

@keyframes logoPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 12px 40px -10px rgba(0,152,176,.6),
      0 8px 30px -8px rgba(139,47,217,.5),
      inset 0 2px 0 rgba(255,255,255,.15);
  }
  50% {
    transform: scale(1.06);
    box-shadow:
      0 20px 55px -10px rgba(0,152,176,.85),
      0 14px 45px -8px rgba(139,47,217,.7),
      inset 0 2px 0 rgba(255,255,255,.2);
  }
}

/* ---------- RINGS (حلقه‌های چرخان) ---------- */
.loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #0098b0;
  border-right-color: #8b2fd9;
  animation: ringSpin 1.4s linear infinite;
}
.loader-ring.delay-1 {
  inset: -12px;
  border-top-color: #8b2fd9;
  border-right-color: #0098b0;
  animation-duration: 2s;
  animation-direction: reverse;
  opacity: .6;
}

@keyframes ringSpin {
  to { transform: rotate(360deg); }
}

/* ---------- BRAND ---------- */
.loader-brand {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--text, #fff);
}
.loader-brand > span {
  font-size: 1.5rem;
  background: linear-gradient(90deg, #0098b0, #8b2fd9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.loader-brand small {
  font-size: .85rem;
  font-weight: 500;
  color: var(--text-faint, #8b93a7);
  letter-spacing: 4px;
  text-transform: uppercase;
}

/* ---------- PROGRESS BAR ---------- */
.loader-bar {
  width: 220px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  position: relative;
}
.loader-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.15),
    transparent);
  animation: barShine 1.6s infinite;
}

@keyframes barShine {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

.loader-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: linear-gradient(90deg, #0098b0, #8b2fd9);
  transition: width .3s ease;
  box-shadow: 0 0 12px rgba(0,152,176,.6);
}

/* ---------- PERCENT ---------- */
.loader-percent {
  font-size: .8rem;
  font-weight: 700;
  color: #0098b0;
  letter-spacing: 1px;
  font-family: 'Courier New', monospace;
  min-width: 44px;
  text-align: center;
}

/* ---------- STATUS TEXT ---------- */
.loader-text {
  font-size: .82rem;
  color: var(--text-faint, #8b93a7);
  letter-spacing: .3px;
  animation: textFade 1.8s ease-in-out infinite;
  min-height: 20px;
}

@keyframes textFade {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 480px) {
  .loader-logo { width: 90px; height: 90px; }
  .loader-logo-mark { width: 56px; height: 56px; font-size: 1.8rem; border-radius: 16px; }
  .loader-bar { width: 180px; }
  .loader-brand > span { font-size: 1.25rem; }
}

/* ============================================================
   LIGHT THEME
   ============================================================ */
[data-theme="light"] .nexus-loader {
  background: #f5f7fb;
}
[data-theme="light"] .loader-brand { color: #1a1f2e; }
[data-theme="light"] .loader-bar { background: rgba(0,0,0,.08); }


/* ============================================================
   HOLOGRAPHIC GLASSES LOADER
   ============================================================ */

.holo-glasses {
  position: relative;
  width: 280px;
  height: 150px;
  display: grid;
  place-items: center;
}

.holo-svg {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 3;
  animation: holoFloat 4s ease-in-out infinite;
}

@keyframes holoFloat {
  0%, 100% { transform: translateY(0) rotateX(0); }
  50%      { transform: translateY(-6px) rotateX(2deg); }
}

/* لنزها نبض می‌زنند */
.holo-lens {
  animation: holoLensPulse 2.8s ease-in-out infinite;
}
.lens-left  { animation-delay: 0s; }
.lens-right { animation-delay: .4s; }

@keyframes holoLensPulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* موج‌های منتشرشده */
.holo-wave {
  position: absolute;
  top: 50%; left: 50%;
  width: 200px;
  height: 60px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,229,255,.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: holoWave 3s ease-out infinite;
}
.holo-wave.wave-2 { animation-delay: 1s; }
.holo-wave.wave-3 { animation-delay: 2s; }

@keyframes holoWave {
  0% {
    transform: translate(-50%, -50%) scale(.6);
    opacity: .8;
    border-color: rgba(0,229,255,.6);
  }
  100% {
    transform: translate(-50%, -50%) scale(2.2);
    opacity: 0;
    border-color: rgba(139,47,217,.1);
  }
}

/* اسکنر افقی */
.holo-scanner {
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    #00e5ff 20%,
    #fff 50%,
    #00e5ff 80%,
    transparent);
  filter: blur(.5px);
  box-shadow:
    0 0 12px #00e5ff,
    0 0 24px rgba(0,229,255,.6),
    0 0 40px rgba(139,47,217,.4);
  animation: holoScan 2.5s ease-in-out infinite;
  z-index: 4;
  pointer-events: none;
}

@keyframes holoScan {
  0%, 100% {
    top: 12%;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  50% {
    top: 85%;
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
}

/* برند هولوگرافیک */
.holo-brand > span {
  background: linear-gradient(90deg,
    #00e5ff 0%,
    #8b2fd9 50%,
    #00e5ff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: holoShine 3s linear infinite;
}

@keyframes holoShine {
  to { background-position: 200% center; }
}

/* Grid background (اگر در نسخه ۱ نداشتی، اینجا استفاده می‌کنیم) */
.loader-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,152,176,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,152,176,.04) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(circle at center, #000 25%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at center, #000 25%, transparent 70%);
  animation: gridMove 20s linear infinite;
  pointer-events: none;
}

@keyframes gridMove {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 50px 50px, 50px 50px; }
}