/* Boot curtain + G2 CSS loaders */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  color: #e5e7eb;
  background: #1a1a1a;
  opacity: 1;
  transition: opacity 280ms ease;
}
.boot-screen--leaving {
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .boot-screen { transition-duration: 1ms; }
}

.ui-loading {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: currentColor;
}

.ui-loading__text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ui-loading__indicator {
  display: inline-block;
  flex: none;
}

.ui-loading__indicator--corners {
  width: 35px;
  aspect-ratio: 1;
  --ui-loader-dot: no-repeat radial-gradient(farthest-side, currentColor 94%, #0000);
  background:
    var(--ui-loader-dot) 0 0,
    var(--ui-loader-dot) 100% 0,
    var(--ui-loader-dot) 100% 100%,
    var(--ui-loader-dot) 0 100%;
  background-size: 40% 40%;
  animation: ui-loading-corners 0.5s infinite;
}

.ui-loading__indicator--flip-dots {
  display: flex;
  height: 15px;
  aspect-ratio: 4;
  --ui-loader-dot: no-repeat radial-gradient(farthest-side, currentColor 90%, #0000);
  background:
    var(--ui-loader-dot) left,
    var(--ui-loader-dot) right;
  background-size: 25% 100%;
}

.ui-loading__indicator--flip-dots::before {
  flex: 1;
  background: inherit;
  animation: ui-loading-flip-dots 2s infinite;
  content: "";
}

.ui-loading__indicator--flip-track {
  display: grid;
  height: 15px;
  aspect-ratio: 5;
  animation: ui-loading-flip-track-flip 2s infinite linear;
}

.ui-loading__indicator--flip-track::before,
.ui-loading__indicator--flip-track::after {
  grid-area: 1 / 1;
  height: inherit;
  --ui-loader-dot: no-repeat radial-gradient(farthest-side, currentColor 94%, #0000);
  background:
    var(--ui-loader-dot) left,
    var(--ui-loader-dot) right;
  background-size: 15px 100%;
  animation: ui-loading-flip-track-run 1s infinite linear;
  content: "";
}

.ui-loading__indicator--flip-track::after {
  margin-left: auto;
  --ui-loader-direction: -1;
}

.ui-loading__indicator--matrix {
  width: 4px;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow:
    19px -19px 0 0,
    38px -19px 0 0,
    57px -19px 0 0,
    19px 0 0 5px,
    38px 0 0 5px,
    57px 0 0 5px,
    19px 19px 0 0,
    38px 19px 0 0,
    57px 19px 0 0;
  transform: translateX(-38px);
  animation: ui-loading-matrix 2s infinite linear;
}

.ui-loading__indicator--mid-bounce {
  position: relative;
  width: 50px;
  height: 12px;
  --ui-loader-dot: no-repeat radial-gradient(farthest-side, currentColor 94%, #0000);
  background:
    var(--ui-loader-dot) left,
    var(--ui-loader-dot) right;
  background-size: 12px 12px;
}

.ui-loading__indicator--mid-bounce::before {
  position: absolute;
  inset: 0;
  height: 12px;
  margin: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  animation:
    ui-loading-mid-bounce-shift 1s,
    ui-loading-mid-bounce-bounce 0.5s;
  animation-timing-function: cubic-bezier(0.5, -900, 0.5, 900);
  animation-iteration-count: infinite;
  content: "";
}

.ui-loading__indicator--mirror-run {
  display: flex;
  justify-content: space-between;
  height: 15px;
  aspect-ratio: 5;
  --ui-loader-dot: no-repeat radial-gradient(farthest-side, currentColor 95%, #0000);
  background: var(--ui-loader-dot), var(--ui-loader-dot);
  background-size: 20% 100%;
  animation: ui-loading-mirror-run-track 1s infinite;
}

.ui-loading__indicator--mirror-run::before,
.ui-loading__indicator--mirror-run::after {
  height: inherit;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  animation: ui-loading-mirror-run-dots 1s infinite;
  content: "";
}

.ui-loading__indicator--mirror-run::after {
  --ui-loader-scale: -1, -1;
}

.ui-loading__indicator--orbit {
  display: grid;
  height: 15px;
  aspect-ratio: 4;
  --ui-loader-dot: no-repeat radial-gradient(farthest-side, currentColor 90%, #0000);
  background:
    var(--ui-loader-dot) left,
    var(--ui-loader-dot) right;
  background-size: 25% 100%;
}

.ui-loading__indicator--orbit::before,
.ui-loading__indicator--orbit::after {
  grid-area: 1 / 1;
  height: inherit;
  margin: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  transform-origin: -100% 50%;
  background: currentColor;
  animation: ui-loading-orbit 1s infinite linear;
  content: "";
}

.ui-loading__indicator--orbit::after {
  --ui-loader-direction: -1;
  transform-origin: 200% 50%;
  animation-delay: -0.5s;
}

.ui-loading__indicator--satellite {
  display: grid;
  width: 17px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  animation: ui-loading-satellite-spin 2s infinite linear;
}

.ui-loading__indicator--satellite::before,
.ui-loading__indicator--satellite::after {
  grid-area: 1 / 1;
  margin: 15%;
  border-radius: 50%;
  transform: rotate(0deg) translate(150%);
  background: inherit;
  animation: ui-loading-satellite-orbit 1s infinite;
  content: "";
}

.ui-loading__indicator--satellite::after {
  animation-delay: -0.5s;
}

.ui-loading__indicator--tri-corners {
  width: 40px;
  aspect-ratio: 1.154;
  --ui-loader-dot: no-repeat radial-gradient(farthest-side, currentColor 90%, #0000);
  background:
    var(--ui-loader-dot) 50% 0,
    var(--ui-loader-dot) 0 100%,
    var(--ui-loader-dot) 100% 100%;
  background-size: 35% calc(35% * 1.154);
  animation: ui-loading-tri-corners 1s infinite;
}

.ui-loading__indicator--triangle {
  width: 35px;
  aspect-ratio: 1;
  --ui-loader-dot: no-repeat radial-gradient(circle closest-side, currentColor 90%, #0000);
  background:
    var(--ui-loader-dot) 0 0,
    var(--ui-loader-dot) 0 100%,
    var(--ui-loader-dot) 100% 100%;
  background-size: 40% 40%;
  animation: ui-loading-triangle 1s infinite linear;
}

@keyframes ui-loading-corners {
  100% {
    background-position:
      100% 0,
      100% 100%,
      0 100%,
      0 0;
  }
}

@keyframes ui-loading-flip-dots {
  0% {
    transform: translate(37.5%) rotate(0);
  }
  16.67% {
    transform: translate(37.5%) rotate(90deg);
  }
  33.33% {
    transform: translate(-37.5%) rotate(90deg);
  }
  50% {
    transform: translate(-37.5%) rotate(180deg);
  }
  66.67% {
    transform: translate(-37.5%) rotate(270deg);
  }
  83.33% {
    transform: translate(37.5%) rotate(270deg);
  }
  100% {
    transform: translate(37.5%) rotate(360deg);
  }
}

@keyframes ui-loading-flip-track-flip {
  0%,
  49.99% {
    transform: scaleY(1);
  }
  50%,
  100% {
    transform: scaleY(-1);
  }
}

@keyframes ui-loading-flip-track-run {
  0% {
    aspect-ratio: 2.3;
    transform: translate(0, calc(var(--ui-loader-direction, 1) * 0px));
  }
  33% {
    aspect-ratio: 2.3;
    transform: translate(0, calc(var(--ui-loader-direction, 1) * 8px));
  }
  66% {
    aspect-ratio: 3.7;
    transform: translate(
      calc(var(--ui-loader-direction, 1) * 19px),
      calc(var(--ui-loader-direction, 1) * 8px)
    );
  }
  100% {
    aspect-ratio: 3.7;
    transform: translate(
      calc(var(--ui-loader-direction, 1) * 19px),
      calc(var(--ui-loader-direction, 1) * 0px)
    );
  }
}

@keyframes ui-loading-matrix {
  12.5% {
    box-shadow:
      19px -19px 0 0,
      38px -19px 0 0,
      57px -19px 0 5px,
      19px 0 0 5px,
      38px 0 0 0,
      57px 0 0 5px,
      19px 19px 0 0,
      38px 19px 0 0,
      57px 19px 0 0;
  }
  25% {
    box-shadow:
      19px -19px 0 5px,
      38px -19px 0 0,
      57px -19px 0 5px,
      19px 0 0 0,
      38px 0 0 0,
      57px 0 0 0,
      19px 19px 0 0,
      38px 19px 0 5px,
      57px 19px 0 0;
  }
  50% {
    box-shadow:
      19px -19px 0 5px,
      38px -19px 0 5px,
      57px -19px 0 0,
      19px 0 0 0,
      38px 0 0 0,
      57px 0 0 0,
      19px 19px 0 0,
      38px 19px 0 0,
      57px 19px 0 5px;
  }
  62.5% {
    box-shadow:
      19px -19px 0 0,
      38px -19px 0 0,
      57px -19px 0 0,
      19px 0 0 5px,
      38px 0 0 0,
      57px 0 0 0,
      19px 19px 0 0,
      38px 19px 0 5px,
      57px 19px 0 5px;
  }
  75% {
    box-shadow:
      19px -19px 0 0,
      38px -19px 0 5px,
      57px -19px 0 0,
      19px 0 0 0,
      38px 0 0 0,
      57px 0 0 5px,
      19px 19px 0 0,
      38px 19px 0 0,
      57px 19px 0 5px;
  }
  87.5% {
    box-shadow:
      19px -19px 0 0,
      38px -19px 0 5px,
      57px -19px 0 0,
      19px 0 0 0,
      38px 0 0 5px,
      57px 0 0 0,
      19px 19px 0 5px,
      38px 19px 0 0,
      57px 19px 0 0;
  }
}

@keyframes ui-loading-mid-bounce-shift {
  100% {
    transform: translate(0.12px);
  }
}

@keyframes ui-loading-mid-bounce-bounce {
  100% {
    inset: -0.15px 0 0;
  }
}

@keyframes ui-loading-mirror-run-track {
  0%,
  60% {
    background-position:
      calc(1 * 100% / 3) 0,
      calc(2 * 100% / 3) 0;
  }
  100% {
    background-position:
      calc(0 * 100% / 3) 0,
      calc(3 * 100% / 3) 0;
  }
}

@keyframes ui-loading-mirror-run-dots {
  0% {
    transform: scale(var(--ui-loader-scale, 1)) translate(0, 0);
  }
  33% {
    transform: scale(var(--ui-loader-scale, 1)) translate(0, 130%);
  }
  66% {
    transform: scale(var(--ui-loader-scale, 1))
      translate(calc(400% / 3), 130%);
  }
  100% {
    transform: scale(var(--ui-loader-scale, 1))
      translate(calc(400% / 3), 0);
  }
}

@keyframes ui-loading-orbit {
  58%,
  100% {
    transform: rotate(calc(var(--ui-loader-direction, 1) * 1turn));
  }
}

@keyframes ui-loading-satellite-spin {
  100% {
    transform: rotate(1turn);
  }
}

@keyframes ui-loading-satellite-orbit {
  100% {
    transform: rotate(1turn) translate(150%);
  }
}

@keyframes ui-loading-tri-corners {
  50%,
  100% {
    background-position:
      100% 100%,
      50% 0,
      0 100%;
  }
}

@keyframes ui-loading-triangle {
  25% {
    background-position:
      100% 0,
      0 100%,
      100% 100%;
  }
  50% {
    background-position:
      100% 0,
      0 0,
      100% 100%;
  }
  75% {
    background-position:
      100% 0,
      0 0,
      0 100%;
  }
  100% {
    background-position:
      100% 100%,
      0 0,
      0 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-loading__indicator,
  .ui-loading__indicator::before,
  .ui-loading__indicator::after {
    animation: none;
  }
}