@keyframes pop {
  0% {
    transform: scale(0.9);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.status-box {
  animation: pop 0.3s ease-out;
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg);
    opacity: 1;
  }
  50% {
    transform: rotateY(180deg); /* Half flip */
    opacity: 0; /* Make the front disappear */
  }
  100% {
    transform: rotateY(360deg); /* Complete flip */
    opacity: 1;
  }
}

.rotate {
  animation: rotate 0.6s ease-in-out;
  transform-style: preserve-3d;
  backface-visibility: hidden; /* Hide the back during flip */
}