dialog[data-dialog-motion] {
  opacity: 0;
  transform: translateY(16px) scale(.985);
  transition: opacity .24s var(--ease), transform .32s var(--ease);
}
dialog[data-dialog-motion].is-dialog-visible { opacity: 1; transform: none; }
dialog[data-dialog-motion].is-dialog-closing { transition-duration: .2s, .24s; }
dialog[data-dialog-motion]::backdrop {
  background: rgb(25 27 30 / 0);
  backdrop-filter: blur(0);
  transition: background .24s var(--ease), backdrop-filter .32s var(--ease);
}
dialog[data-dialog-motion].is-dialog-visible::backdrop { background: rgb(25 27 30 / .45); backdrop-filter: blur(8px); }
dialog[data-dialog-motion].is-dialog-closing::backdrop { transition-duration: .24s; }
.nav-dialog[data-dialog-motion] nav > a {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .2s var(--ease), transform .28s var(--ease), color .2s var(--ease);
}
.nav-dialog.is-dialog-visible nav > a { opacity: 1; transform: none; }
.nav-dialog.is-dialog-visible nav > a:nth-child(1) { transition-delay: 40ms; }
.nav-dialog.is-dialog-visible nav > a:nth-child(2) { transition-delay: 70ms; }
.nav-dialog.is-dialog-visible nav > a:nth-child(3) { transition-delay: 100ms; }
.nav-dialog.is-dialog-visible nav > a:nth-child(4) { transition-delay: 130ms; }
.nav-dialog.is-dialog-visible nav > a:nth-child(5) { transition-delay: 160ms; }
.menu-button span { transition: transform .24s var(--ease); }
.menu-button[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-button[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.dialog-close { transition: background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease); }
.dialog-close:hover { background: var(--soft); border-color: var(--muted); }
.dialog-close:active { transform: scale(.94); }

/* Height and opacity are coordinated by the native-details controller. */
.faq-list details[data-faq-motion] .faq-answer { animation: none; }
.faq-list details[data-faq-state="closing"] > summary .plus { color: var(--ink); background: transparent; border-color: var(--line); }
.faq-list details[data-faq-state="closing"] > summary .plus::after { transform: rotate(90deg); }
.faq-list summary { transition: color .2s var(--ease); }

/* Selection feedback also transitions out when a checkbox is cleared. */
#contact .checkboxes span::before { content: '✓'; color: transparent; transition: color .18s var(--ease), border-color .18s var(--ease); }
#contact .checkboxes input:checked + span::before { color: var(--paper); }
:is(.header-contact, .submit-button, .review-dialog > .pill) { transition: background .25s var(--ease), color .25s var(--ease), opacity .15s var(--ease); }
:is(.header-contact, .review-dialog > .pill):active,
#contact .submit-button:active { opacity: .76; }
.review-dialog > .pill:hover { background: var(--muted); color: var(--paper); }
#footer :is(.footer-nav a, .privacy-button, .back-top) { transition: color .2s var(--ease), opacity .15s var(--ease), text-decoration-color .2s var(--ease); }
#footer .privacy-button { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; }
#footer .privacy-button:hover { color: var(--paper); text-decoration-color: currentColor; }
#footer :is(.footer-nav a, .privacy-button, .back-top):active { opacity: .76; }
#interest-error:not([hidden]) { animation: field-feedback-in .2s var(--ease); }
@keyframes field-feedback-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  dialog[data-dialog-motion],
  dialog[data-dialog-motion]::backdrop,
  .nav-dialog[data-dialog-motion] nav > a { transition: none; }
  #interest-error:not([hidden]) { animation: none; }
}