1/* The "magic" piece powered by custom properties */
2dialog {
3  --present: 0;
4  opacity: var(--present);
5  filter: blur(calc((1 - var(--present)) * 10px));
6  translate: 0 calc((1 - var(--present)) * 50%);
7
8  /* Acts like a hold animation */
9  transition-property: display, overlay, translate, opacity, filter;
10  transition-duration: 0.875s;
11  transition-behavior: allow-discrete;
12
13  /* Define with some nesting */
14  &[open] {
15    --present: 1;
16    display: flex;
17
18    @starting-style {
19      --present: 0
20    }
21  }
22}