.modal {
  display: none;
}
.modal.is-open {
  display: block;
}

.modal[aria-hidden='false'] .modal__overlay {
  animation: fade-in 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.modal[aria-hidden='false'] .modal__container {
  animation: move-from-down 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
.modal[aria-hidden='true'] .modal__overlay {
  animation: fade-out 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.modal[aria-hidden='true'] .modal__container {
  animation: move-from-down-off 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes move-from-down {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes move-from-down-off {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}