:root {
  --page-preloader-progress: 0;
}

html.is-page-loading,
html.is-page-loading body {
  overflow: hidden;
}

.page-preloader {
  position: fixed;
  inset: 0;
  z-index: 100100;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.14), transparent 38%), radial-gradient(circle at 80% 76%, rgba(118, 154, 255, 0.22), transparent 34%), linear-gradient(145deg, #050914 0%, #0d1731 46%, #09101d 100%);
  background-size: 120% 120%, 118% 118%, 100% 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: opacity 0.45s ease, visibility 0.45s ease;
  transition: opacity 0.45s ease, visibility 0.45s ease;
  will-change: opacity;
}

.page-preloader__inner {
  position: relative;
  width: min(980px, 84vw);
  display: grid;
  place-items: center;
  gap: 28px;
}

.page-preloader__inner::after {
  content: "";
  position: absolute;
  inset: auto 10% -8%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(126, 163, 255, 0.52), transparent 72%);
  -webkit-filter: blur(28px);
          filter: blur(28px);
  pointer-events: none;
}

.page-preloader__logo {
  position: relative;
  width: 100%;
  -webkit-filter: drop-shadow(0 0 18px rgba(185, 207, 255, 0.18)) drop-shadow(0 24px 44px rgba(5, 9, 20, 0.45));
          filter: drop-shadow(0 0 18px rgba(185, 207, 255, 0.18)) drop-shadow(0 24px 44px rgba(5, 9, 20, 0.45));
}

.page-preloader__logo-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.page-preloader__logo-outline {
  fill: rgba(255, 255, 255, 0.08);
  stroke: rgba(227, 236, 255, 0.22);
  stroke-width: 0.7;
  vector-effect: non-scaling-stroke;
}

.page-preloader__logo-track {
  fill: rgba(255, 255, 255, 0.08);
}

.page-preloader__logo-fill {
  fill: url(#page-preloader-logo-fill-gradient);
  transform-box: fill-box;
  -webkit-transform-origin: left center;
      -ms-transform-origin: left center;
          transform-origin: left center;
  -webkit-transform: scaleX(var(--page-preloader-progress));
      -ms-transform: scaleX(var(--page-preloader-progress));
          transform: scaleX(var(--page-preloader-progress));
  will-change: transform;
}

.page-preloader__logo-shine {
  fill: url(#page-preloader-logo-shine-gradient);
  mix-blend-mode: screen;
  opacity: calc(0.18 + var(--page-preloader-progress) * 0.58);
  -webkit-transform: translateX(calc(var(--page-preloader-progress) * 161px - 161px));
      -ms-transform: translateX(calc(var(--page-preloader-progress) * 161px - 161px));
          transform: translateX(calc(var(--page-preloader-progress) * 161px - 161px));
  will-change: transform, opacity;
}

.page-preloader__meta {
  width: min(460px, 72vw);
}

.page-preloader__meter {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 10px 34px rgba(7, 12, 27, 0.24);
          box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 10px 34px rgba(7, 12, 27, 0.24);
}

.page-preloader__meter-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: -webkit-gradient(linear, left top, right top, from(#5f84ff), color-stop(45%, #8da8ff), to(#ffffff));
  background: linear-gradient(90deg, #5f84ff 0%, #8da8ff 45%, #ffffff 100%);
  -webkit-box-shadow: 0 0 18px rgba(121, 153, 255, 0.48);
          box-shadow: 0 0 18px rgba(121, 153, 255, 0.48);
  -webkit-transform: scaleX(var(--page-preloader-progress));
      -ms-transform: scaleX(var(--page-preloader-progress));
          transform: scaleX(var(--page-preloader-progress));
  -webkit-transform-origin: left center;
      -ms-transform-origin: left center;
          transform-origin: left center;
  will-change: transform;
}

.page-preloader__info {
  margin-top: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 12px;
}

.page-preloader__label,
.page-preloader__percent {
  margin: 0;
  color: rgba(233, 239, 255, 0.92);
  line-height: 1;
}

.page-preloader__label {
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}

.page-preloader__percent {
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.page-preloader__dots {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 4px;
  min-width: 20px;
}

.page-preloader__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.22;
}

.page-preloader__dot:nth-child(2) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.page-preloader__dot:nth-child(3) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.page-preloader.is-hiding .page-preloader__logo-fill,
.page-preloader.is-hiding .page-preloader__logo-shine,
.page-preloader.is-hiding .page-preloader__meter-fill {
  -webkit-animation: none;
          animation: none;
}

html.is-page-loading .page-preloader {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

html.is-page-loaded .page-preloader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@-webkit-keyframes page-preloader-glow-pulse {
  0%, 100% {
    opacity: 0.3;
    -webkit-transform: scale(0.92);
            transform: scale(0.92);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.08);
            transform: scale(1.08);
  }
}

@keyframes page-preloader-glow-pulse {
  0%, 100% {
    opacity: 0.3;
    -webkit-transform: scale(0.92);
            transform: scale(0.92);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.08);
            transform: scale(1.08);
  }
}

@-webkit-keyframes page-preloader-dot-blink {
  0%, 100% {
    opacity: 0.22;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }

  35% {
    opacity: 1;
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
  }
}

@keyframes page-preloader-dot-blink {
  0%, 100% {
    opacity: 0.22;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }

  35% {
    opacity: 1;
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
  }
}

@media (max-width: 991px) {
  .page-preloader__inner {
    width: min(760px, 88vw);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .page-preloader__inner::after {
    -webkit-animation: page-preloader-glow-pulse 2.4s ease-in-out infinite;
            animation: page-preloader-glow-pulse 2.4s ease-in-out infinite;
  }

  .page-preloader__dot {
    -webkit-animation: page-preloader-dot-blink 1.2s ease-in-out infinite;
            animation: page-preloader-dot-blink 1.2s ease-in-out infinite;
  }
}