/* =========================================================================
   Nexus VPN — brand mark + splash screen

   Restraint is the brief. The mark is the only thing that performs; the
   screen around it holds still. Strictly achromatic — the identity is
   polished metal on black, and any hue introduced here reads as decoration
   bolted onto someone else's logo.

   Motion budget for the whole splash: one entrance, one light sweep, one
   rise for the wordmark. Nothing loops except a drift slow enough that you
   notice it only if you stare.
   ========================================================================= */

/* --------------------------------------------------------------- mark ----- */

.nxb {
  --nxb-size: 216px;
  position: relative;
  width: var(--nxb-size);
  height: var(--nxb-size);
}

.nxb__art {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(0.94) translateY(10px);
  filter: blur(7px);
  will-change: transform, opacity, filter;
}

.nxb.is-in .nxb__art {
  animation: nxb-in 820ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Arrives from slightly soft and small — the way a lens pulls focus, rather
   than the pop-and-bounce that makes an intro feel cheap. */
@keyframes nxb-in {
  0%   { opacity: 0; transform: scale(0.94) translateY(10px); filter: blur(7px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1)    translateY(0);    filter: blur(0); }
}

.nxb__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
  /* Grounds the mark. The render already carries its own contact shadow, so
     this only has to seat it against the page. */
  filter: drop-shadow(0 20px 34px rgba(0, 0, 0, 0.9));
}

.nxb__sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(104deg,
      transparent 34%,
      rgba(255, 255, 255, 0.10) 44%,
      rgba(255, 255, 255, 0.62) 50%,
      rgba(255, 255, 255, 0.10) 56%,
      transparent 66%);
  background-size: 260% 100%;
  background-position: 130% 0;
  mix-blend-mode: screen;
}

.nxb.is-sweep .nxb__sheen {
  animation: nxb-sweep 1000ms cubic-bezier(0.35, 0, 0.2, 1) 1;
}

@keyframes nxb-sweep {
  0%   { opacity: 0; background-position: 130% 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; background-position: -40% 0; }
}

/* Idle: a drift of a few pixels over eight seconds. Enough that the screen
   isn't dead while a slow network finishes; not enough to call attention. */
.nxb.is-settled .nxb__art {
  animation: nxb-in 820ms cubic-bezier(0.16, 1, 0.3, 1) forwards,
             nxb-drift 8.5s ease-in-out 900ms infinite;
}

@keyframes nxb-drift {
  0%, 100% { transform: scale(1)     translateY(0); }
  50%      { transform: scale(1.012) translateY(-5px); }
}

/* --------------------------------------------------------- splash screen -- */

.nx-splash {
  --nx-progress: 0;
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  grid-template-rows: 1fr auto auto 1fr;
  place-items: center;
  gap: 34px;
  padding: 0 var(--pad, 20px);
  background: var(--bg, #050506);
  transition: opacity 480ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* One soft pool of light behind the mark. That is the whole background. */
.nx-splash::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(62% 44% at 50% 40%,
              rgba(255, 255, 255, 0.05), transparent 70%);
}

.nx-splash__mark { grid-row: 2; position: relative; }

/* ------------------------------------------------------------ wordmark ---- */

.nx-splash__word {
  grid-row: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  opacity: 0;
  transform: translateY(10px);
}

.nx-splash.is-word .nx-splash__word {
  animation: nx-rise 640ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes nx-rise {
  to { opacity: 1; transform: translateY(0); }
}

.nx-splash__word b {
  font: 600 clamp(20px, 5.4vw, 24px)/1 var(--font, sans-serif);
  letter-spacing: 0.30em;
  text-indent: 0.30em;               /* offset the trailing letter-space */
  text-transform: uppercase;
  color: #D9DFE8;                    /* silver — a step below the metal above */
}

.nx-splash__word i {
  font: 500 10px/1 var(--font, sans-serif);
  font-style: normal;
  letter-spacing: 0.44em;
  text-indent: 0.44em;
  text-transform: uppercase;
  color: rgba(217, 223, 232, 0.32);
}

/* -------------------------------------------------------------- loader ---- */

.nx-splash__bar {
  grid-row: 4;
  align-self: start;
  width: 104px;
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
  opacity: 0;
  transition: opacity 380ms ease 200ms;
}

.nx-splash.is-word .nx-splash__bar { opacity: 1; }

.nx-splash__bar i {
  display: block;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(var(--nx-progress, 0));
  background: rgba(233, 238, 245, 0.9);
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------- exit ---- */

.nx-splash.is-out {
  opacity: 0;
  pointer-events: none;
}