html,
body {
  margin: 0;
  padding: 0;
  background: black;
}

#stage {
  position: relative;
  width: 100%;
  height: 100vh;
}

.v-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/******************************************************
  animation
******************************************************/

/*** V ***/
.v {
  z-index: 0;
  position: absolute;
  top: 0;
  left: calc(50% - 200px);
  margin: auto;
  text-align:  center;
  border-right: 200px solid transparent;
  border-top: 346px solid #ff789c;
  border-left: 200px solid transparent;
  filter: drop-shadow(0px 0px 8px #d86582);
  animation: v1 2.5s ease 0s forwards,
             v2 0.3s ease 2.5s forwards,
             v3 0.8s ease 3.8s forwards,
             v4 0.4s ease 5.6s forwards,
             v5 0.5s ease-out 6.0s forwards,
             v6 0.4s ease-in 6.5s forwards,
             v7 0.06s ease 6.9s forwards,
             v8 1.5s ease-out 8s forwards,
             v9 0.5s ease-out 9.5s forwards;
}
.v::after {
  content: '';
  z-index: 1;
  position: absolute;
  top: -282px;
  left: calc(50% - 84px);
  margin: auto;
  text-align:  center;
  border-right: 84px solid transparent;
  border-top: 145px solid #000000;
  border-left: 84px solid transparent;
  animation: v3-af 0.8s ease 3.8s forwards;
}
.v::before {
  content: '';
  z-index: 2;
  position: absolute;
  top: -268px;
  left: calc(50% - 60px);
  margin: auto;
  text-align:  center;
  border-right: 60px solid transparent;
  border-top: 104px solid #ffeaed;
  border-left: 60px solid transparent;
  animation: v3-bf 0.8s ease 3.8s forwards;
}


/*******************************************************
 * keyframes
*******************************************************/

/*** V ***/
@keyframes v1 {
  0% {
    top: calc(-346px);
  }
  100% {
    top: calc(50% - 173px);
  }
}
@keyframes v2 {
  0% {
    top: calc(50% - 173px);
  }
  50% {
    border-top: 346px solid #ffeaed;
  }
  100% {
    top: calc(48% - 173px);
  }
}
@keyframes v3 {
  0% {
    top: calc(48% - 173px);
    border-right: 200px solid transparent;
    border-top: 346px solid #ff789c;
    border-left: 200px solid transparent;
  }
  100% {
    top: calc(38% - 173px);
    left: calc(50% - 100px);
    border-right: 100px solid transparent;
    border-top: 173px solid #ff789c;
    border-left: 100px solid transparent;
  }
}
@keyframes v3-af {
  0% {
    border-right: 84px solid transparent;
    border-top: 145px solid #000000;
    border-left: 84px solid transparent;
  }
  100% {
    top: calc(38% - 140px);
    left: calc(50% - 40px);
    border-right: 40px solid transparent;
    border-top: 69px solid #000000;
    border-left: 40px solid transparent;
  }
}
@keyframes v3-bf {
  0% {
    border-right: 60px solid transparent;
    border-top: 104px solid #ffeaed;
    border-left: 60px solid transparent;
  }
  100% {
    top: calc(38% - 132px);
    left: calc(50% - 26px);
    border-right: 26px solid transparent;
    border-top: 45px solid #ffeaed;
    border-left: 26px solid transparent;
  }
}
@keyframes v4 {
  0% {
    top: calc(38% - 173px);
  }
  100% {
    top: calc(38% - 123px);
  }
}
@keyframes v5 {
  0% {
    top: calc(38% - 123px);
    left: calc(50% - 100px);
  }
  100% {
    top: calc(25% - 100px);
    left: calc(40% - 100px);
    transform: rotate(-20deg);
  }
}
@keyframes v6 {
  0% {
    top: calc(25% - 100px);
    left: calc(40% - 100px);
    transform: rotate(-20deg);
  }
  100% {
    top: calc(38% - 123px);
    left: calc(50% - 100px);
  }
}
@keyframes v7 {
  0% {
    top: calc(38% - 123px);
    left: calc(50% - 100px);
  }
  50% {
    top: calc(38% - 126px);
    left: calc(50% - 101px);
  }
  100% {
    top: calc(38% - 123px);
    left: calc(50% - 100px);
  }
}
@keyframes v8 {
  0% {
    border-top: 173px solid #ff789c;
    top: calc(38% - 123px);
    left: calc(50% - 100px);
  }
  50% {
    border-top: 173px solid #ffeaed;
  }
  100% {
    border-top: 173px solid #ff789c;
    top: calc(20% - 123px);
    left: calc(50% - 100px);
  }
}
@keyframes v9 {
  0% {
    top: calc(20% - 123px);
    left: calc(50% - 100px);
  }
  100% {
    top: calc(-20% - 123px);
    left: calc(50% - 100px);
  }
}