CSS @starting-style: Animate Elements From display:none

CSS transitions don't work when an element transitions from `display: none` — there's no starting style to interpolate from.

Before `@starting-style`, showing a modal required: 1. `display: none` → `display: flex` 2. Adding a class via setTimeout to trigger the transition

This caused layout thrashing and was fragile.

.modal {
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease, display 0.3s allow-discrete;
}
.modal.open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}
@starting-style {
  .modal.open {
    opacity: 0;
    transform: translateY(20px);
  }
}

`@starting-style` defines where the animation starts when the element first becomes visible.