body {
  background-color: black;
  height: 100vh;
  width: 100vw;

  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  position: relative;
}

/* .logo-text {
  visibility: hidden;
} */

.logo::before {
  content: "";
  position: absolute;

  width: 169px;
  height: 90px;

  left: -44px;

  border-radius: 360px 0px 0px 360px;

  background-color: white;

  animation: openPillWhite 0.5s cubic-bezier(0.58, 1.83, 0.59, 0.95) 1s forwards,
    rotatePillWhite 0.5s cubic-bezier(0.58, 1.83, 0.59, 0.95) 2s forwards,
    closePillWhite 0.5s cubic-bezier(0.97, 0.22, 1, 0.23) 3s forwards;
}

.logo::after {
  content: "";
  position: absolute;

  width: 169px;
  height: 90px;

  right: -44px;

  border-radius: 0px 360px 360px 0px;

  background-color: red;

  animation: openPillRed 0.5s cubic-bezier(0.58, 1.83, 0.59, 0.95) 1s forwards,
    rotatePillRed 0.5s cubic-bezier(0.58, 1.83, 0.59, 0.95) 2s forwards,
    closePillRed 0.5s cubic-bezier(0.97, 0.22, 1, 0.23) 3s forwards;
}

/* ================================== */

@keyframes openPillRed {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(135px);
  }
}

@keyframes openPillWhite {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-135px);
  }
}

/* ================================== */

@keyframes rotatePillRed {
  from {
    transform: translateX(135px);
  }
  to {
    transform: translateX(-116px) translateY(-67px) rotate(-90deg)
      scale(0.26666);
  }
}

@keyframes rotatePillWhite {
  from {
    transform: translateX(-135px);
  }
  to {
    transform: translateX(53px) translateY(67px) rotate(-90deg) scale(0.26666);
  }
}

/* ================================== */

@keyframes closePillRed {
  from {
    transform: translateX(-116px) translateY(-67px) rotate(-90deg)
      scale(0.26666);
  }
  to {
    transform: translateX(-116px) translateY(-22px) rotate(-90deg)
      scale(0.26666);
  }
}

@keyframes closePillWhite {
  from {
    transform: translateX(53px) translateY(67px) rotate(-90deg) scale(0.26666);
  }
  to {
    transform: translateX(53px) translateY(22px) rotate(-90deg) scale(0.26666);
  }
}