:root {
  --motion-quick: 140ms;
  --motion-standard: 200ms;
  --motion-ease: cubic-bezier(.2,.8,.2,1);
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: ui-page-out 100ms ease-out both; }
  ::view-transition-new(root) { animation: ui-page-in 180ms ease-out both; }
  @keyframes ui-page-out { to { opacity: 0; } }
  @keyframes ui-page-in { from { opacity: 0; } }

  body :is(.btn, .inbox-tab, .inbox-settings-link, .admin-tab, .account-tab-button, .need-open-button) {
    transition: background-color var(--motion-quick) ease, border-color var(--motion-quick) ease,
      color var(--motion-quick) ease, box-shadow var(--motion-quick) ease;
  }

  /* Native dialog state and focus still change immediately. The browser keeps
     the visual in the top layer just long enough to finish its exit. */
  body dialog {
    opacity: 0;
    translate: 0 8px;
    transition: opacity var(--motion-standard) var(--motion-ease),
      translate var(--motion-standard) var(--motion-ease),
      display var(--motion-standard) allow-discrete,
      overlay var(--motion-standard) allow-discrete;
  }
  body dialog[open] { opacity: 1; translate: 0 0; }
  body dialog.site-notifications { translate: 24px 0; }
  body dialog.site-notifications[open] { translate: 0 0; }
  body dialog::backdrop {
    transition: opacity var(--motion-standard) ease,
      display var(--motion-standard) allow-discrete,
      overlay var(--motion-standard) allow-discrete;
    opacity: 0;
  }
  body dialog[open]::backdrop { opacity: 1; }
  @starting-style {
    body dialog[open] { opacity: 0; translate: 0 8px; }
    body dialog.site-notifications[open] { translate: 24px 0; }
    body dialog[open]::backdrop { opacity: 0; }
  }

  /* Ordinary disclosures expand in place. Navigation disclosures retain their
     existing coordinated opening and closing behavior. */
  @supports (interpolate-size: allow-keywords) {
    :is(.notification-settings, .admin-dashboard-more, .admin-dashboard-security)::details-content {
      interpolate-size: allow-keywords;
      block-size: 0;
      opacity: 0;
      overflow: clip;
      transition: block-size var(--motion-standard) var(--motion-ease),
        opacity var(--motion-standard) ease, content-visibility var(--motion-standard) allow-discrete;
    }
    :is(.notification-settings, .admin-dashboard-more, .admin-dashboard-security)[open]::details-content {
      block-size: auto;
      opacity: 1;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}