/* Shared interaction rhythm. Load after each surface's visual styles. */
:root {
  --motion-fast: 120ms;
  --motion-normal: 200ms;
  --motion-exit: 140ms;
  --motion-enter: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-move: cubic-bezier(0.25, 1, 0.5, 1);
}

/* Individual scale preserves controls that already use transform for positioning. */
:is(button, .button, .command-button, .site-button, summary) {
  touch-action: manipulation;
  transition: scale var(--motion-fast) var(--motion-enter),
    transform var(--motion-fast) var(--motion-enter),
    background-color var(--motion-fast) var(--motion-enter),
    border-color var(--motion-fast) var(--motion-enter),
    color var(--motion-fast) var(--motion-enter),
    opacity var(--motion-fast) var(--motion-enter);
}
:is(button, .button, .command-button, .site-button):not(:disabled):not([aria-disabled="true"]):active {
  scale: 0.98;
  transition-duration: 0s;
}
:where(button, .button, .command-button, .site-button, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* Navigation and keyboard selection are frequent; their selected state is immediate. */
:is([role="tab"], [role="menuitem"], .scope-button, .folder-button, .tool-button) {
  transition-duration: 0s;
}

/* Native dialog focus, Escape, form submission and close() stay synchronous.
   Discrete display/overlay transitions retain only the outgoing visual surface. */
dialog {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transform-origin: center;
  transition: opacity var(--motion-exit) var(--motion-enter),
    transform var(--motion-exit) var(--motion-enter),
    display var(--motion-exit) allow-discrete,
    overlay var(--motion-exit) allow-discrete;
}
dialog[open] {
  opacity: 1;
  transform: none;
  transition-duration: var(--motion-normal);
}
dialog:not([open]) { pointer-events: none; }
dialog::backdrop {
  opacity: 0;
  transition: opacity var(--motion-exit) var(--motion-enter),
    display var(--motion-exit) allow-discrete,
    overlay var(--motion-exit) allow-discrete;
}
dialog[open]::backdrop {
  opacity: 1;
  transition-duration: var(--motion-normal);
}
dialog:not([open])::backdrop { pointer-events: none; }
@starting-style {
  dialog[open] { opacity: 0; transform: translateY(8px) scale(0.98); }
  dialog[open]::backdrop { opacity: 0; }
}

/* Repeated menus open immediately and fade on dismissal. The hidden attribute
   remains authoritative, including in browsers without discrete transitions. */
:is(.account-menu, .row-menu, .folder-menu) {
  opacity: 1;
  transition: opacity 0s, display 0s allow-discrete;
}
:is(.account-menu, .row-menu, .folder-menu)[hidden] {
  opacity: 0;
  pointer-events: none;
  transition-duration: var(--motion-fast);
}

.toast {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--motion-normal) var(--motion-enter),
    transform var(--motion-normal) var(--motion-enter),
    display var(--motion-normal) allow-discrete;
}
.toast[hidden] {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition-duration: var(--motion-exit);
}
@starting-style {
  .toast:not([hidden]) { opacity: 0; transform: translateY(6px); }
}

[data-theme-switching] *,
[data-theme-switching] *::before,
[data-theme-switching] *::after,
[data-theme-switching] dialog::backdrop { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-normal: 0ms; --motion-exit: 0ms; }
  html { scroll-behavior: auto !important; }
  :is(button, .button, .command-button, .site-button):active { scale: none !important; }
  dialog, dialog[open], .toast, .toast[hidden] { transform: none; }
  @starting-style {
    dialog[open], .toast:not([hidden]) { transform: none; }
  }
}