@keyframes cl-roll-in {
  0% {
    opacity: 0;
    transform: perspective(600px) translateY(100%) rotateX(-90deg);
  }
  100% {
    opacity: 1;
    transform: perspective(600px) translateY(0) rotateX(0deg);
  }
}
@keyframes cl-roll-in-red {
  0% { opacity: 0; transform: perspective(600px) translateY(100%) rotateX(-90deg); background-color: #ffe4e6; }
  100% { opacity: 1; transform: perspective(600px) translateY(0) rotateX(0deg); background-color: transparent; }
}
@keyframes cl-roll-in-blue {
  0% { opacity: 0; transform: perspective(600px) translateY(100%) rotateX(-90deg); background-color: #dbeafe; }
  100% { opacity: 1; transform: perspective(600px) translateY(0) rotateX(0deg); background-color: transparent; }
}
.flip-animation {
  animation: cl-roll-in 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  transform-origin: 50% 0%;
  transform-style: preserve-3d;
  display: inline-block;
}
.text-red-500.flip-animation { animation-name: cl-roll-in-red; }
.text-blue-500.flip-animation { animation-name: cl-roll-in-blue; }