/* Short, quiet motion for navigation and controls. Keep canvas content itself
   still; only the UI around it responds to user actions. */
@media (prefers-reduced-motion: no-preference) {
  .app-shell :where(
    .standard-page,
    .graph-page,
    .notes-layout,
    .problems-layout,
    .workspace-layout,
    .wb-library,
    .wb-editor
  ) {
    animation: forge-page-enter 190ms cubic-bezier(.2, .75, .25, 1);
  }

  .app-shell :where(button:not(:disabled), a, summary) {
    transition:
      color 150ms ease,
      background-color 150ms ease,
      border-color 150ms ease,
      box-shadow 170ms ease,
      transform 140ms cubic-bezier(.2, .75, .25, 1);
  }

  .app-shell :where(button:not(:disabled), summary):active {
    transform: scale(.985);
  }

  .app-shell :where(
    .wb-board-tile,
    .recent-notes > button,
    .graph-node-index-panel > button,
    .resource-table article
  ) {
    transition:
      transform 160ms cubic-bezier(.2, .75, .25, 1),
      box-shadow 180ms ease,
      border-color 160ms ease;
  }

  .app-shell :where(
    .wb-board-tile,
    .recent-notes > button,
    .graph-node-index-panel > button,
    .resource-table article
  ):hover {
    transform: translateY(-1px);
  }

  .app-shell :where(
    .resource-add-menu[open] > div,
    .more-menu[open] > div,
    .wb-menu-panel,
    .graph-node-index-panel
  ) {
    transform-origin: top right;
    animation: forge-menu-enter 150ms cubic-bezier(.2, .75, .25, 1);
  }

  .app-shell :where(
    .forge-dialog-backdrop,
    .canvas-library-backdrop,
    .canvas-rich-card-backdrop
  ) {
    animation: forge-backdrop-enter 150ms ease-out;
  }

  .app-shell :where(
    .forge-dialog,
    .canvas-note-library,
    .canvas-rich-card-editor
  ) {
    animation: forge-dialog-enter 180ms cubic-bezier(.2, .75, .25, 1);
  }

  @keyframes forge-page-enter {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes forge-menu-enter {
    from { opacity: 0; transform: translateY(-3px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  @keyframes forge-backdrop-enter {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes forge-dialog-enter {
    from { opacity: 0; transform: translateY(5px) scale(.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}