html,
body {
  min-height: 100%;
  margin: 0;
  background: #111;
}

.app-loader {
  min-height: calc(100vh - 84px);
  min-height: calc(100svh - 84px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 18px;
  padding: 40px 24px;
  color: #f5f5f5;
  font-family: Arial, sans-serif;
}

.app-loader--boot {
  min-height: 100vh;
  min-height: 100svh;
}

.app-loader__visual {
  position: relative;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border: 1px solid #303030;
  border-radius: 50%;
  background: #171717;
}

.app-loader__orbit {
  position: absolute;
  inset: -6px;
  border: 1px solid transparent;
  border-top-color: #ff6a00;
  border-right-color: rgba(255, 106, 0, 0.25);
  border-radius: 50%;
  animation: loader-orbit 1.2s linear infinite;
}

.app-loader__visual svg {
  width: 48px;
  height: auto;
}

.app-loader__label {
  margin: 0;
  color: #b9b9b9;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.app-loader__progress {
  width: 132px;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: #303030;
}

.app-loader__progress span {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background: #ff6a00;
  animation: loader-progress 1.35s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes loader-orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes loader-progress {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(370%);
  }
}

@media (max-width: 700px) {
  .app-loader:not(.app-loader--boot) {
    min-height: calc(100vh - 120px);
    min-height: calc(100svh - 120px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-loader__orbit,
  .app-loader__progress span {
    animation: none;
  }
  .app-loader__progress span {
    width: 100%;
    opacity: 0.6;
    transform: none;
  }
}