.text-travel-loader {
  position:fixed;
  inset:0;
  z-index:250;
  background:#171714;
  color:#f5f3ee;
  display:grid;
  place-items:center;
  overflow:hidden;
  pointer-events:none;
}

.text-travel-loader[hidden] {
  display:none;
}

.travel-phrase {
  width:100%;
  text-align:center;
  font-size:clamp(40px,7.6vw,126px);
  font-weight:800;
  letter-spacing:-.06em;
  line-height:1.08;
  padding:24px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.travel-line {
  display:block;
  animation:travel-across 1.65s cubic-bezier(.22,.7,.24,1) both;
  white-space:nowrap;
}

.travel-line:nth-child(2) {
  color:var(--orange);
  animation-delay:.13s;
  animation-name:travel-back;
}

.text-travel-loader {
  animation:travel-curtain .42s 1.85s cubic-bezier(.65,0,.35,1) forwards;
}

@keyframes travel-across {
  0% {
    transform:translateX(-100vw);
    opacity:0;
  }
  25%,72% {
    transform:translateX(0);
    opacity:1;
  }
  100% {
    transform:translateX(100vw);
    opacity:0;
  }
}

@keyframes travel-back {
  0% {
    transform:translateX(100vw);
    opacity:0;
  }
  25%,72% {
    transform:translateX(0);
    opacity:1;
  }
  100% {
    transform:translateX(-100vw);
    opacity:0;
  }
}

@keyframes travel-curtain {
  to {
    opacity:0;
    visibility:hidden;
  }
}

@media(max-width:700px) {
  .travel-phrase {
    font-size:11.4vw;
    padding:18px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .text-travel-loader,.travel-line {
    animation:none!important;
    transform:none!important;
    opacity:1;
  }
}

