/**
 * Noribel loading overlay — brand skin.
 * Tokens from Design System (applyDs): --nor-load-* and data-ds-load.
 * Load AFTER main / race CSS.
 */

/* ── Backdrop styles (universal) ── */
.noribel-loading-overlay,
.noribel-loading-overlay--light,
.noribel-loading-overlay--dark {
  background: var(
    --nor-load-bg,
    linear-gradient(140deg, #2a86bd 0%, #1c6c9e 50%, #134b70 100%)
  );
  color: #ffffff;
}

html[data-ds-load='brand'] {
  --nor-load-bg: linear-gradient(
    140deg,
    color-mix(in srgb, var(--noribel-blue, #42abe0) 70%, #2a86bd) 0%,
    var(--noribel-marine, #1c6c9e) 50%,
    color-mix(in srgb, var(--noribel-marine, #1c6c9e) 70%, #0b2233) 100%
  );
}

html[data-ds-load='solid'] {
  --nor-load-bg: var(--noribel-marine, #1c6c9e);
}

html[data-ds-load='light'] {
  --nor-load-bg: var(--bg-subtle, #f0f5fb);
}

html[data-ds-load='light'] .noribel-loading-overlay,
html[data-ds-load='light'] .noribel-loading-overlay--light,
html[data-ds-load='light'] .noribel-loading-overlay--dark {
  color: var(--noribel-night, #0b2233);
}

html[data-ds-load='light'] .noribel-loading-overlay__message,
html[data-ds-load='light'] .noribel-loading-overlay--dark .noribel-loading-overlay__message {
  color: var(--text, #0f1222);
}

html[data-ds-load='light'] .noribel-loading-overlay__submessage,
html[data-ds-load='light'] .noribel-loading-overlay--dark .noribel-loading-overlay__submessage {
  color: var(--text-muted, #5c6178);
}

html[data-ds-load='light'] .noribel-loading-overlay__logo-wrap {
  filter: none;
}

html[data-ds-load='light'] .noribel-loading-overlay__spinner,
html[data-ds-load='light'] .noribel-loading-overlay--dark .noribel-loading-overlay__spinner {
  border-color: rgba(28, 108, 158, 0.16);
  border-top-color: var(--nor-load-ring, var(--noribel-sky, #8ec7ed));
}

html[data-ds-load='blur'] {
  --nor-load-bg: color-mix(in srgb, var(--noribel-marine, #1c6c9e) 82%, transparent);
}

.noribel-loading-overlay--transparent,
.noribel-loading-overlay--light.noribel-loading-overlay--transparent,
.noribel-loading-overlay--dark.noribel-loading-overlay--transparent,
html[data-ds-load='blur'] .noribel-loading-overlay {
  background: var(
    --nor-load-bg,
    rgba(28, 108, 158, 0.82)
  );
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── Stack ── */
.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 ring ── */
.noribel-loading-overlay__spinner,
.noribel-loading-overlay--dark .noribel-loading-overlay__spinner {
  display: block;
  width: var(--nor-load-spin, 52px);
  height: var(--nor-load-spin, 52px);
  margin: 0;
  gap: 0;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.16);
  border-top-color: var(--nor-load-ring, #8ec7ed);
  animation: noribelLoadingSpin var(--nor-load-speed, 850ms) linear infinite;
}
.noribel-loading-overlay__spinner > span {
  display: none;
}

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

/* ── Logo wordmark ── */
.noribel-loading-overlay__logo-wrap {
  display: var(--nor-load-logo-display, block);
  width: 176px;
  height: 28px;
  background: var(--nor-load-logo, url("/noribel-logo-long.png")) center / contain no-repeat;
  filter: brightness(0) invert(1);
}
.noribel-loading-overlay__logo,
.noribel-loading-overlay__pulse {
  display: none;
}

.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: panel / inline ── */
.noribel-loading-overlay--compact .noribel-loading-overlay__spinner {
  width: var(--nor-load-spin-sm, 22px);
  height: var(--nor-load-spin-sm, 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; }
}