/* ================================================================
   NextWeb OS — Preloader Styles
   Used on any page that shows the loading screen
================================================================ */

#preloader{
  position:fixed;inset:0;z-index:99999;
  background:#0d1220;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3.2rem;
  transition:opacity .6s ease, visibility .6s ease;
}
#preloader.hidden{opacity:0;visibility:hidden;pointer-events:none}

/* Logo lockup */
.pre-logo{display:flex;align-items:center;gap:1.2rem;animation:preLogoIn .5s cubic-bezier(.34,1.56,.64,1) both}
.pre-lmark{
  width:4.4rem;height:4.4rem;background:#e81f76;border-radius:1rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 0 rgba(232,31,118,.5);
  animation:prePulse 1.8s ease-in-out .5s infinite;
}
.pre-lmark svg{width:2.2rem;height:2.2rem;fill:#fff}
.pre-ltxt{font-family:'Poppins',sans-serif;font-size:2.8rem;font-weight:800;color:#fff;letter-spacing:-.03em}
.pre-ltxt em{color:#e81f76;font-style:normal}

/* Morphing bar loader */
.pre-bar-wrap{width:28rem;display:flex;flex-direction:column;gap:1rem;animation:preLogoIn .5s .15s ease both}
.pre-bar-track{
  width:100%;height:.5rem;background:rgba(255,255,255,.1);border-radius:10rem;overflow:hidden;position:relative;
}
.pre-bar-fill{
  height:100%;border-radius:10rem;
  background:linear-gradient(90deg,#e81f76,#cddd00,#e81f76);
  background-size:200% 100%;
  animation:preBarSlide 2.8s cubic-bezier(.4,0,.2,1) forwards, preShimmer 1.2s linear .2s infinite;
}
.pre-hint{font-family:'Poppins',sans-serif;font-size:1.2rem;font-weight:500;color:rgba(255,255,255,.4);text-align:center;letter-spacing:.12em;text-transform:uppercase}

/* Orbiting dots */
.pre-orbit-wrap{
  position:relative;width:9rem;height:9rem;
  animation:preLogoIn .5s .05s ease both;
}
.pre-orbit-center{
  position:absolute;inset:50%;transform:translate(-50%,-50%);
  width:2.4rem;height:2.4rem;border-radius:50%;
  background:linear-gradient(135deg,#e81f76,#c4145f);
  box-shadow:0 0 18px rgba(232,31,118,.6);
}
.pre-orbit-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.07);
}
.pre-dot{position:absolute;width:1rem;height:1rem;border-radius:50%;top:50%;left:50%;margin:-0.5rem;}
.pre-dot-1{background:#e81f76;box-shadow:0 0 8px rgba(232,31,118,.8);animation:preOrbit1 1.6s linear infinite}
.pre-dot-2{background:#cddd00;box-shadow:0 0 8px rgba(205,221,0,.8);animation:preOrbit2 2.2s linear infinite}
.pre-dot-3{background:#fff;opacity:.6;animation:preOrbit3 2.8s linear infinite}

/* Keyframes */
@keyframes preLogoIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes prePulse{0%,100%{box-shadow:0 0 0 0 rgba(232,31,118,.5)}70%{box-shadow:0 0 0 14px rgba(232,31,118,0)}}
@keyframes preBarSlide{
  0%{width:0%}
  30%{width:45%}
  60%{width:72%}
  85%{width:90%}
  100%{width:100%}
}
@keyframes preShimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
@keyframes preOrbit1{
  from{transform:rotate(0deg) translateX(3.8rem) rotate(0deg)}
  to{transform:rotate(360deg) translateX(3.8rem) rotate(-360deg)}
}
@keyframes preOrbit2{
  from{transform:rotate(120deg) translateX(3.2rem) rotate(-120deg)}
  to{transform:rotate(480deg) translateX(3.2rem) rotate(-480deg)}
}
@keyframes preOrbit3{
  from{transform:rotate(240deg) translateX(4.2rem) rotate(-240deg)}
  to{transform:rotate(600deg) translateX(4.2rem) rotate(-600deg)}
}

/* Cycling tabs */
.pre-tabs{
  display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;
  max-width:42rem;
  animation:preLogoIn .5s .3s ease both;
}
.pre-tab{
  font-family:'Poppins',sans-serif;
  font-size:1.15rem;font-weight:600;
  padding:.55rem 1.5rem;
  border-radius:10rem;
  border:1.5px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.3);
  background:rgba(255,255,255,.04);
  letter-spacing:.02em;
  transition:color .35s,background .35s,border-color .35s,box-shadow .35s,transform .3s;
  cursor:default;
}
.pre-tab.active{
  color:#fff;
  background:rgba(232,31,118,.18);
  border-color:rgba(232,31,118,.65);
  box-shadow:0 0 16px rgba(232,31,118,.28);
  transform:translateY(-2px);
}

/* Lock scroll while loading */
body.loading{overflow:hidden}