body {
  margin: 0;
}

html {
  overflow-x: hidden;
  overflow-y: scroll;
}

#loading-bg {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 20% 20%, var(--loader-blob-a, rgb(115 103 240 / 14%)), transparent 42%),
    radial-gradient(circle at 80% 75%, var(--loader-blob-b, rgb(0 194 255 / 12%)), transparent 40%),
    linear-gradient(160deg, var(--loader-grad-from, var(--initial-loader-bg, #fff)) 0%, var(--loader-grad-to, rgb(246 247 255 / 100%)) 100%);
  overflow: hidden;
  isolation: isolate;
}

.loading-logo {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-block-size: 108px;
  min-inline-size: 108px;
}

.loading-logo::before,
.loading-logo::after {
  content: "";
  position: absolute;
  inset: 50%;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.loading-logo::before {
  inline-size: 128px;
  block-size: 128px;
  border: 2px solid var(--loader-ring, rgb(115 103 240 / 25%));
  box-shadow: 0 0 0 1px var(--loader-ring-inset, rgb(115 103 240 / 10%)) inset;
  animation: orbit-ring 2.4s linear infinite;
}

.loading-logo::after {
  inline-size: 164px;
  block-size: 164px;
  border: 1px dashed var(--loader-ring-dashed, rgb(115 103 240 / 22%));
  animation: orbit-ring-reverse 3.4s linear infinite;
}

#initial-loader-fallback {
  position: relative;
  z-index: 3;
  inline-size: 62px;
  block-size: auto;
  border-radius: 16px;
  filter: drop-shadow(0 14px 32px var(--loader-icon-glow, rgb(115 103 240 / 24%)));
  animation: icon-float-glow 1.9s ease-in-out infinite;
  will-change: transform, filter;
}

#loading-bg::before,
#loading-bg::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(2px);
}

#loading-bg::before {
  inline-size: 460px;
  block-size: 460px;
  inset-block-start: -170px;
  inset-inline-start: -130px;
  background: radial-gradient(circle, var(--loader-ambient-a, rgb(115 103 240 / 24%)) 0%, transparent 68%);
  animation: ambient-drift-a 7.2s ease-in-out infinite;
}

#loading-bg::after {
  inline-size: 500px;
  block-size: 500px;
  inset-block-end: -200px;
  inset-inline-end: -120px;
  background: radial-gradient(circle, var(--loader-ambient-b, rgb(0 194 255 / 18%)) 0%, transparent 70%);
  animation: ambient-drift-b 8.8s ease-in-out infinite;
}

html[data-loader-theme='light'] {
  --loader-grad-from: var(--initial-loader-bg, #ffffff);
  --loader-grad-to: color-mix(in srgb, var(--initial-loader-bg, #ffffff) 88%, #e9ecff 12%);
  --loader-blob-a: color-mix(in srgb, var(--initial-loader-color, #7367f0) 18%, transparent);
  --loader-blob-b: rgb(0 194 255 / 12%);
  --loader-ring: color-mix(in srgb, var(--initial-loader-color, #7367f0) 28%, transparent);
  --loader-ring-inset: color-mix(in srgb, var(--initial-loader-color, #7367f0) 14%, transparent);
  --loader-ring-dashed: color-mix(in srgb, var(--initial-loader-color, #7367f0) 22%, transparent);
  --loader-ambient-a: color-mix(in srgb, var(--initial-loader-color, #7367f0) 30%, transparent);
  --loader-ambient-b: rgb(0 194 255 / 18%);
  --loader-icon-glow: color-mix(in srgb, var(--initial-loader-color, #7367f0) 30%, transparent);
}

html[data-loader-theme='dark'] {
  --loader-grad-from: color-mix(in srgb, var(--initial-loader-bg, #111827) 94%, #000 6%);
  --loader-grad-to: color-mix(in srgb, var(--initial-loader-bg, #111827) 76%, #1a1f33 24%);
  --loader-blob-a: color-mix(in srgb, var(--initial-loader-color, #7367f0) 26%, transparent);
  --loader-blob-b: rgb(56 189 248 / 16%);
  --loader-ring: color-mix(in srgb, var(--initial-loader-color, #7367f0) 45%, transparent);
  --loader-ring-inset: color-mix(in srgb, var(--initial-loader-color, #7367f0) 26%, transparent);
  --loader-ring-dashed: color-mix(in srgb, var(--initial-loader-color, #7367f0) 36%, transparent);
  --loader-ambient-a: color-mix(in srgb, var(--initial-loader-color, #7367f0) 36%, transparent);
  --loader-ambient-b: rgb(56 189 248 / 22%);
  --loader-icon-glow: color-mix(in srgb, var(--initial-loader-color, #7367f0) 40%, transparent);
}

@keyframes icon-float-glow {
  0% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 10px 24px rgb(115 103 240 / 18%));
  }

  50% {
    transform: translateY(-7px) scale(1.045);
    filter: drop-shadow(0 18px 38px rgb(115 103 240 / 34%));
  }

  100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 10px 24px rgb(115 103 240 / 18%));
  }
}

@keyframes orbit-ring {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(0.95);
    opacity: 0.55;
  }

  50% {
    transform: translate(-50%, -50%) rotate(180deg) scale(1.03);
    opacity: 0.95;
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg) scale(0.95);
    opacity: 0.55;
  }
}

@keyframes orbit-ring-reverse {
  0% {
    transform: translate(-50%, -50%) rotate(360deg);
    opacity: 0.35;
  }

  50% {
    transform: translate(-50%, -50%) rotate(180deg) scale(1.04);
    opacity: 0.7;
  }

  100% {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 0.35;
  }
}

@keyframes ambient-drift-a {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.6;
  }

  50% {
    transform: translate3d(24px, 30px, 0) scale(1.05);
    opacity: 0.85;
  }

  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.6;
  }
}

@keyframes ambient-drift-b {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.5;
  }

  50% {
    transform: translate3d(-28px, -26px, 0) scale(1.06);
    opacity: 0.82;
  }

  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  #loading-bg::before,
  #loading-bg::after,
  .loading-logo::before,
  .loading-logo::after,
  #initial-loader-fallback {
    animation: none !important;
  }
}