@keyframes toast-in-out {
  0% {
    opacity: 0;
    transform: translateX(40px) scale(0.96);
  }
  12% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  88% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(20px) scale(0.98);
  }
}

@keyframes toast-progress {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

.animate-toast {
  animation: toast-in-out 5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.animate-toast-progress {
  animation: toast-progress 5s linear forwards;
}