body {
  margin: 0;
}

html {
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

#loading-bg {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(
      42% 36% at 50% 48%,
      color-mix(in srgb, var(--initial-loader-color, #1159AF) 12%, transparent) 0%,
      transparent 70%
    ),
    var(--initial-loader-bg, #fff);
  block-size: 100%;
  inline-size: 100%;
}

.loading {
  --loader: var(--initial-loader-color, #1159AF);
  position: relative;
  display: grid;
  place-items: center;
  block-size: 72px;
  inline-size: 72px;
}

.loading__halo {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--loader) 28%, transparent) 0%,
    transparent 68%
  );
  block-size: 120%;
  inline-size: 120%;
  animation: halo-breathe 2.4s ease-in-out infinite;
}

.loading__ring {
  position: absolute;
  border-radius: 50%;
  inset: 0;
}

.loading__ring--outer {
  background:
    conic-gradient(
      from 0deg,
      transparent 0%,
      transparent 55%,
      color-mix(in srgb, var(--loader) 35%, transparent) 72%,
      var(--loader) 88%,
      transparent 100%
    );
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  animation: spin 1.15s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.loading__ring--inner {
  inset: 14px;
  background:
    conic-gradient(
      from 180deg,
      transparent 0%,
      transparent 48%,
      color-mix(in srgb, var(--loader) 45%, transparent) 68%,
      var(--loader) 90%,
      transparent 100%
    );
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.75px), #000 calc(100% - 1.25px));
  opacity: 0.7;
  animation: spin-reverse 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.loading__core {
  position: relative;
  z-index: 1;
  border-radius: 50%;
  background: var(--loader);
  block-size: 8px;
  inline-size: 8px;
  animation: core-pulse 1.6s ease-in-out infinite;
}

.loading__dot {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  background: var(--loader);
  block-size: 5px;
  inline-size: 5px;
  offset-path: path('M36,6 C52.5,6 66,19.5 66,36 C66,52.5 52.5,66 36,66 C19.5,66 6,52.5 6,36 C6,19.5 19.5,6 36,6 Z');
  offset-rotate: 0deg;
  animation: orbit 2.2s linear infinite;
}

.loading__dot--a {
  animation-delay: 0s;
  opacity: 1;
}

.loading__dot--b {
  block-size: 3.5px;
  inline-size: 3.5px;
  animation-delay: -0.73s;
  opacity: 0.65;
}

.loading__dot--c {
  block-size: 2.5px;
  inline-size: 2.5px;
  animation-delay: -1.46s;
  opacity: 0.4;
}

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

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

@keyframes orbit {
  to {
    offset-distance: 100%;
  }
}

@keyframes core-pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.85);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

@keyframes halo-breathe {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.92);
  }

  50% {
    opacity: 0.9;
    transform: scale(1.08);
  }
}

#loading-bg.loader-fade-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

@supports not (offset-path: path('M0,0')) {
  .loading__dot {
    display: none;
  }
}