.preloader,
.split-overlay {
  position: fixed;
  height: 100svh;
  width: 100vw;
  background-color: var(--bg-dark);
  color: var(--bg-bright);
}
.preloader {
  z-index: 1000;
}
.preloader h1,
.split-overlay h1 {
  font-weight: 400;
  font-size: var(--font-size-3);
}
.split-overlay {
  z-index: 999;
}
.intro-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}
.outro-title {
  position: absolute;
  display: flex;
  flex-direction: row;
  top: 50%;
  left: 50%;
  width: 7rem !important;
  transform: translate(-50%, -50%);
}
.intro-title .char,
.outro-title .logo-wrap {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.intro-title .char span,
.outro-title .logo-wrap img {
  position: relative;
  display: inline-block;
  transform: translateY(-100%);
  will-change: transform;
}
.loader {
  position: fixed;
  top: 0;
  left: 50.5%;
  width: .45rem;
  height: 100svh;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  will-change: transform;
  z-index: 1001;
  background-color: var(--bg-bright);
}
@media only screen and (min-width: 600px) {
  .intro-title h1 {
    font-size: var(--font-size-5);
  }
  .outro-title {
    width: 10rem !important;
  }
}
@media only screen and (min-width: 800px) {
  .intro-title h1 {
    font-size: var(--font-size-5);
  }
  .outro-title {
    width: 12rem !important;
  }
}
@media only screen and (min-width: 1000px) {
  .intro-title h1 {
    font-size: var(--font-size-6);
  }
  .outro-title {
    width: 16rem !important;
  }
  .loader {
    width: .8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .outro-title {
    width: 18rem !important;
  }
}