:root {
  --zoom: 1;
}

@media screen and (min-width: 2560px) and (min-height: 1200px) {
  :root {
    --zoom: 1.3333;
  }

  #preloader {
    zoom: 1.3333;
  }
}

@media screen and (min-width: 3840px) and (min-height: 1800px) {
  :root {
    --zoom: 2;
  }

  #preloader {
    zoom: 2;
  }
}

body {
  font-family: 'Inter', Arial, sans-serif;
  margin: 0;
  overflow: hidden;
}

.preloader {
  --art-height: 50%;
  --u: min(calc(100vh / 900), calc(100vw / 1100));
  position: fixed;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  background: #060606;
}

.preloader-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  margin-top: calc(27.5vh / var(--zoom));
}

.brand-logo {
  position: relative;
  width: 256px;
  height: 95px;
  background: center / contain no-repeat;
}

.brand-logo > svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 136.4%;
  height: auto;
  transform: translate(-50%, -50%);
}

.preloader-progress {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 19px;
}

.preloader-spinner {
  width: 16px;
  height: 16px;
  animation: spinner-rotation 1s linear infinite;
}

.spinner-track,
.spinner-arc {
  fill: none;
  stroke-width: 2.5px;
}

.spinner-track {
  stroke: rgba(242, 242, 242, 0.3);
}

.spinner-arc {
  stroke: #ffffff;
  stroke-linecap: round;
  stroke-dasharray: 31.8 10.6;
}

.preloader-percent {
  font-size: 16px;
  font-weight: 600;
  line-height: 19px;
  letter-spacing: -0.0853px;
  color: #f2f2f2;
}

@keyframes spinner-rotation {
  to {
    transform: rotate(360deg);
  }
}

.preloader::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--art-height, 50%);
  background: radial-gradient(
    116% 96% at 50% 106%,
    var(--glow-core, #204cd3) 0%,
    var(--glow-mid, rgba(58, 96, 226, 0.2)) 55%,
    var(--glow-fade, rgba(0, 31, 153, 0)) 100%
  );
}

.preloader img {
  max-inline-size: 100%;
  max-block-size: 100%;
}

.main-content {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  height: var(--art-height, 50%);
  pointer-events: none;
}

.background-image,
.main-image {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.preloader .background-image,
.preloader .main-image {
  max-inline-size: none;
  max-block-size: none;
}

.main-image {
  bottom: var(--main-image-bottom, 0);
  width: auto;
  height: var(--main-image-height, 50vmin);
}

.save-data .background-image,
.save-data .main-image {
  display: none;
}

@media (max-width: 600px), (max-height: 600px) {
  .preloader-content {
    margin-top: calc(22vh / var(--zoom));
  }

  .brand-logo {
    width: 164px;
    height: 61px;
  }

  .preloader-progress {
    margin-top: 8px;
  }

  .preloader-spinner {
    width: 12px;
    height: 12px;
  }

  .preloader-percent {
    font-size: 14px;
  }


  .preloader {
    --art-height: 58%;
    --u: min(calc(100vh / 520), calc(100vw / 360));
  }
}

@media (max-height: 475px) {
  .preloader-content {
    display: none;
  }
}

.preloader {
  --glow-core: #840121;
  --glow-mid: rgba(133, 0, 27, 0.2);
  --glow-fade: rgba(93, 0, 35, 0);
  --main-image-height: calc(543 * var(--u) / var(--zoom));
  --main-image-bottom: calc(0vh / var(--zoom));

  background: radial-gradient(
    100% 100% at 50% 100%,
    #3e0000 0%,
    #220303 50%,
    #140505 75%,
    #060606 100%
  );
}

.brand-logo {
  --logo-src: url('./assets/logo.svg');
  background-image: url('./assets/brand.svg');
}

@media (max-width: 600px), (max-height: 600px) {
  .preloader {
    --main-image-height: calc(342 * var(--u) / var(--zoom));
    --main-image-bottom: calc(0vh / var(--zoom));
  }
}