:root {
  --loading-brand: var(--primary-color, #1769e0);
  --loading-accent: #ff6a2a;
  --loading-bg: #f5f8ff;
  --loading-ink: #17375f;
}

html,
body,
#app {
  min-width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  background: var(--loading-bg);
}

.loading-container {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 32px;
  color: var(--loading-ink);
  background:
    radial-gradient(circle at 50% 42%, rgb(31 121 239 / 10%), transparent 28%),
    var(--loading-bg);
  isolation: isolate;
}

.loading-brand {
  position: relative;
  display: grid;
  width: min(260px, 64vw);
  aspect-ratio: 1;
  place-items: center;
}

.loading-logo {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  shape-rendering: geometricPrecision;
}

.loading-logo__piece {
  opacity: 0.58;
  transform-box: fill-box;
  transform-origin: center;
  animation: loading-logo-flash 3.6s cubic-bezier(0.34, 0.01, 0.2, 1) infinite;
}

.loading-logo__piece--outer {
  animation-delay: 1.2s;
}

.loading-logo__piece--middle {
  animation-delay: 0s;
}

.loading-logo__piece--inner {
  animation-delay: 0.6s;
}

.loading-route {
  position: relative;
  display: flex;
  width: min(136px, 44vw);
  height: 14px;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
}

.loading-route::before {
  position: absolute;
  right: 7px;
  left: 7px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgb(23 105 224 / 16%), rgb(23 105 224 / 62%), rgb(255 106 42 / 46%));
  content: '';
}

.loading-route span {
  position: relative;
  z-index: 1;
  display: block;
  width: 9px;
  height: 9px;
  border: 2px solid var(--loading-bg);
  border-radius: 50%;
  background: #9fbce1;
  box-shadow: 0 0 0 3px rgb(23 105 224 / 8%);
  animation: loading-route-node 2.8s cubic-bezier(0.34, 0.01, 0.2, 1) infinite;
}

.loading-route span:nth-child(2) {
  animation-delay: 0.45s;
}

.loading-route span:nth-child(3) {
  background: var(--loading-accent);
  box-shadow: 0 0 0 3px rgb(255 106 42 / 10%);
  animation-delay: 0.9s;
}

.loading-route span:nth-child(4) {
  animation-delay: 1.35s;
}

.loading-title {
  margin-top: 18px;
  font-size: clamp(28px, 3.2vw, 34px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.08em;
  color: #17375f;
  text-align: center;
  text-shadow: 0 8px 24px rgb(23 55 95 / 12%);
}

html.dark body {
  background: #1e222a;
}

html.dark .loading-container {
  --loading-bg: #1e222a;
  --loading-ink: #e6f0ff;
  background:
    radial-gradient(circle at 50% 42%, rgb(42 126 244 / 17%), transparent 28%),
    #1e222a;
}

html.dark .loading-logo__piece--outer {
  fill: #1f5fa8;
}

html.dark .loading-logo__piece {
  opacity: 0.22;
  animation-name: loading-logo-flash-dark;
}

html.dark .loading-route span {
  border-color: var(--loading-bg);
  background: #5e8dcc;
}

html.dark .loading-route span:nth-child(3) {
  background: #ff7a45;
}

html.dark .loading-title {
  color: #f3f7ff;
  text-shadow: 0 8px 26px rgb(13 94 232 / 22%);
}

@keyframes loading-logo-flash {
  0%,
  100% {
    opacity: 0.58;
    transform: scale(0.965);
    filter: brightness(0.92) saturate(1.12) drop-shadow(0 0 0 transparent);
  }

  10% {
    opacity: 0.8;
    transform: scale(0.99);
    filter: brightness(1) saturate(1.18) drop-shadow(0 0 7px rgb(31 121 239 / 22%));
  }

  18%,
  26% {
    opacity: 1;
    transform: scale(1.045);
    filter: brightness(1.08) saturate(1.22) drop-shadow(0 0 16px rgb(31 121 239 / 42%));
  }

  40% {
    opacity: 0.82;
    transform: scale(0.995);
    filter: brightness(1) saturate(1.18) drop-shadow(0 0 8px rgb(31 121 239 / 22%));
  }

  68% {
    opacity: 0.54;
    transform: scale(0.965);
    filter: brightness(0.9) saturate(1.1) drop-shadow(0 0 0 transparent);
  }
}

@keyframes loading-logo-flash-dark {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(0.955);
    filter: brightness(0.68) saturate(0.9) drop-shadow(0 0 0 transparent);
  }

  10% {
    opacity: 0.46;
    transform: scale(0.985);
    filter: brightness(0.95) saturate(1.05) drop-shadow(0 0 8px rgb(31 121 239 / 30%));
  }

  18%,
  26% {
    opacity: 1;
    transform: scale(1.055);
    filter: brightness(1.55) saturate(1.45) drop-shadow(0 0 22px rgb(31 121 239 / 72%));
  }

  40% {
    opacity: 0.48;
    transform: scale(0.99);
    filter: brightness(0.98) saturate(1.08) drop-shadow(0 0 9px rgb(31 121 239 / 28%));
  }

  68% {
    opacity: 0.18;
    transform: scale(0.955);
    filter: brightness(0.62) saturate(0.86) drop-shadow(0 0 0 transparent);
  }
}

@keyframes loading-route-node {
  0%,
  100% {
    opacity: 0.38;
    background: #5e8dcc;
    transform: scale(0.68);
    box-shadow: 0 0 0 3px rgb(23 105 224 / 8%);
  }

  16%,
  26% {
    opacity: 1;
    background: var(--loading-accent);
    transform: scale(1.32);
    box-shadow: 0 0 0 5px rgb(255 106 42 / 18%), 0 0 16px rgb(255 106 42 / 70%);
  }

  44% {
    opacity: 0.62;
    background: #7fb0f4;
    transform: scale(0.92);
    box-shadow: 0 0 0 3px rgb(23 105 224 / 12%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-logo__piece {
    animation-duration: 3.9s;
  }

  .loading-route span {
    animation-duration: 3.1s;
  }
}