Блок @starting-style { opacity: 0; transform: scale(0.96) } задаёт начальное состояние до transition на открытом dialog — мягче, чем анимация только через JS-класс.
Сочетайте с transition-behavior: allow-discrete для свойств display/overlay.
- [@starting-style — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style) — Начальные стили входа.
- [Entry animations — web.dev](https://web.dev/articles/entry-exit-animations) — Вход и выход.
---
## prefers-reduced-motion
При reduce отключайте scale и оставляйте мгновенное появление или короткий fade.