/* Shared by the HTML boot shell and React loader so the handoff keeps the same layout. */
.dimension-loading {
  position: fixed;
  inset: 0;
  z-index: 9000;
  box-sizing: border-box;
  overflow: hidden;
  pointer-events: auto;
  background: #040410 url('/brand/loading-background.png') center / cover no-repeat;
  color: #fff;
  font-family: Arial, sans-serif;
  text-align: center;
}

.dimension-loading__brand {
  position: absolute;
  top: 23.8%;
  left: 50%;
  width: max-content;
  max-width: 94%;
  transform: translateX(-50%);
}

:is(#root, .app) .dimension-loading__logo,
.dimension-loading__logo {
  display: block;
  width: min(40vh, 70vw, 425px);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  transform: translateY(var(--loading-float, 0px));
  filter: drop-shadow(0 0 var(--loading-glow, 10px) rgba(255, 0, 76, .23));
}

.dimension-loading .dimension-loading__title {
  margin: 1.5vh 0 0;
  color: #fff;
  font: 700 min(3.76vh, 8vw, 40px) / 1.2 Arial, sans-serif;
  letter-spacing: normal;
}

.dimension-loading__title span { color: #ff004c; }

.dimension-loading__status,
.dimension-loading__failure {
  position: absolute;
  bottom: 7.5%;
  left: 50%;
  box-sizing: border-box;
  width: min(92%, 640px);
  margin: 0;
  transform: translateX(-50%);
  font: 400 clamp(16px, 2.45vh, 26px) / 1.3 Arial, sans-serif;
}

.dimension-loading__failure p { margin: 0 0 16px; }
.dimension-loading__failure button {
  min-height: 44px;
  padding: 10px 24px;
  border: 1px solid #ff004c;
  border-radius: 4px;
  background: #b50036;
  color: #fff;
  font: 600 16px / 1.3 Arial, sans-serif;
  cursor: pointer;
}
.dimension-loading__failure button:hover { background: #d90041; }
.dimension-loading__failure button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.boot-shell { z-index: 10000; }
#root:not(:empty) + .boot-shell { display: none; }

.dimension-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--loading-dust-opacity, .25);
  transform: translateY(var(--loading-dust-y, 24px));
  background:
    radial-gradient(circle at 18% 62%, #ff6b83 0 1px, transparent 2px),
    radial-gradient(circle at 26% 28%, #ffbecb 0 1px, transparent 2px),
    radial-gradient(circle at 34% 77%, #ff004c 0 1px, transparent 3px),
    radial-gradient(circle at 43% 16%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 53% 84%, #ff6b83 0 1px, transparent 3px),
    radial-gradient(circle at 64% 31%, #ff004c 0 1px, transparent 2px),
    radial-gradient(circle at 73% 67%, #ffbecb 0 1px, transparent 2px),
    radial-gradient(circle at 86% 42%, #ff6b83 0 1px, transparent 3px);
}
.dimension-loading__status { opacity: var(--loading-status-opacity, 1); }
.dimension-loading__status::before {
  content: '';
  display: inline-block;
  box-sizing: border-box;
  width: .8em;
  height: .8em;
  margin-right: .6em;
  border: 2px solid rgba(255, 255, 255, .25);
  border-top-color: #ff004c;
  border-radius: 50%;
  vertical-align: -.05em;
  animation: dimension-loading-spin 1s linear infinite;
}
@keyframes dimension-loading-spin { to { transform: rotate(360deg); } }
@keyframes dimension-loading-signal { 50% { opacity: .3; } }

@media (prefers-reduced-motion: reduce) {
  :is(#root, .app) .dimension-loading__logo,
  .dimension-loading__logo { transform: none; filter: none; }
  .dimension-loading::before { transform: none; opacity: .25; }
  .dimension-loading__status { opacity: 1; }
  .dimension-loading__status::before {
    transform: none;
    animation: dimension-loading-signal 1.8s ease-in-out infinite;
  }
}