/**
 * Noribel loading overlay — brand skin (2026-09-05).
 * Blue Noribel backdrop, spinning sky-blue ring, white Noribel wordmark below.
 * Overrides the indigo defaults in main-*.css / race-page.css and the inline
 * copy in login.html. Load AFTER those.
 */

/* ── Backdrop: always Noribel blue, light and dark theme alike ── */
.noribel-loading-overlay,
.noribel-loading-overlay--light,
.noribel-loading-overlay--dark {
  background: linear-gradient(140deg, #2a86bd 0%, #1c6c9e 50%, #134b70 100%);
  color: #ffffff;
}
.noribel-loading-overlay--transparent,
.noribel-loading-overlay--light.noribel-loading-overlay--transparent,
.noribel-loading-overlay--dark.noribel-loading-overlay--transparent {
  background: rgba(28, 108, 158, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── Stack: ring on top, wordmark under it, message last ── */
.noribel-loading-overlay__inner {
  gap: 18px;
}
.noribel-loading-overlay__spinner { order: 1; }
.noribel-loading-overlay__logo-wrap { order: 2; }
.noribel-loading-overlay__message { order: 3; }
.noribel-loading-overlay__submessage { order: 4; }

/* ── Spinner: the three dots become one spinning ring ── */
.noribel-loading-overlay__spinner,
.noribel-loading-overlay--dark .noribel-loading-overlay__spinner {
  display: block;
  width: 52px;
  height: 52px;
  margin: 0;
  gap: 0;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.16);
  border-top-color: #8ec7ed;
  animation: noribelLoadingSpin 0.85s linear infinite;
}
.noribel-loading-overlay__spinner > span {
  display: none;
}

@keyframes noribelLoadingSpin {
  to { transform: rotate(360deg); }
}

/* ── Logo: the square mark box becomes the Noribel wordmark, in white ── */
.noribel-loading-overlay__logo-wrap {
  width: 176px;
  height: 28px;
  background: url("/noribel-logo-long.png") center / contain no-repeat;
  filter: brightness(0) invert(1);
}
.noribel-loading-overlay__logo,
.noribel-loading-overlay__pulse {
  display: none;
}

/* ── Copy on blue ── */
.noribel-loading-overlay__message,
.noribel-loading-overlay--dark .noribel-loading-overlay__message {
  color: #ffffff;
}
.noribel-loading-overlay__submessage,
.noribel-loading-overlay--dark .noribel-loading-overlay__submessage {
  color: rgba(255, 255, 255, 0.74);
}

/* ── Compact variant: same ring, smaller, no wordmark ── */
.noribel-loading-overlay--compact .noribel-loading-overlay__spinner {
  width: 22px;
  height: 22px;
  border-width: 2.5px;
}
.noribel-loading-overlay--compact .noribel-loading-overlay__logo-wrap {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .noribel-loading-overlay__spinner { animation-duration: 2.4s; }
}