/* Notification animations */
.notification-item {
  pointer-events: auto;
}

/* Enter animation */
.notification-enter {
  transform: translateX(100%);
  opacity: 0;
}

.notification-enter-active {
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

/* Leave animation */
.notification-leave {
  transform: translateX(0);
  opacity: 1;
}

.notification-leave-active {
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.3s ease-in, opacity 0.3s ease-in;
}

/* Ensure notifications don't block interactions with page elements */
#notifications > * {
  pointer-events: auto;
}