@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(90deg);
    opacity: 0.3;
  }
  100% {
    transform: rotateY(0deg);
    opacity: 1;
  }
}

.rotate {
  animation: rotate 0.6s ease-in-out;
  transform-style: preserve-3d;
}

/* Smooth transitions */
#personImg {
  will-change: transform, opacity;
}

#personName {
  will-change: opacity, color;
  transition: opacity 0.3s ease, color 0.3s ease;
}

/* Background transition */
body {
  will-change: background-image;
}