#kadi-preloader {
  --kadi-spider-wait-y: clamp(178px, 42vh, 380px);
  --kadi-spider-finish-y: clamp(244px, 57vh, 510px);
  --kadi-spider-width: clamp(44px, 13vw, 54px);

  position: fixed;
  z-index: 9999;
  inset: 0;
  overflow: hidden;

  background:
    radial-gradient(52% 28% at 50% 46%, rgba(111, 59, 255, 0.11), transparent 74%),
    radial-gradient(38% 24% at 50% 54%, rgba(0, 207, 255, 0.045), transparent 76%),
    #080b18;

  opacity: 1;
  visibility: visible;
  transition: opacity 260ms ease, visibility 260ms ease;
}

#kadi-preloader,
#kadi-preloader * {
  box-sizing: border-box;
}

.kadi-preloader__thread {
  position: absolute;
  top: 0;
  left: 50%;

  width: 1px;
  height: var(--kadi-spider-wait-y);

  background:
    linear-gradient(
      180deg,
      rgba(167, 139, 250, 0.04),
      rgba(139, 92, 246, 0.3) 62%,
      rgba(0, 207, 255, 0.28)
    );

  box-shadow: 0 0 8px rgba(139, 92, 246, 0.12);
  transform: translateX(-50%) scaleY(0);
  transform-origin: 50% 0;
  will-change: height, transform;
}

.kadi-preloader__spider-anchor {
  position: absolute;
  top: 0;
  left: 50%;

  width: var(--kadi-spider-width);

  opacity: 0;
  transform: translate3d(-50%, -86px, 0);
  will-change: opacity, transform;
}

.kadi-preloader__spider {
  display: block;
  width: 100%;
  height: auto;

  object-fit: contain;
  pointer-events: none;
  user-select: none;

  filter:
    drop-shadow(0 0 7px rgba(139, 92, 246, 0.2))
    drop-shadow(0 0 12px rgba(0, 207, 255, 0.06));

  transform-origin: 50% 4%;
  will-change: transform;
}

.kadi-preloader__pulse {
  position: absolute;
  top: calc(var(--kadi-spider-finish-y) + 31px);
  left: 50%;

  width: 82px;
  height: 82px;
  border: 1px solid rgba(0, 207, 255, 0.22);
  border-radius: 50%;

  opacity: 0;
  transform: translate(-50%, -50%) scale(0.38);
  pointer-events: none;
}

.kadi-preloader__retry {
  position: absolute;
  top: calc(var(--kadi-spider-wait-y) + 104px);
  left: 50%;

  width: 44px;
  height: 44px;
  padding: 0;

  border: 1px solid rgba(167, 139, 250, 0.36);
  border-radius: 50%;
  background: rgba(10, 13, 27, 0.86);
  box-shadow: 0 0 20px rgba(111, 59, 255, 0.12);

  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(0.88);
  transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease;
}

.kadi-preloader__retry::before {
  content: "";

  position: absolute;
  inset: 11px;

  border: 2px solid rgba(255, 255, 255, 0.74);
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(-34deg);
}

.kadi-preloader__retry::after {
  content: "";

  position: absolute;
  top: 10px;
  right: 10px;

  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid rgba(255, 255, 255, 0.74);
  transform: rotate(14deg);
}

.kadi-preloader__retry:active {
  transform: translateX(-50%) scale(0.82);
}

.kadi-preloader__retry:focus-visible {
  outline: 2px solid rgba(0, 207, 255, 0.72);
  outline-offset: 4px;
}

.kadi-preloader.is-entering .kadi-preloader__thread {
  animation: kadiSpiderThreadEnter 920ms cubic-bezier(0.2, 0.7, 0.25, 1) both;
}

.kadi-preloader.is-entering .kadi-preloader__spider-anchor {
  animation: kadiSpiderEnter 920ms cubic-bezier(0.2, 0.72, 0.24, 1) both;
}

