/* First-paint loader: keep account data from flashing stale solves or challenges. */
html.sc-startup-loading,
html.sc-startup-loading body {
  overflow: hidden;
}

#sc-startup-preloader {
  --loader-accent: #d9a48b;
  --loader-accent-bright: #ffe0ca;
  --loader-surface: #141210;
  align-items: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(217, 164, 139, .18), transparent 27rem),
    radial-gradient(circle at 8% 0%, rgba(105, 163, 197, .12), transparent 24rem),
    var(--loader-surface);
  color: #f8eee8;
  display: flex;
  flex-direction: column;
  inset: 0;
  justify-content: center;
  overflow: hidden;
  position: fixed;
  transition: opacity .32s cubic-bezier(.2, .75, .2, 1), visibility .32s;
  z-index: 2147483647;
}

.light-mode #sc-startup-preloader {
  --loader-accent: #8a5f4e;
  --loader-accent-bright: #5e3b2e;
  --loader-surface: #f6f1ed;
  color: #2c211d;
}

#sc-startup-preloader::before,
#sc-startup-preloader::after {
  border: 1px solid rgba(217, 164, 139, .17);
  border-radius: 50%;
  content: "";
  height: min(70vw, 38rem);
  position: absolute;
  pointer-events: none;
  width: min(70vw, 38rem);
  z-index: 0;
}

#sc-startup-preloader::before { animation: sc-loader-orbit 9s linear infinite; }
#sc-startup-preloader::after { animation: sc-loader-orbit 12s linear infinite reverse; height: min(52vw, 27rem); width: min(52vw, 27rem); }

.sc-startup-loader-content { align-items: center; display: flex; flex-direction: column; isolation: isolate; position: relative; z-index: 1; }
.sc-startup-lottie-cube { align-items: center; display: inline-flex; height: 128px; justify-content: center; margin: 0 0 18px; width: 128px; }
.sc-startup-lottie-cube svg { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--loader-accent) 58%, transparent)); max-height: 100%; max-width: 100%; }
.sc-startup-lottie-cube:empty::before { animation: sc-loader-placeholder 1.2s ease-in-out infinite alternate; background: var(--loader-accent); border-radius: 50%; box-shadow: 0 0 24px color-mix(in srgb, var(--loader-accent) 65%, transparent); content: ""; height: 18px; width: 18px; }
.sc-startup-lottie-cube.is-unavailable::before { animation: none; opacity: .55; }
.sc-startup-wordmark { font-family: "Orbitron", "Segoe UI", sans-serif; font-size: clamp(1.05rem, 2.5vw, 1.4rem); font-weight: 700; letter-spacing: .3em; margin-left: .3em; text-transform: uppercase; }
.sc-startup-status { color: var(--loader-accent-bright); font-size: .78rem; letter-spacing: .08em; margin: 13px 0 20px; min-height: 1.2em; text-align: center; }
.sc-startup-progress { background: color-mix(in srgb, var(--loader-accent) 19%, transparent); border-radius: 99px; height: 3px; overflow: hidden; width: min(13rem, 62vw); }
.sc-startup-progress > span { animation: sc-loader-progress 1.7s ease-in-out infinite; background: linear-gradient(90deg, transparent, var(--loader-accent-bright), transparent); display: block; height: 100%; transform: translateX(-100%); width: 55%; }
#sc-startup-preloader.is-finished { opacity: 0; pointer-events: none; visibility: hidden; }

@keyframes sc-loader-orbit { to { transform: rotate(360deg) scale(1.04); } }
@keyframes sc-loader-progress { 0% { transform: translateX(-110%); } 55%, 100% { transform: translateX(220%); } }
@keyframes sc-loader-placeholder { to { opacity: .35; transform: scale(.72); } }

/* The default preloader keeps its original palette. Every selected alternate
   theme receives its own surface, accent glow, typography, and progress bar. */
html[data-ui-theme]:not([data-ui-theme="default"]) #sc-startup-preloader {
  --loader-accent: var(--accent-color);
  --loader-accent-bright: var(--text-color);
  --loader-surface: var(--bg-color);
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--accent-color) 25%, transparent), transparent 27rem),
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent-color) 14%, transparent), transparent 24rem),
    var(--loader-surface);
  color: var(--text-color);
}

html[data-ui-theme]:not([data-ui-theme="default"]) #sc-startup-preloader::before,
html[data-ui-theme]:not([data-ui-theme="default"]) #sc-startup-preloader::after {
  border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
}

@media (max-width: 600px) {
  /* Keep the cube at the centre of the ambient rings. The reading order then
     continues below it, leaving the animation as the visual focal point. */
  #sc-startup-preloader::before,
  #sc-startup-preloader::after {
    inset: 0;
    margin: auto;
  }

  #sc-startup-preloader::before {
    height: min(70vw, 19rem);
    width: min(70vw, 19rem);
  }

  #sc-startup-preloader::after {
    height: min(53vw, 14.5rem);
    width: min(53vw, 14.5rem);
  }

  .sc-startup-loader-content {
    align-self: stretch;
    height: 100%;
    width: 100%;
  }

  .sc-startup-lottie-cube {
    height: 112px;
    left: 50%;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 112px;
  }

  .sc-startup-wordmark,
  .sc-startup-status,
  .sc-startup-progress {
    left: 50%;
    margin: 0;
    position: absolute;
    transform: translateX(-50%);
  }

  .sc-startup-wordmark {
    top: calc(50% + min(12.3rem, 28vh));
    white-space: nowrap;
  }

  .sc-startup-status {
    top: calc(50% + min(14.7rem, 33vh));
    white-space: nowrap;
  }

  .sc-startup-progress {
    top: calc(50% + min(17.4rem, 40vh));
    width: min(13rem, 62vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  #sc-startup-preloader::before, #sc-startup-preloader::after, .sc-startup-progress > span, .sc-startup-lottie-cube:empty::before { animation: none; }
}