.top-animation {
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 1000;
  pointer-events: none;
  background-color: rgba(255, 255, 255, 0);
  animation: fadeOut 1s forwards;
  animation-timing-function: ease-in-out;
}

/* デフォルト状態（初回訪問時と再読み込み時） */
.cloud {
  position: absolute;
  pointer-events: none;
  animation: none;
  /* 初期状態ではアニメーションなし */
}

/* 右側の雲のデフォルト位置 */
.cloud:nth-child(1) {
  top: 13vh;
  right: -5vw;
  animation: moveRight 1s forwards;
}

.cloud:nth-child(2) {
  top: 0;
  right: -10vw;
  animation: moveRight 2s forwards 0.2s;
}

.cloud:nth-child(3) {
  top: 60vh;
  right: 20vw;
  animation: moveRight 2s forwards 0.4s;
}

/* 左側の雲のデフォルト位置 */
.cloud:nth-child(4) {
  bottom: 10vh;
  left: -5vw;
  animation: moveLeft 2s forwards 0.1s;
}

.cloud:nth-child(5) {
  top: 20vh;
  left: 20vw;
  animation: moveLeft 2s forwards 0.3s;
}

/* ボタン押下時のフルシーケンス */
.top-animation.full-sequence {
  animation:
    fadeInOut 2s forwards;
  animation-timing-function: ease-in-out;
}

/* ボタン押下時は雲を下から開始 */
.top-animation.full-sequence .cloud {
  transform: translateY(100vh);
}

.top-animation.full-sequence .cloud:nth-child(1) {
  animation:
    moveUp 1s forwards,
    moveRight 1s forwards 1.5s;
}

.top-animation.full-sequence .cloud:nth-child(2) {
  animation:
    moveUp 1s forwards 0.2s,
    moveRight 1s forwards 1.7s;
}

.top-animation.full-sequence .cloud:nth-child(3) {
  animation:
    moveUp 1s forwards 0.4s,
    moveRight 1s forwards 1.9s;
}

.top-animation.full-sequence .cloud:nth-child(4) {
  animation:
    moveUp 1s forwards 0.1s,
    moveLeft 1s forwards 1.6s;
}

.top-animation.full-sequence .cloud:nth-child(5) {
  animation:
    moveUp 1s forwards 0.3s,
    moveLeft 1s forwards 1.8s;
}

@keyframes fadeInOut {
  0% {
    background-color: rgba(255, 255, 255, 0);
  }

  50% {
    background-color: rgb(255, 255, 255, 1);
  }

  100% {
    background-color: rgba(255, 255, 255, 0);
  }
}

@keyframes fadeOut {
  from {
    background-color: rgb(255, 255, 255, 1);
  }

  to {
    background-color: rgba(255, 255, 255, 0);
  }
}

@keyframes moveUp {
  from {
    transform: translateY(100vh);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes moveRight {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(150%);
  }
}

@keyframes moveLeft {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-150%);
  }
}