.intro-sequence {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 46%, rgb(230 184 107 / 18%), transparent 30%),
    radial-gradient(circle at 54% 58%, rgb(13 127 120 / 12%), transparent 34%),
    linear-gradient(145deg, rgb(31 27 21), rgb(13 11 8) 68%);
  animation: intro-exit 720ms ease 3.6s both;
}

.intro-sequence::before,
.intro-sequence::after {
  position: absolute;
  inset: 0;
  content: "";
}

.intro-sequence::before {
  background:
    linear-gradient(90deg, transparent 0 49%, rgb(230 184 107 / 16%) 50%, transparent 51%),
    linear-gradient(0deg, transparent 0 49%, rgb(13 127 120 / 12%) 50%, transparent 51%);
  opacity: 0;
  transform: scale(.72);
  animation: intro-cross 2.9s cubic-bezier(.2, .8, .2, 1) 300ms both;
}

.intro-sequence::after {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 34%, rgb(0 0 0 / 42%) 72%),
    linear-gradient(rgb(230 218 200 / 7%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(230 218 200 / 7%) 1px, transparent 1px);
  background-size: auto, 54px 54px, 54px 54px;
  opacity: 0;
  animation: intro-vignette 3.3s ease both;
}

.intro-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(82vw, 560px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
}

.intro-field,
.intro-ring,
.intro-orbit {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.intro-field {
  inset: 9%;
  border: 1px solid rgb(230 218 200 / 15%);
  opacity: 0;
  transform: scale(.72);
  animation: intro-field 3.2s cubic-bezier(.16, 1, .3, 1) both;
}

.intro-field-back {
  box-shadow:
    inset 0 0 58px rgb(88 216 255 / 8%),
    0 0 90px rgb(194 122 24 / 12%);
}

.intro-field-front {
  inset: 24%;
  border-color: rgb(230 184 107 / 20%);
  animation-delay: 180ms;
}

.intro-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: min(45vw, 238px);
  aspect-ratio: 1;
  transform: translateZ(80px);
  animation: intro-mark 3.45s cubic-bezier(.16, 1, .3, 1) both;
}

.intro-mark::before {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: rgb(230 184 107 / 22%);
  filter: blur(28px);
  opacity: 0;
  content: "";
  animation: intro-glow 3s ease 260ms both;
}

.intro-ring {
  inset: 0;
  border: 1px solid rgb(230 184 107 / 36%);
  opacity: 0;
  transform: scale(.42);
}

.intro-ring-one {
  animation: intro-ring 2.15s ease 160ms both;
}

.intro-ring-two {
  border-color: rgb(230 218 200 / 28%);
  animation: intro-ring 2.25s ease 520ms both;
}

.intro-ring-three {
  border-color: rgb(13 127 120 / 28%);
  animation: intro-ring 2.35s ease 880ms both;
}

.intro-orbit {
  inset: -18%;
  border: 1px solid rgb(255 250 241 / 14%);
  opacity: 0;
  transform: rotateX(68deg) rotateZ(-18deg) scale(.68);
  animation: intro-orbit 2.7s cubic-bezier(.2, .8, .2, 1) 360ms both;
}

.intro-orbit-two {
  inset: -30%;
  border-color: rgb(230 184 107 / 18%);
  transform: rotateX(68deg) rotateZ(24deg) scale(.74);
  animation-delay: 580ms;
}

@keyframes intro-ring {
  0% {
    opacity: 0;
    transform: scale(.42);
  }

  24% {
    opacity: .9;
  }

  100% {
    opacity: 0;
    transform: scale(1.82);
  }
}

@keyframes intro-orbit {
  0% {
    opacity: 0;
    filter: blur(3px);
  }

  36%,
  74% {
    opacity: .74;
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: rotateX(68deg) rotateZ(36deg) scale(1.2);
  }
}

@keyframes intro-field {
  0% {
    opacity: 0;
    transform: scale(.72);
  }

  34%,
  76% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.14);
  }
}

@keyframes intro-glow {
  0% {
    opacity: 0;
    transform: scale(.7);
  }

  45%,
  82% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.55);
  }
}

@keyframes intro-mark {
  0% {
    transform: translateZ(80px) scale(.86);
  }

  72% {
    transform: translateZ(80px) scale(1);
  }

  100% {
    transform: translateZ(120px) scale(1.72);
  }
}

@keyframes intro-cross {
  0% {
    opacity: 0;
    transform: scale(.72);
  }

  42%,
  76% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

@keyframes intro-vignette {
  0%,
  16% {
    opacity: .15;
  }

  74% {
    opacity: .9;
  }

  100% {
    opacity: 0;
  }
}

@keyframes intro-exit {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@media (max-width: 720px) {
  .intro-stage {
    width: min(90vw, 420px);
  }

  .intro-mark {
    width: min(58vw, 220px);
  }

}

@media (prefers-reduced-motion: reduce) {
  .intro-sequence {
    animation: intro-exit 1ms ease both;
  }

  .intro-sequence *,
  .intro-sequence::before,
  .intro-sequence::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}