.novaris-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 18%, rgba(66, 139, 255, .18), transparent 36rem),
    radial-gradient(circle at 45% 58%, rgba(104, 215, 255, .08), transparent 34rem),
    linear-gradient(180deg, #071221 0%, #050a12 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity .38s ease, visibility .38s ease;
}
.novaris-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-panel {
  width: min(980px, 92vw);
  min-height: 440px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 1.25rem;
  padding: clamp(2rem, 5vw, 4.5rem);
  border: 1px solid rgba(92, 156, 255, .35);
  border-radius: 54px;
  background:
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(135deg, rgba(8, 19, 36, .92), rgba(4, 10, 21, .82));
  background-size: 54px 54px, 54px 54px, auto;
  box-shadow:
    0 40px 110px rgba(0,0,0,.56),
    inset 0 0 80px rgba(55, 136, 255, .055),
    0 0 0 1px rgba(104,215,255,.04);
}
.loader-planet {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  position: relative;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.98) 0 5%, transparent 6%),
    radial-gradient(circle at 42% 40%, #4ab4ff 0 16%, transparent 17%),
    radial-gradient(circle at 58% 38%, #2f7ed1 0 22%, transparent 23%),
    radial-gradient(circle at 43% 58%, #69b56e 0 13%, transparent 14%),
    radial-gradient(circle at 66% 62%, #d6b16f 0 10%, transparent 11%),
    radial-gradient(circle at 50% 50%, #143b86 0 58%, #061a49 70%, #020915 100%);
  box-shadow:
    0 0 0 5px rgba(190, 228, 255, .64),
    0 0 38px rgba(104, 188, 255, .95),
    0 0 92px rgba(80, 142, 255, .32);
}
.loader-planet::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px solid rgba(194, 232, 255, .54);
}
.loader-kicker {
  margin-top: 1rem;
  color: #ffe083;
  font-weight: 900;
  letter-spacing: .46em;
  font-size: clamp(.88rem, 1.6vw, 1.08rem);
}
.loader-title {
  text-align: center;
  font-weight: 950;
  letter-spacing: -.055em;
  line-height: .98;
  font-size: clamp(3rem, 6vw, 5.6rem);
  text-shadow: 0 0 40px rgba(210, 234, 255, .12);
}
.loader-subtitle {
  color: #c8d6e8;
  text-align: center;
  font-size: clamp(1.25rem, 2vw, 1.9rem);
}
.loader-bar {
  width: min(760px, 78vw);
  height: 13px;
  margin-top: 1.1rem;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(104, 160, 255, .18);
  background: rgba(255,255,255,.09);
  box-shadow: inset 0 0 18px rgba(0,0,0,.4);
}
.loader-bar span {
  display: block;
  width: 68%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(61, 116, 215, .25), #6de4ff 42%, #ffda72 100%);
  animation: novarisLoaderPulse 1.45s ease-in-out infinite alternate;
  box-shadow: 0 0 24px rgba(122, 225, 255, .32);
}
@keyframes novarisLoaderPulse {
  from { transform: translateX(-18%); filter: brightness(.9); }
  to { transform: translateX(48%); filter: brightness(1.12); }
}
@media (max-width: 720px) {
  .loader-panel { min-height: 360px; border-radius: 34px; }
  .loader-planet { width: 74px; height: 74px; }
  .loader-kicker { letter-spacing: .32em; }
}
@media (prefers-reduced-motion: reduce) {
  .loader-bar span { animation: none; transform: translateX(0); }
  .novaris-loader { transition: none; }
}
