/* ═══════════════════════════════════════════════════════════════════════════
   PROJECT NEXUS · PRELOADER  (nexus.png full-screen + live display window)
   The .nxp-screen element is positioned by master-loader.js at the exact
   pixel rect of the folder's glowing display (798.5,449 · 174×133 in the
   1408×768 source) through the object-fit:cover transform, so the live UI
   sits precisely where the baked "17%" screen is — covering it completely.
   All inner sizing is in em: the loader sets font-size = 16px × cover-scale,
   so typography, ring and glow scale 1:1 with the photograph.
   ═══════════════════════════════════════════════════════════════════════════ */

html.nxp-lock, html.nxp-lock body { overflow: hidden !important; }

.nxp {
  position: fixed; inset: 0; z-index: 2147483000;
  background: #0b0f16;
  opacity: 1; visibility: visible;
  transition: opacity .85s cubic-bezier(.4, 0, .2, 1), visibility .85s;
  contain: strict;
  font-family: "SF Mono", "JetBrains Mono", "Roboto Mono", Consolas, "Courier New", monospace;
  -webkit-user-select: none; user-select: none; cursor: progress;
}
.nxp.nxp-out { opacity: 0; }
.nxp.nxp-hidden { visibility: hidden; pointer-events: none; }

.nxp-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block; pointer-events: none;
}

/* soft cool veil so the photo reads calm while numbers run */
.nxp-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 42%, rgba(6, 10, 18, .28) 100%),
    linear-gradient(180deg, rgba(6, 10, 18, .12), transparent 30%, transparent 72%, rgba(6, 10, 18, .22));
}

/* ── the live display window (replaces the baked "17%" screen) ── */
.nxp-screen {
  position: absolute;                       /* left/top/width/height set by JS */
  transform-origin: 50% 50%;
  border-radius: .55em;
  background:
    radial-gradient(130% 100% at 50% 0%, #10233a 0%, #0a1626 46%, #060d18 100%);
  box-shadow:
    inset 0 0 .9em rgba(0, 0, 0, .75),
    inset 0 .06em 0 rgba(140, 200, 255, .18),
    0 0 1.1em rgba(64, 156, 255, .38),
    0 0 2.6em rgba(64, 156, 255, .16);
  outline: 1px solid rgba(120, 190, 255, .28);
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: .5em .55em .42em;
  z-index: 2;
}
.nxp-scan {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(180deg, rgba(160, 210, 255, .045) 0 1px, transparent 1px 3px);
}
.nxp-recover .nxp-screen { outline-color: rgba(255, 190, 120, .4); }

/* status line — matches the baked "INITIALIZING PRE-FLIGHT..." strip */
.nxp-status {
  font-size: .5em; letter-spacing: .14em; font-weight: 700;
  color: #cfe7ff; text-transform: uppercase; white-space: nowrap;
  text-shadow: 0 0 .7em rgba(90, 180, 255, .9), 0 0 .1em rgba(190, 230, 255, .8);
  animation: nxp-status-breathe 2.6s ease-in-out infinite;
}
@keyframes nxp-status-breathe { 0%, 100% { opacity: .92; } 50% { opacity: .62; } }

/* ring + percentage core */
.nxp-core { position: relative; display: grid; place-items: center; flex: 1 1 auto; width: 100%; min-height: 0; }
.nxp-ring { position: absolute; height: 92%; aspect-ratio: 1; transform: rotate(112deg); }
.nxp-ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.nxp-ring-track { stroke: rgba(120, 170, 220, .16); }
.nxp-ring-arc {
  stroke: #9fd8ff;
  filter: drop-shadow(0 0 .22em rgba(120, 205, 255, .95)) drop-shadow(0 0 .6em rgba(70, 160, 255, .55));
  transition: stroke-dashoffset .18s linear;
}
.nxp-pct {
  position: relative; display: flex; align-items: baseline; gap: .04em;
  font-size: 1.55em; font-weight: 600; letter-spacing: -.01em;
  color: #eaf6ff;
  text-shadow: 0 0 .5em rgba(110, 195, 255, .95), 0 0 1.2em rgba(70, 160, 255, .5), 0 .04em .1em rgba(0, 0, 0, .6);
  font-variant-numeric: tabular-nums;
}
.nxp-pct-sym { font-size: .62em; font-weight: 500; opacity: .95; }
.nxp-cursor {
  position: absolute; left: 50%; bottom: -.34em; transform: translateX(-50%);
  width: 1.05em; height: .07em; border-radius: 1em; background: #bfe4ff;
  box-shadow: 0 0 .5em rgba(120, 205, 255, .9);
  animation: nxp-cursor-blink 1.1s steps(1) infinite;
}
@keyframes nxp-cursor-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .18; } }

/* bottom micro-ticker — same wording family as the baked caption, kept legible */
.nxp-ticker {
  width: 100%; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.nxp-ticker-track {
  display: inline-block; white-space: nowrap;
  font-size: .34em; font-weight: 700; letter-spacing: .18em;
  color: rgba(190, 224, 255, .85);
  text-shadow: 0 0 .6em rgba(90, 180, 255, .7);
  animation: nxp-ticker-run 16s linear infinite;
  will-change: transform;
}
@keyframes nxp-ticker-run { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* READY flash */
.nxp-ready .nxp-status { color: #d9ffe9; text-shadow: 0 0 .7em rgba(120, 255, 190, .95); animation: none; }
.nxp-ready .nxp-ring-arc { stroke: #a8ffd4; filter: drop-shadow(0 0 .3em rgba(140, 255, 200, .95)) drop-shadow(0 0 .7em rgba(80, 220, 160, .55)); }
.nxp-ready .nxp-pct { text-shadow: 0 0 .5em rgba(140, 255, 200, .95), 0 0 1.2em rgba(80, 220, 160, .5); }

/* runtime recovery variant */
.nxp-recover .nxp-status { color: #ffe6c9; text-shadow: 0 0 .7em rgba(255, 190, 110, .9); }
.nxp-recover .nxp-ring-arc { stroke: #ffd9a8; filter: drop-shadow(0 0 .25em rgba(255, 200, 130, .9)); animation: nxp-recover-spin 1.1s linear infinite; stroke-dashoffset: 235 !important; }
@keyframes nxp-recover-spin { to { transform: rotate(472deg); } }

@media (prefers-reduced-motion: reduce) {
  .nxp { transition: opacity .2s linear; }
  .nxp-status, .nxp-cursor, .nxp-ticker-track, .nxp-recover .nxp-ring-arc { animation: none !important; }
}