* {
  box-sizing: border-box;
}

#stage {
  --multiplier: .9;
  align-items: center;
  background: #3b6bcc;
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 6rem 1.5rem 3rem;
  position: relative;
  width: 100vw;
}

@media(min-width: 801px) {
  #stage {
    min-height: calc(var(--multiplier) * 100vh);
    padding: 10rem 2rem;
  }
}

#stage .circle {
  --end-x: calc( var(--destination-left) - 50%);
  --end-y: calc( var(--destination-top) - 50%);
  --start-scale: 1;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-timing-function: ease-out;
  background: #45cc6e;
  border-radius: 50%;
  height: 0.75rem;
  position: absolute;
  left: 0;
  margin-left: 1ch;
  margin-top: -0.5ch;
  top: 0;
  width: 0.75rem;
}
#stage .circle:nth-of-type(1) {
  --start-x: 5vw;
  --mid-y: 33vh;
  --start-y: calc((100vh * var(--multiplier)) - 75%);
  --end-scale: .105;
  height: 7.125rem;
  width: 7.125rem;
}
#stage .circle:nth-of-type(2) {
  --start-x: 33vw;
  --start-y: calc((100vh * var(--multiplier)) - 125%);
  --mid-y: 55vh;
  --end-scale: .105;
  height: 7.125rem;
  width: 7.125rem;
}
#stage .circle:nth-of-type(3) {
  --start-x: 66vw;
  --start-y: calc((100vh * var(--multiplier)) - 50%);
  --mid-y: 33.5vh;
  --end-scale: .075;
  height: 10rem;
  width: 10rem;
}
#stage .circle:nth-of-type(1), #stage .circle:nth-of-type(2), #stage .circle:nth-of-type(3) {
  opacity: 0;
  transform: translate(var(--start-x), var(--start-y)) scale(var(--start-scale));
}
#stage.animate .circle:nth-of-type(1), #stage.animate .circle:nth-of-type(2), #stage.animate .circle:nth-of-type(3) {
  animation-name: ball-support;
  transform: translate(var(--end-x), var(--end-y)) scale(var(--end-scale));
}
#stage .circle:nth-of-type(4) {
  --start-x: calc(90vw - 50%);
  --start-y: calc(90vh - 50%);
  --start-scale: .55;
  --mid-scale: 1;
  --end-scale: .04;
  height: 18.375rem;
  width: 18.375rem;
  transform: translate(var(--start-x), var(--start-y)) scale(var(--start-scale));
}
#stage.animate .circle:nth-of-type(4) {
  animation-name: ball-main;
  transform: translate(var(--end-x), var(--end-y)) scale(var(--end-scale));
}
#stage.animate .circle:nth-of-type(4) h1 {
  opacity: 1;
}

@keyframes ball-support {
  0% {
    opacity: 0;
    transform: translate(var(--start-x), var(--start-y)) scale(var(--start-scale));
  }
  33.33% {
    animation-timing-function: cubic-bezier(0.38, 0.57, 0.15, 1.65);
    opacity: 1;
    transform: translate(var(--start-x), var(--start-y)) scale(var(--start-scale));
  }
  75% {
    animation-timing-function: cubic-bezier(0.38, 0.57, 0.15, 1);
    transform: translate(var(--start-x), var(--mid-y)) scale(var(--start-scale));
  }
  100% {
    animation-timing-function: cubic-bezier(0.38, 0.57, 0.15, 1);
    opacity: 1;
    transform: translate(var(--end-x), var(--end-y)) scale(var(--end-scale));
  }
}

@keyframes ball-main {
  0% {
    transform: translate(var(--start-x), var(--start-y)) scale(var(--start-scale));
  }
  26% {
    transform: translate(var(--start-x), var(--end-y)) scale(var(--mid-scale));
  }
  33.33% {
    animation-timing-function: cubic-bezier(0.38, 0.57, 0.15, 1.25);
    transform: translate(var(--start-x), var(--end-y)) scale(var(--mid-scale));
  }
  75% {
    transform: translate(var(--start-x), var(--end-y)) scale(var(--mid-scale));
  }
  100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate(var(--end-x), var(--end-y)) scale(var(--end-scale));
  }
}

#stage .message {
  color: #fff;
  max-width: 75rem;
  margin: auto;
  opacity: 0;
  position: relative;
  text-align: center;
  transition: opacity 0.3s 2s;
  z-index: 3;
}

#stage.animate .message {
  opacity: 1;
}

#stage .message .message-title {
  color: #fff;
  font-family: "Noto Serif", serif;
  /*font-size: clamp(1.5rem, 4.5vw ,4rem);*/
  font-size: clamp(2.25rem, 4.5vw ,4rem);
  margin-bottom: 1.25rem;
  margin-left: auto;
  margin-right: auto;
  transition: opacity 0.3s 2s;
}

@media(max-width: 1400px) {
  #stage .message .message-title {
    font-size: 2.625rem;
  }
}


#stage .message .message-title span {
  display: inline-block;
  line-height: 0.8;
}

#stage .message .message-body {
  font-size: 1.125rem;
  line-height: 1.8;
  margin-left: auto;
  margin-right: auto;
  max-width: 40rem;
}

#stage .message .message-buttons {
  margin-top: 2.5rem;
  /*max-height: calc( 1px * var(--height));*/
  opacity: 1;
  /*overflow: hidden;*/
  transition: all .3s;
}

@media(max-width:1400px) {
  #stage .message .message-buttons {
    display: none !important;
  }
}

#stage .message .message-buttons.hide {
  /*max-height: 0;*/
  opacity: 0;
  pointer-events: none;
}