/* Nexoverse loader — CSS only, uses existing #page-loader markup */
:root{
  --nx-void:#08090c; --nx-paper:#eeeae1; --nx-signal:#ff5a1f;
  --nx-line:rgba(255,255,255,.10); --nx-line-2:rgba(255,255,255,.20); --nx-dim:#7f8794;
  --nx-ease:cubic-bezier(.22,1,.36,1);
}
#page-loader{
  background:
    radial-gradient(520px 320px at 50% 46%,rgba(255,90,31,.10),transparent 70%),
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/64px 64px,
    var(--nx-void)!important;
  gap:30px!important;
  transition:opacity .55s var(--nx-ease),visibility .55s,transform .55s var(--nx-ease)!important;
}
#page-loader.hidden{opacity:0;visibility:hidden;transform:scale(1.04)}

#page-loader .loader-logo{flex-direction:column;gap:18px;text-align:center;animation:nxLoaderIn .8s var(--nx-ease) both}
#page-loader .loader-logo-image{width:64px;height:64px;padding:10px;border-radius:18px;background:var(--nx-paper);animation:nxLogoPulse 2.2s ease-in-out infinite}
#page-loader .loader-logo-copy{text-align:center}
#page-loader .loader-logo-name{
  font-family:var(--font-display,system-ui);font-weight:700;font-size:1.7rem;letter-spacing:-.05em;
  background:linear-gradient(100deg,#fff 0%,#fff 40%,var(--nx-signal) 50%,#fff 60%,#fff 100%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:nxSweep 2.2s linear infinite;
}
#page-loader .loader-logo-subtitle{font-family:var(--font-mono,monospace);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--nx-dim);margin-top:6px}

/* orbit */
#page-loader .loader-spinner{
  position:relative;width:84px;height:84px;border:1px solid var(--nx-line-2)!important;border-radius:50%!important;background:none!important;
  animation:nxSpin 1.5s cubic-bezier(.55,.1,.45,.9) infinite!important;box-shadow:none!important;
}
#page-loader .loader-spinner::before{
  content:"";position:absolute;top:-6px;left:50%;width:11px;height:11px;margin-left:-5.5px;border-radius:3px;
  background:var(--nx-signal);border:0!important;right:auto;bottom:auto;box-shadow:0 0 18px rgba(255,90,31,.7);
}
#page-loader .loader-spinner::after{
  content:"";position:absolute;inset:30px;border-radius:50%;background:none;
  border:1px solid rgba(255,90,31,.55)!important;animation:nxRing 1.6s ease-in-out infinite;
}

/* progress line */
#page-loader .loader-bar{width:200px!important;height:2px!important;background:var(--nx-line)!important;border-radius:2px;overflow:hidden;position:relative}
#page-loader .loader-bar-fill{position:absolute;inset:0 auto 0 0;width:40%!important;background:var(--nx-signal)!important;border-radius:2px;animation:nxBar 1.3s var(--nx-ease) infinite!important;transform:none!important}

@keyframes nxLoaderIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes nxLogoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes nxSweep{to{background-position:-250% 0}}
@keyframes nxSpin{to{transform:rotate(360deg)}}
@keyframes nxRing{0%,100%{transform:scale(.7);opacity:.3}50%{transform:scale(1);opacity:1}}
@keyframes nxBar{0%{left:-40%}100%{left:100%}}

@media (prefers-reduced-motion:reduce){
  #page-loader .loader-logo-name{background:none;-webkit-text-fill-color:#fff;color:#fff}
  #page-loader .loader-bar-fill{left:0;width:100%!important;animation:none!important;opacity:.6}
}
