#app-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #ff5a34;
  background: #0a0b0d;
  opacity: 1;
  transition: opacity 140ms cubic-bezier(.22, 1, .36, 1), visibility 140ms step-end;
}

#app-preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

[data-theme='light'] #app-preloader {
  color: #ed431c;
  background: #e9ebe7;
}

.app-preloader__inner {
  width: min(42vw, 280px);
  min-width: 210px;
  display: grid;
  justify-items: center;
  gap: 24px;
}

.app-preloader__globe {
  width: 100%;
  height: auto;
  overflow: visible;
}

.app-preloader__line {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: app-preloader-draw 1.65s cubic-bezier(.22, 1, .36, 1) forwards;
}

.app-preloader__line--outline { animation-delay: .05s; }
.app-preloader__line--meridian { animation-delay: .24s; opacity: .82; }
.app-preloader__line--latitude { animation-delay: .4s; opacity: .68; }
.app-preloader__line--latitude-last { animation-delay: .54s; opacity: .68; }

.app-preloader__signal {
  fill: currentColor;
  opacity: 0;
  transform-origin: 120px 120px;
  animation: app-preloader-signal 1.9s ease-in-out .72s infinite;
}

.app-preloader__label {
  margin: 0;
  color: currentColor;
  font: 700 10px/1 Golos Text Variable, Arial, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}

@keyframes app-preloader-draw { to { stroke-dashoffset: 0; } }

@keyframes app-preloader-signal {
  0%, 12% { opacity: 0; transform: rotate(-24deg) scale(.85); }
  28% { opacity: .9; }
  62% { opacity: .35; transform: rotate(24deg) scale(1); }
  100% { opacity: 0; transform: rotate(48deg) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  #app-preloader { transition-duration: 100ms; }
  .app-preloader__line { animation-duration: .01ms; animation-delay: 0s; animation-iteration-count: 1; animation-fill-mode: both; }
  .app-preloader__signal { animation: none; opacity: .7; }
}
