.flower {
  position: fixed;
  bottom: 0;
  z-index: 3;
}

.main {
  display: flex;
  justify-content: center;
  transform-origin: bottom;
  transform: rotate(-3deg);
}

.stem {
  position: relative;
  z-index: 1;
  width: 5px;
}

.bloom {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: bloom-animation 1.5s ease-in-out 1s forwards;
  z-index: 3;
}

.bloom-center {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  z-index: 10;
}

.leaf {
  position: absolute;
  border-radius: 100%;
  z-index: 5;
}

.leaf:nth-child(1) {
  top: 0;
  left: -1px;
}

.leaf:nth-child(2) {
  top: 0;
  right: -1px;
}

.leaf:nth-child(3) {
  bottom: -3px;
  right: 2px;
}

.leaf:nth-child(4) {
  bottom: -3px;
  left: 2px;
}

.leaf:nth-child(5) {
  bottom: 2px;
}

.stem-leaf {
  position: absolute;
  width: 30px;
  height: 12px;
  transform: skew(25deg) rotate(-15deg);
  border-radius: 25px;
  left: 0px;
}

.stem-leaf:nth-child(1) {
  transform: skew(-25deg) rotate(15deg);
  left: -32px;
  animation: stem-leaf-left-animation 3s ease-in-out 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transform-origin: bottom right;
}

.stem-leaf:nth-child(2) {
  animation: stem-leaf-right-animation 3s ease-in-out 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transform-origin: top left;
  transform: rotate(-25deg) skew(25deg);
}

@keyframes bloom-animation {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(2);
  }
}

@keyframes stem-leaf-right-animation {
  from {
    transform: rotate(-25deg) skew(25deg);
  }
  to {
    transform: rotate(-10deg) skew(25deg);
  }
}

@keyframes stem-leaf-left-animation {
  from {
    transform: rotate(15deg) skew(-25deg);
  }
  to {
    transform: rotate(0) skew(-25deg);
  }
}