/* Small, finite effects. Navigation remains native and never waits for animation. */
@media screen and (prefers-reduced-motion:no-preference) {
  body>main { animation:page-content-enter 180ms ease-out; }
  :where(button,.button,.nav-toggle-label,.nav-shortcuts a,.nav-database>summary) {
    transition:background-color 120ms ease-out,border-color 120ms ease-out,opacity 100ms ease-out;
  }
  :where(button,.button):active:not(:disabled) { opacity:.8; }
  .nav-database[open]>div,.knowledge-evidence[open]>ol { animation:page-control-enter 140ms ease-out; }
  dialog[open] { animation:page-dialog-enter 160ms cubic-bezier(.2,.7,.3,1); }
}
/* Do not transform main: article tools inside it use viewport-fixed positioning. */
@keyframes page-content-enter { from { opacity:.45; } to { opacity:1; } }
@keyframes page-control-enter { from { opacity:.4; } to { opacity:1; } }
@keyframes page-dialog-enter { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }