body {
  margin: 0;
  overflow: hidden;
  background-color: #222222;
}

.center {
  position: absolute;
  margin: auto;
  top:0; bottom:0; left:0; right:0;
}

.frame {
  width: 650px;
  height: 450px;
  overflow: hidden;
  box-shadow: #111111 0 20px 35px -25px inset;
}

.glow {
  position: absolute;
  margin: auto;
  top: auto; bottom:50px; left:-460px; right:0;
  width: 10px;
  height: 10px;
  transform: translateY(-100%);
  border-radius: 50%;
  box-shadow: none;
  animation: join 2s -1s infinite,
    halo 2s -1s infinite;
}
.glow#two {
  animation: join 2s infinite,
    halo 2s infinite;
  
}

.half-heart {
  position: absolute;
  margin: auto;
  top: auto; bottom:50px; left:-460px; right:0;
  width: 60px;
  height: 60px;
  background-color: #C72E42;
  border-radius: 50%;
  transform: translate(-50%);
  animation: join 2s -1s infinite;
}
.half-heart::after {
  content: "";
  position: absolute;
  top: 28px;
  right: 0px;
  width:0;
  height:0;
  border: 30px solid transparent;
  border-left: 0; 
  border-right: 42px solid #C72E42;
}

.half-heart#two {
  animation: join 2s infinite;
}

.reflection {
  left: 490px;
  transform: rotateY(180deg) translate(-50%);
}

@keyframes join {
  20% {
    bottom: 180px;
  }
  40% {
    bottom: 180px;
    left: 0;
  }
  100% {
    bottom: 620px; 
    left: 0;
  }
}

@keyframes halo {
  40% {
    box-shadow: none;
  }
  41% {
    box-shadow: white 0 0 150px 30px;
  }
  100% {
    box-shadow: white 0 0 150px 30px;
  }
}