.intro-screen {
  --intro-dark: #0c0c0c;
  --intro-white: #fff;
  --intro-violet: #9379f2;
  --intro-green: #0dd6b9;
  --intro-red: #f75b41;
  --intro-yellow: #ffb600;
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 100dvh;
  background:
    radial-gradient(circle at center, rgb(112 70 224 / 18%), transparent 38%),
    var(--intro-dark);
  opacity: 1;
  visibility: visible;
  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}

.intro-screen::after {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 22%, rgb(0 0 0 / 48%) 100%);
  content: "";
  pointer-events: none;
}

.intro-screen.intro-screen-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-ship {
  z-index: 2;
  display: block;
  width: clamp(4.75rem, 13vw, 8.75rem);
  max-height: 56dvh;
  filter: drop-shadow(0 0 1.5rem rgb(147 121 242 / 38%));
  animation: intro-ship-flight 500ms ease-in-out infinite alternate;
}

.intro-speed-lines,
.intro-speed-lines i {
  position: absolute;
  inset: 0;
}

.intro-speed-lines {
  z-index: 1;
  pointer-events: none;
}

.intro-speed-lines i {
  left: var(--x);
  width: 0.125rem;
  height: var(--length);
  border-radius: 999px;
  background: linear-gradient(to bottom, transparent, var(--intro-white));
  box-shadow: 0 0 0.75rem rgb(255 255 255 / 58%);
  opacity: 0;
  animation: intro-speed-line var(--duration) linear var(--delay) infinite;
}

.intro-speed-lines .intro-line-violet {
  background: linear-gradient(to bottom, transparent, var(--intro-violet));
  box-shadow: 0 0 0.75rem rgb(147 121 242 / 72%);
}

.intro-speed-lines .intro-line-green {
  background: linear-gradient(to bottom, transparent, var(--intro-green));
  box-shadow: 0 0 0.75rem rgb(13 214 185 / 70%);
}

.intro-speed-lines .intro-line-red {
  background: linear-gradient(to bottom, transparent, var(--intro-red));
  box-shadow: 0 0 0.75rem rgb(247 91 65 / 70%);
}

.intro-speed-lines .intro-line-yellow {
  background: linear-gradient(to bottom, transparent, var(--intro-yellow));
  box-shadow: 0 0 0.75rem rgb(255 182 0 / 70%);
}

.intro-welcome {
  position: absolute;
  z-index: 2;
  bottom: clamp(2rem, 7dvh, 4.5rem);
  left: 50%;
  margin: 0;
  color: var(--intro-white);
  font-family: "Teko", sans-serif;
  font-size: clamp(0.875rem, 1.4vw, 1.125rem);
  font-weight: 400;
  letter-spacing: 0.24em;
  line-height: 1;
  text-transform: uppercase;
  transform: translateX(-50%);
}

@keyframes intro-speed-line {
  0% {
    opacity: 0;
    transform: translate3d(0, -30vh, 0) scaleY(0.45);
  }

  18% {
    opacity: 0.92;
  }

  82% {
    opacity: 0.92;
  }

  100% {
    opacity: 0;
    transform: translate3d(0, 130vh, 0) scaleY(1.3);
  }
}

@keyframes intro-ship-flight {
  from {
    transform: translate3d(0, 0.6rem, 0) scale(0.98);
  }

  to {
    transform: translate3d(0, -0.6rem, 0) scale(1.02);
  }
}

@media (max-width: 36rem) {
  .intro-ship {
    width: clamp(4.5rem, 23vw, 6.75rem);
    max-height: 50dvh;
  }

  .intro-speed-lines i {
    width: 0.1rem;
  }

  .intro-welcome {
    letter-spacing: 0.2em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-ship,
  .intro-speed-lines i {
    animation: none;
  }

  .intro-speed-lines {
    opacity: 0.32;
  }
}