body {
  min-height: 500px;
}

#favDialog {
  opacity: 0;
  transition:
    display 1s allow-discrete,
    overlay 1s allow-discrete,
    translate 1s,
    opacity 1s;
  translate: 0 50%;
  will-change: translate, opacity;
  background-color: #f6f6f6;
}

#favDialog[open] {
  opacity: 1;
  translate: 0;
  @starting-style {
    opacity: 0;
    translate: 0 50%;
  }
}

#favDialog::backdrop {
  background: linear-gradient(#000d, #000a);
  opacity: 1;
  transition:
    display 1s allow-discrete,
    opacity 1s;

  @starting-style { opacity: 0 }
}

#favDialog:not([open])::backdrop {
  opacity: 0;
}