/* Motion is brief and event-driven. Reading and answer targets stay still.
   No idle loops, background movement, delayed controls, or animated scrolling. */
@media (prefers-reduced-motion: no-preference) {
  :root { --settle: cubic-bezier(0.2, 0.8, 0.2, 1); }

  button, select, input, textarea {
    transition: border-color 120ms ease, background-color 120ms ease,
      color 120ms ease, box-shadow 120ms ease;
  }
  #actions button {
    transition: border-color 120ms ease, background-color 120ms ease,
      color 120ms ease, box-shadow 120ms ease;
  }
  .dot { transition: background-color 160ms ease; }

  /* Alternating names restart only when a different card is presented.
     Polling the same card does not retrigger its reading animation. */
  #card[data-arrival="a"] .card-head,
  #card[data-arrival="a"] .card-content {
    animation: reading-arrives-a 160ms var(--settle);
  }
  #card[data-arrival="b"] .card-head,
  #card[data-arrival="b"] .card-content {
    animation: reading-arrives-b 160ms var(--settle);
  }

  #agents-view:not([hidden]), #history-view:not([hidden]),
  #updates-view:not([hidden]), #empty:not([hidden]),
  #login:not([hidden]), #toast:not([hidden]) {
    animation: surface-arrives 140ms ease-out;
  }
  #status-view[open] .sheet-body {
    animation: sheet-arrives 180ms var(--settle);
  }
  #note:not([hidden]), #explain-form:not([hidden]) {
    animation: surface-arrives 120ms ease-out;
  }

  @keyframes reading-arrives-a {
    from { opacity: 0.75; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes reading-arrives-b {
    from { opacity: 0.75; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes surface-arrives {
    from { opacity: 0.8; }
    to { opacity: 1; }
  }
  @keyframes sheet-arrives {
    from { opacity: 0.85; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* Feedback changes the surface, rather than shifting a target under a finger. */
button:active:not(:disabled) { box-shadow: inset 0 0 0 2px var(--accent); }
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .tab:hover, .qitem:hover, .row:hover { box-shadow: inset 0 0 0 1px var(--accent); }
}

@media (prefers-reduced-motion: reduce) {
  #card .card-head, #card .card-content,
  #agents-view, #history-view, #updates-view, #empty, #login, #toast,
  #status-view .sheet-body, #note, #explain-form {
    animation: none;
  }
  button, select, input, textarea, .dot { transition: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .capture-editor[open] { animation: surface-arrives 140ms ease-out; }
}