/* Modal animations */
div[data-modal-backdrop] {
  animation: modalBackdropIn 300ms ease-out forwards;
  backdrop-filter: blur(4px);
}

div[data-modal-backdrop="hidden"] {
  animation: modalBackdropOut 300ms ease-out forwards;
}

.modal-show {
  animation: modalIn 300ms ease-out forwards;
}

.modal-hide {
  animation: modalOut 300ms ease-out forwards;
}

/* Modal animations */
@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes modalOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(1rem);
  }
}

@keyframes modalBackdropIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalBackdropOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}