.site-loader {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  color: #faf7ef;
  background: #0d2b1d;
  overflow: hidden;
  pointer-events: auto;
  animation: loaderCurtain 480ms cubic-bezier(0.76, 0, 0.24, 1) 760ms forwards;
}

body.loader-active {
  overflow: hidden;
}

.site-loader.is-finished {
  visibility: hidden;
  pointer-events: none;
}

.loader-name {
  position: relative;
  z-index: 1;
  width: min(94vw, 1100px);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(52px, 7.5vw, 108px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.055em;
  text-align: center;
}

.loader-name-line {
  display: block;
  overflow: hidden;
  padding: 0.055em 0.12em 0.105em;
}

.loader-name-line > span {
  display: block;
  opacity: 0;
  transform: translate3d(0, 125%, 0);
  animation: loaderWord 700ms cubic-bezier(0.76, 0, 0.24, 1) both;
  will-change: transform, opacity;
}

.loader-name-line:nth-child(1) > span {
  animation-delay: 20ms;
}

.loader-name-line:nth-child(2) > span {
  animation-delay: 90ms;
}

.loader-name-line:nth-child(3) > span {
  animation-delay: 160ms;
}

@keyframes loaderWord {
  0% {
    opacity: 0;
    transform: translate3d(0, 125%, 0);
  }

  16%,
  68% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, -125%, 0);
  }
}

@keyframes loaderCurtain {
  0% {
    visibility: visible;
    clip-path: inset(0 0 0 0);
  }

  99% {
    visibility: visible;
  }

  100% {
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    pointer-events: none;
  }
}

@media (width <= 720px) {
  .loader-name {
    width: 96vw;
    font-size: clamp(48px, 13vw, 68px);
    line-height: 0.92;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-loader {
    animation: loaderCurtain 1ms linear 100ms forwards;
  }

  .loader-name-line > span {
    opacity: 1;
    transform: none;
    animation: none;
  }
}