:root {
  --animation-initial-delay: 1.2s;
}

.intro-logo {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  margin: 0;
  pointer-events: none;

  animation-name: intro-logo;
  animation-duration: 0.01s;
  animation-delay: calc(var(--animation-initial-delay) + 0.2s);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.intro-swipe-up-animation {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;

  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;

  transform-origin: 100% 0;
  animation-name: intro-swipe-up-animation;
  animation-duration: 0.6s;
  animation-delay: var(--animation-initial-delay);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  background: #f0f0f0;
  pointer-events: none;
}

.intro-text-animation {
  animation-name: intro-text-animation;
  animation-duration: 1.1s;
  animation-delay: calc(var(--animation-initial-delay) + 0.2s);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.55, 0.97, 0.56, 0.97);
  opacity: 0;
}

@keyframes intro-logo {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes intro-swipe-up-animation {
  from {
    transform: scaleY(1);
  }

  to {
    transform: scaleY(0);
  }
}

@keyframes intro-text-animation {
  from {
    transform: translateY(30%);
    opacity: 0;
  }

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