body {
  margin: 0;
}

html {
  overflow: hidden auto;
}

#loading-bg {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--initial-loader-bg, #fff);
  gap: 1.5rem;
  inset: 0;
  min-block-size: 100dvh;
}

.loading-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: loader-logo-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  gap: 0.5rem;
}

.loader-logo-nos {
  flex-shrink: 0;
  filter: drop-shadow(0 10px 28px rgb(0 0 0 / 12%));
}

.loader-brand {
  margin: 0;
  color: var(--initial-loader-color, #7367f0);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  opacity: 0.65;
  text-transform: uppercase;
}

.loading-spinner {
  box-sizing: border-box;
  flex-shrink: 0;
  border: 3px solid rgb(127 127 127 / 22%);
  border-radius: 50%;
  animation: loader-spin 0.88s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  block-size: 44px;
  border-block-start-color: var(--initial-loader-color, #7367f0);
  inline-size: 44px;
}

.loader-progress {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  block-size: 3px;
  inline-size: min(220px, 70vw);
}

.loader-progress::before {
  position: absolute;
  border-radius: inherit;
  background: var(--initial-loader-color, #7367f0);
  content: "";
  inset: 0;
  opacity: 0.14;
}

.loader-progress::after {
  position: absolute;
  display: block;
  border-radius: inherit;
  animation: loader-progress-slide 1.35s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--initial-loader-color, #7367f0),
      transparent
    );
  content: "";
  inline-size: 45%;
  inset-block: 0;
  inset-inline-start: -45%;
}

.loader-sr-only {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  margin: -1px;
  block-size: 1px;
  clip: rect(0, 0, 0, 0);
  inline-size: 1px;
  white-space: nowrap;
}

@keyframes loader-logo-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes loader-spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes loader-progress-slide {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(320%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-logo {
    animation: none;
  }

  .loading-spinner {
    animation-duration: 1.6s;
  }

  .loader-progress::after {
    animation-duration: 2.4s;
  }
}