.kadi-preloader.is-waiting .kadi-preloader__thread {
  height: var(--kadi-spider-wait-y);
  animation: none;
  transform: translateX(-50%) scaleY(1);
}

.kadi-preloader.is-waiting .kadi-preloader__spider-anchor {
  opacity: 1;
  animation: none;
  transform: translate3d(-50%, var(--kadi-spider-wait-y), 0);
}

.kadi-preloader.is-waiting .kadi-preloader__spider {
  animation: kadiSpiderWait 1900ms ease-in-out infinite alternate;
}

.kadi-preloader.is-completing .kadi-preloader__thread {
  height: var(--kadi-spider-finish-y);
  animation: none;
  transform: translateX(-50%) scaleY(1);
  transition: height 330ms cubic-bezier(0.22, 0.78, 0.28, 1);
}

.kadi-preloader.is-completing .kadi-preloader__spider-anchor {
  opacity: 1;
  animation: none;
  transform: translate3d(-50%, var(--kadi-spider-finish-y), 0);
  transition: transform 330ms cubic-bezier(0.22, 0.78, 0.28, 1);
}

.kadi-preloader.is-completing .kadi-preloader__spider {
  animation: none;
}

.kadi-preloader.is-completing .kadi-preloader__pulse {
  animation: kadiSpiderPulse 360ms ease-out both;
}

.kadi-preloader.is-timeout .kadi-preloader__spider {
  animation-play-state: paused;
}

.kadi-preloader.is-timeout .kadi-preloader__retry {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
}

.kadi-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.kadi-preloader.is-dormant {
  display: none;
}

@keyframes kadiSpiderThreadEnter {
  from {
    opacity: 0.28;
    transform: translateX(-50%) scaleY(0.08);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
  }
}

@keyframes kadiSpiderEnter {
  from {
    opacity: 0;
    transform: translate3d(-50%, -86px, 0);
  }

  18% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: translate3d(-50%, var(--kadi-spider-wait-y), 0);
  }
}

@keyframes kadiSpiderWait {
  from {
    transform: translate3d(0, -2px, 0) rotate(-1.6deg);
  }

  to {
    transform: translate3d(0, 3px, 0) rotate(1.6deg);
  }
}

@keyframes kadiSpiderPulse {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.38);
  }

  42% {
    opacity: 0.72;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.36);
  }
}

@media (max-height: 640px) {
  #kadi-preloader {
    --kadi-spider-wait-y: clamp(152px, 36vh, 230px);
    --kadi-spider-finish-y: clamp(208px, 50vh, 320px);
  }
}

html[data-motion='reduced'] #kadi-preloader {
  transition-duration: 140ms;
}

html[data-motion='reduced'] .kadi-preloader.is-entering .kadi-preloader__thread,
html[data-motion='reduced'] .kadi-preloader.is-waiting .kadi-preloader__thread {
  height: var(--kadi-spider-wait-y);
  animation: none;
  transform: translateX(-50%) scaleY(1);
}

html[data-motion='reduced'] .kadi-preloader.is-entering .kadi-preloader__spider-anchor,
html[data-motion='reduced'] .kadi-preloader.is-waiting .kadi-preloader__spider-anchor {
  opacity: 1;
  animation: none;
  transform: translate3d(-50%, var(--kadi-spider-wait-y), 0);
}

html[data-motion='reduced'] .kadi-preloader.is-waiting .kadi-preloader__spider {
  animation: none;
}

html[data-motion='reduced'] .kadi-preloader.is-completing .kadi-preloader__thread {
  transition-duration: 120ms;
}

html[data-motion='reduced'] .kadi-preloader.is-completing .kadi-preloader__spider-anchor {
  transition-duration: 120ms;
}

html[data-motion='reduced'] .kadi-preloader.is-completing .kadi-preloader__pulse {
  animation-duration: 140ms;
}