/* ─── PRELOADER : NUVEX PRO TECH ANIMATION ──── */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, #001a2e 0%, #000814 55%, #00040a 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preloader::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0, 255, 255, 0.10) 0%, transparent 55%);
  pointer-events: none;
  animation: nxAmbientPulse 3.6s 1.4s ease-in-out infinite;
  opacity: 0;
}
@keyframes nxAmbientPulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

#preloaderParticles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.preloader-content {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nuvex-stage {
  position: relative;
  width: clamp(280px, 38vw, 440px);
  aspect-ratio: 1 / 1.05;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ── Tech rings ─────────────────────────────── */
.nx-rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.5));
  opacity: 0;
  animation: nxRingsIn 0.8s 0.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes nxRingsIn {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}
.nx-ring {
  transform-origin: 100px 100px;
  transform-box: fill-box;
}
.nx-ring-1 { animation: nxSpin 18s linear infinite; }
.nx-ring-2 { animation: nxSpin 24s linear infinite reverse; }
.nx-ring-3 { animation: nxSpin 9s  linear infinite; }
@keyframes nxSpin {
  to { transform: rotate(360deg); }
}
.nx-ring-tick {
  filter: drop-shadow(0 0 4px #00FFFF);
  animation: nxBlink 1.6s ease-in-out infinite;
}
.nx-ring-tick:nth-of-type(2) { animation-delay: 0.4s; }
.nx-ring-tick:nth-of-type(3) { animation-delay: 0.8s; }
.nx-ring-tick:nth-of-type(4) { animation-delay: 1.2s; }
@keyframes nxBlink {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

/* ── Corner brackets ────────────────────────── */
.nx-bracket {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 1.5px solid #00FFFF;
  filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.7));
  z-index: 2;
  opacity: 0;
  animation: nxBracketIn 0.5s 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.br-tl { top: 6%;    left: 6%;   border-right: none;  border-bottom: none; }
.br-tr { top: 6%;    right: 6%;  border-left: none;   border-bottom: none; animation-delay: 0.7s; }
.br-bl { bottom: 18%; left: 6%;  border-right: none;  border-top: none;    animation-delay: 0.8s; }
.br-br { bottom: 18%; right: 6%; border-left: none;   border-top: none;    animation-delay: 0.9s; }
@keyframes nxBracketIn {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Logo frame + scan reveal ───────────────── */
.nx-logo-frame {
  position: relative;
  width: 62%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transform: translateY(-4%);
}
.nx-logo-img {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  filter: drop-shadow(0 0 0 rgba(0, 255, 255, 0));
  animation:
    nxLogoIn   0.9s 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    nxLogoGlow 1.6s 1.5s ease-out 1 forwards,
    nxGlitch   3.6s 2.5s steps(1) infinite;
}
.nx-logo-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  clip-path: inset(0 0 100% 0);
  animation: nxClipReveal 1.1s 0.85s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes nxClipReveal {
  0%   { clip-path: inset(0 0 100% 0); }
  100% { clip-path: inset(0 0 0% 0);   }
}
@keyframes nxLogoIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes nxLogoGlow {
  0%   { filter: drop-shadow(0 0 0 rgba(0,255,255,0)); }
  40%  { filter: drop-shadow(0 0 28px rgba(0,255,255,0.95)) drop-shadow(0 0 56px rgba(0,255,255,0.55)); }
  100% { filter: drop-shadow(0 0 14px rgba(0,255,255,0.55)) drop-shadow(0 0 28px rgba(0,255,255,0.25)); }
}
@keyframes nxGlitch {
  0%, 96%, 100% { transform: translate(0, 0); }
  97%           { transform: translate(-2px, 1px); filter: hue-rotate(20deg); }
  98%           { transform: translate(2px, -1px); }
  99%           { transform: translate(-1px, 0); }
}

/* Scan line that swipes across the logo on entry */
.nx-scan {
  position: absolute;
  left: -4%;
  right: -4%;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00FFFF 50%, transparent);
  box-shadow: 0 0 12px #00FFFF, 0 0 24px rgba(0, 255, 255, 0.6);
  opacity: 0;
  z-index: 3;
  animation: nxScan 1.4s 0.7s cubic-bezier(0.65, 0, 0.35, 1) 1 forwards;
}
@keyframes nxScan {
  0%   { top: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ── Status meta block ──────────────────────── */
.nx-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 2;
  opacity: 0;
  animation: nxMetaIn 0.6s 2.1s ease forwards;
}
@keyframes nxMetaIn {
  to { opacity: 1; }
}

.nx-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', 'DM Mono', ui-monospace, monospace;
  font-size: clamp(9px, 1.1vw, 11px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #FFFFFF 0%, #B0F4FF 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nx-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00FFFF;
  box-shadow: 0 0 8px #00FFFF, 0 0 16px rgba(0, 255, 255, 0.7);
  animation: nxBlink 1.2s ease-in-out infinite;
}
.nx-status-text::after {
  content: "_";
  margin-left: 2px;
  animation: nxBlink 0.7s steps(1) infinite;
  -webkit-text-fill-color: #00FFFF;
}

.nx-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: clamp(180px, 22vw, 240px);
}
.nx-progress {
  flex: 1;
  height: 2px;
  background: rgba(0, 255, 255, 0.12);
  position: relative;
  overflow: hidden;
}
.nx-progress::before,
.nx-progress::after {
  content: "";
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: rgba(0, 255, 255, 0.5);
}
.nx-progress::before { left: 0; }
.nx-progress::after  { right: 0; }
.nx-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #FFFFFF, #00FFFF);
  box-shadow: 0 0 10px #00FFFF, 0 0 20px rgba(0, 255, 255, 0.6);
  transition: width 0.12s linear;
}
.nx-progress-num {
  font-family: 'JetBrains Mono', 'DM Mono', ui-monospace, monospace;
  font-size: clamp(10px, 1.2vw, 12px);
  font-weight: 600;
  color: #B0F4FF;
  min-width: 28px;
  text-align: right;
  letter-spacing: 0.08em;
}

/* ── Exit ───────────────────────────────────── */
.preloader.exit {
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.7s cubic-bezier(0.65, 0, 0.35, 1),
              transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.preloader.exit .nuvex-stage {
  filter: blur(6px);
  transition: filter 0.6s ease;
}
.preloader.done {
  pointer-events: none;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .nx-rings, .nx-bracket, .nx-logo-img, .nx-logo-img img, .nx-scan,
  .nx-meta, .nx-status-dot, .nx-ring-tick, .nx-ring-1, .nx-ring-2, .nx-ring-3,
  .preloader::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
  }
  .nx-logo-img, .nx-meta, .nx-rings, .nx-bracket { opacity: 1 !important; }
  .nx-logo-img img { -webkit-mask-image: none; mask-image: none; }
}