* {
  box-sizing: border-box;
}

.preloader {
  --loader-animation-time: 2s;
  --loader-animation-style: highlightFly;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100vw;
  height: 100vh;
  font-family: 'SFProText', apple-system, BinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'antarell', 'Fira Sans', 'Droid Sans', 'Helvetica', sans-serif !important;
  font-size: 14px;
  font-display: swap;
  visibility: hidden;
  visibility: none !important;
  background: var(--bg-color);
  opacity: 0 !important;
  transition: opacity 0.4s, visibility 0.4s;
}

.preloader.light {
  --bg-color: var(--loader-bg-color-light);
  --letter-color: #1b1b1d;
  --logo-border-color: #dfe2eb;
  --logo-color: #1b1b1d;
}

.preloader.dark {
  --bg-color: var(--loader-bg-color-dark);
  --letter-color: #e3e2e6;
  --logo-border-color: #43474e;
  --logo-color: #e3e2e6;
}

.preloader--shown {
  visibility: visible !important;
  opacity: 1 !important;
}

.preloader--ready .preloader__logo-wrapper {
  animation: logo-bounce var(--loader-animation-time) infinite;
  animation-delay: 1s;
}

.preloader--ready .preloader__letter {
  animation: highlight var(--loader-animation-time) infinite;
  animation-delay: var(--delay);
}

.preloader--ready.preloader--with-fly-effect .preloader__letter {
  animation: var(--loader-animation-style) var(--loader-animation-time) infinite;
  animation-delay: var(--delay);
}

.preloader--hidden {
  visibility: none !important;
  opacity: 0 !important;
}


.preloader__inner {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: var(--bg-color);
}

.preloader__letter {
  position: absolute;
  color: var(--letter-color);
  opacity: 0;
  will-change: transform;
}

.preloader__letter-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

.preloader__logo-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 90px;
  height: 90px;
  border-radius: 100px;
  transform: translate(-50%, -50%);
}

.preloader__logo-wrapper.preloader__logo-wrapper--animated {
  animation: logo-bounce var(--loader-animation-time) infinite;
  animation-delay: 1s;
}

.preloader__logo-wrapper.preloader__logo-wrapper--with-border {
  border: 1px solid var(--logo-border-color);
}

.preloader__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  height: 40%;
  color: var(--logo-color) !important;
  background: transparent;
  transform: translate(-50%, -50%);
}

.preloader__logo svg {
  color: var(--logo-color) !important;
}

@keyframes highlight {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  30% {
    opacity: 0.3;
  }
  40% {
    opacity: 0.2;
  }
  60% {
    opacity: 0;
  }
}

@keyframes highlightFly {
  0% {
    opacity: 0;
    transform: var(--current-transform);
  }
  10% {
    opacity: 1;
  }
  30% {
    opacity: 0.3;
  }
  40% {
    opacity: 0.2;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: var(--current-transform) translate(var(--translate-x), var(--translate-y));
  }
}

@keyframes highlightFly2 {
  0% {
    opacity: 0;
    transform: var(--current-transform);
  }
  10% {
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: var(--current-transform) translate(var(--translate-x), var(--translate-y));
  }
}

@keyframes logo-bounce {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  15% {
    transform: translate(-50%, -50%) scale(1.2);
  }
  80% {
    transform: translate(-50%, -50%) scale(1);
  }
}