.app-boot-splash {
  min-height: 100svh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #070707;
}

html.theme-light .app-boot-splash {
  background: #f8faff;
}

.app-boot-splash__mark {
  position: relative;
  width: 80px;
  height: 80px;
}

.app-boot-splash__logo-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
}

.app-boot-splash__logo {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.app-boot-splash__logo-fill {
  transform-box: fill-box;
  transform-origin: center;
  animation: app-boot-logo-heartbeat 1.35s ease-in-out infinite;
}

.app-boot-splash__logo-trace > * {
  fill: none;
  stroke: #3b82f6;
  stroke-width: 11;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 52 920;
  animation: app-boot-logo-trace 1.15s linear infinite;
}

.app-boot-splash__logo-trace > :nth-child(2) {
  animation-delay: -0.18s;
}

.app-boot-splash__logo-trace > :nth-child(3) {
  animation-delay: -0.36s;
}

.app-boot-splash__logo-trace > :nth-child(4) {
  animation-delay: -0.54s;
}

.app-boot-splash__logo-trace > :nth-child(5) {
  animation-delay: -0.72s;
}

.app-boot-splash__logo-trace > :nth-child(6) {
  animation-delay: -0.9s;
}

@keyframes app-boot-logo-heartbeat {
  0%,
  100% {
    transform: scale(1);
  }

  12% {
    transform: scale(1.1);
  }

  24% {
    transform: scale(1);
  }

  36% {
    transform: scale(1.06);
  }

  48% {
    transform: scale(1);
  }
}

@keyframes app-boot-logo-trace {
  to {
    stroke-dashoffset: -972;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-boot-splash__logo-wrap {
    transform: translate(-50%, -50%);
  }

  .app-boot-splash__logo-fill {
    animation: none;
  }

  .app-boot-splash__logo-trace > * {
    animation: none;
    stroke-dasharray: none;
    stroke-opacity: 0.55;
  }
}