/* attendance/static/attendance/css/messages.css */

/* Default visible state */
.fade-message {
  opacity: 1;
  transform: translateY(0);
  animation: slideFadeIn 0.6s ease forwards;
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

/* When hiding */
.fade-message.hide {
  opacity: 0;
  transform: translateY(-15px);
}

/* Entrance animation */
@keyframes slideFadeIn {
  from {
    opacity: 0;
    transform: translateY(-15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}