/* The family's motion for the inside of the apps (owner's list item 72, 2026-10-17: "motion motion motion"). public/motion.js moves the
   landing pages (reveals, tilt, cycles); this file is the small, constant motion of using an app: a press gives under the finger, a
   dialog, menu, panel or toast eases in when it opens. Canonical copy: public/motion-ui.css; every other app's copy is byte-identical
   (test/motion-ui.test.js).
   - CSS only, so it costs nothing to run and needs no script. Every rule sits in :where() (no specificity), so an app's own style
     always wins, and it uses the separate scale and translate properties, so it never fights an element's own transform.
   - With reduced motion nothing here moves.
   - Things that re-render on every save (the workspaces' views) are deliberately left still: motion there would replay on each action. */
@keyframes mlx-rise { from { opacity: 0; translate: 0 8px; } }
@keyframes mlx-drop { from { opacity: 0; translate: 0 -6px; } }
@keyframes mlx-pop { from { opacity: 0; scale: .965; } }
@keyframes mlx-fade { from { opacity: 0; } }
@keyframes mlx-slide { from { opacity: .4; translate: 24px 0; } }

@media (prefers-reduced-motion: no-preference) {
  /* a press gives a little */
  :where(button, .button, .ml-button, .btn-primary, .btn-secondary, [role="button"], input[type="submit"], input[type="button"], a.ml-link-button) {
    transition: scale .16s cubic-bezier(.2, .8, .25, 1);
  }
  :where(button, .button, .ml-button, .btn-primary, .btn-secondary, [role="button"], input[type="submit"], input[type="button"], a.ml-link-button):not(:disabled):active {
    scale: .97;
    transition-duration: .06s;
  }

  /* dialogs, sheets and their backdrops */
  :where(dialog[open], .modal-card, .agent-panel:not([hidden]), [role="dialog"]:not([hidden]):not(dialog)) {
    animation: mlx-pop .22s cubic-bezier(.2, .8, .25, 1);
  }
  :where(dialog[open])::backdrop { animation: mlx-fade .2s ease-out; }
  :where(.modal-backdrop) { animation: mlx-fade .18s ease-out; }

  /* menus that drop open: the Labs menu, composer and action menus */
  :where(details[open] > nav, details[open] > .ml-menu-list, [role="menu"]:not([hidden]), [role="listbox"]:not([hidden])) {
    animation: mlx-drop .18s cubic-bezier(.2, .8, .25, 1);
  }

  /* switching tabs shows the new panel easing in */
  :where([role="tabpanel"]:not([hidden])) { animation: mlx-fade .22s ease-out; }

  /* the flagship's Workshop slides in from the side */
  :where(.workshop-open) { animation: mlx-slide .26s cubic-bezier(.2, .8, .25, 1); }

  /* toasts rise into view */
  :where(.toast, .ut-toast, .notif-toast) { animation: mlx-rise .26s cubic-bezier(.2, .8, .25, 1); }
}