dialog {
   padding: 0;
}
.modal {
   box-shadow: var(--shadow-2), 0 0 0 100vw rgb(0 0 0 / 0.5);

   background: #fff;
   color: #222;
   border: 0;
   border-radius: 0.25rem;
}

dialog::backdrop {
   background-color: rgba(0,0,0,0.5);
   -webkit-backdrop-filter: blur(5px);
   backdrop-filter: blur(5px);
}
dialog + .backdrop {
   background-color: rgba(0,0,0,0.5);
   -webkit-backdrop-filter: blur(5px);
   backdrop-filter: blur(5px);
}
.modal::backdrop {
   background: rgb(0 0 0 / 0.5);
   opacity: 0;
}

dialog[open] {
   animation: plop 1s ease-in forwards;
}
.modal[open] {
   animation: slide-up 1000ms forwards, fade-in 500ms forwards;
}
dialog[open]::backdrop {
   animation: fade 1s ease-in forwards;
}
/*
.modal[open]::backdrop {
  animation: fade-in 500ms forwards;
}
*/

.modal[closing] {
   display: block;
   pointer-events: none;
   inset: 0;
   animation: fade-out 500ms forwards;
}
/*
.modal[closing]::backdrop {
  animation: fade-out 500ms forwards;
}
*/



@keyframes plop {
   0%   { opacity: 0; transform: scale(0); }
   100% { opacity: 1; transform: scale(1); }
}
@keyframes fade {
   0%   { opacity: 0; }
   100% { opacity: 1; }
}

@keyframes fade-in {
   0%   { opacity: 0; }
   100% { opacity: 1; }
}
@keyframes fade-out {
   0%   { opacity: 1; }
   100% { opacity: 0; }
}
@keyframes slide-up {
   0%   { transform: translateY(100%); }
   100% { transform: translateY(0%); }
}