.intro-wrapper {
  background: var(--color-secondary);
  border-inline: var(--border);
  display: grid;
  place-content: center;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  position: fixed;
  z-index: var(--z-top);
  width: var(--pageWidth);
  height: var(--pageHeight);
  animation: introLeave 1000ms ease 5800ms 1 forwards;
}

.page-intro {
  position: relative;
}

.page-intro .map {
  padding: var(--step-0);
  opacity: 0;
  transform: scale(0.8);
  animation:
    mapEnter 2000ms ease-in-out 200ms 1 forwards,
    mapLeave 1800ms ease-in-out 4200ms 1 forwards;
}

.page-intro .spot {
  font-family: var(--font-secondary-italic);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  background: var(--color-highlight-1);
  padding: var(--step-0);
  border-radius: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  position: absolute;
  top: 32%;
  left: 52%;
  transform-origin: 50% 50%;
  transform: translate(-50%) scale(0.2);
  opacity: 0;
  animation:
    spotEnter 1000ms ease 2400ms 1 forwards,
    spotLeave 2000ms ease 4900ms 1 forwards;
}

.page-intro .title {
  opacity: 0;
  transform: translateY(1rem);
  animation: titleEnter 800ms ease 2800ms 1 forwards;
}

.page[data-intro="1"] {
  opacity: 0;
  animation: pageEnter 2000ms ease 3000ms 1 forwards;
}

@keyframes mapEnter {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes mapLeave {
  to {
    opacity: 0;
    transform: scale(2);
  }
}

@keyframes spotEnter {
  to {
    opacity: 1;
    transform: translate(-50%) scale(1);
  }
}

@keyframes spotLeave {
  to {
    opacity: 0;
  }
}

@keyframes titleEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes introLeave {
  to { opacity: 0; };
}

@keyframes pageEnter {
  to { opacity: 1 };
}