/* --------------- lOADER ---------------*/
/* HTML: <div class="loader"></div> */
#preloader-wrapper {
  width: 100vw;
  height: 100vh;
  background-color: var(--black);
  position: fixed;
  top: 0;
  left: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 10000;
}

#preloader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(2);
  transform-origin: center center;
  animation: loader 2s forwards ease-in-out;
}

@keyframes loader {
  30% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(2);
  }
  100% {
    top: calc(1rem - 1px);
    left: 1rem;
    transform: translate(0) scale(1);
  }

}

/* #preloader {
    width: 120px;
    height: 20px;
    background: linear-gradient(#fff 50%, #fff0 0),
      linear-gradient(#fff0 50%, #fff 0),
      linear-gradient(#fff 50%, #fff0 0),
      linear-gradient(#fff0 50%, #fff 0),
      linear-gradient(#fff 50%, #fff0 0),
      linear-gradient(#fff0 50%, #fff 0);
    background-size: calc(100% / 6 + 1px) 200%;
    background-repeat: no-repeat;
    animation: l12 2s forwards;
  }
  @keyframes l12 {
    0% {
      background-position: calc(0 * 100% / 5) 100%, calc(1 * 100% / 5) 0%,
        calc(2 * 100% / 5) 100%, calc(3 * 100% / 5) 0%, calc(4 * 100% / 5) 100%,
        calc(5 * 100% / 5) 0%;
    }
    16.67% {
      background-position: calc(0 * 100% / 5) 0%, calc(1 * 100% / 5) 0%,
        calc(2 * 100% / 5) 100%, calc(3 * 100% / 5) 0%, calc(4 * 100% / 5) 100%,
        calc(5 * 100% / 5) 0%;
    }
    33.33% {
      background-position: calc(0 * 100% / 5) 0%, calc(1 * 100% / 5) 100%,
        calc(2 * 100% / 5) 100%, calc(3 * 100% / 5) 0%, calc(4 * 100% / 5) 100%,
        calc(5 * 100% / 5) 0%;
    }
    50% {
      background-position: calc(0 * 100% / 5) 0%, calc(1 * 100% / 5) 100%,
        calc(2 * 100% / 5) 0%, calc(3 * 100% / 5) 0%, calc(4 * 100% / 5) 100%,
        calc(5 * 100% / 5) 0%;
    }
    66.67% {
      background-position: calc(0 * 100% / 5) 0%, calc(1 * 100% / 5) 100%,
        calc(2 * 100% / 5) 0%, calc(3 * 100% / 5) 100%, calc(4 * 100% / 5) 100%,
        calc(5 * 100% / 5) 0%;
    }
    83.33% {
      background-position: calc(0 * 100% / 5) 0%, calc(1 * 100% / 5) 100%,
        calc(2 * 100% / 5) 0%, calc(3 * 100% / 5) 100%, calc(4 * 100% / 5) 0%,
        calc(5 * 100% / 5) 0%;
    }
    100% {
      background-position: calc(0 * 100% / 5) 0%, calc(1 * 100% / 5) 100%,
        calc(2 * 100% / 5) 0%, calc(3 * 100% / 5) 100%, calc(4 * 100% / 5) 0%,
        calc(5 * 100% / 5) 100%;
    }
  } */