dialog:open {
  opacity: 1;
  transform: scaleY(1);
}

dialog {
  background-color: #7a087a;
  color: #ababab;
  backdrop-filter: blur(3px);
  box-shadow: 0px 0px 8px 8px black;
  max-width: 600px;
  opacity: 0;
  transform: scaleY(0);
  transition:
    opacity 0.7s ease-out,
    transform 0.7s ease-out,
    overlay 0.7s ease-out allow-discrete,
    display 0.7s ease-out allow-discrete;
}

@starting-style {
  dialog:open {
    opacity: 0;
    transform: scaleY(0);
  }
}

dialog::backdrop {
  background-color: transparent;
  transition:
    display 0.7s allow-discrete,
    overlay 0.7s allow-discrete,
    background-color 0.7s;
}

dialog:open::backdrop {
  background-color: rgb(0 0 0 / 25%);
}

@starting-style {
  dialog:open::backdrop {
    background-color: transparent;
  }
}