/* Routine feedback only. Content stays visible without motion or JavaScript. */
:root {
  --ui-feedback: 120ms;
  --ui-arrival: 180ms;
  --ui-ease: cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-reduced-motion: no-preference) {
  /* No geometry transitions: chart controls and touch targets stay in place. */
  :where(button, .btn, .shell-nav a, .personal-popover a,
    .shell-profile > summary, .studio-tabs a, .studio-tabs button) {
    transition: background-color var(--ui-feedback) ease,
      color var(--ui-feedback) ease, border-color var(--ui-feedback) ease;
  }

  :where(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
    select, textarea, .instrument-search) {
    transition: border-color var(--ui-feedback) ease,
      background-color var(--ui-feedback) ease, box-shadow var(--ui-feedback) ease;
  }

  .shell-profile[open] > .personal-popover {
    transform-origin: top right;
    animation: ui-menu-in var(--ui-arrival) var(--ui-ease);
  }

  :is(.cabinet-confirm, .desk-search)[open] {
    animation: ui-dialog-in var(--ui-arrival) var(--ui-ease);
  }

  :is(.cabinet-confirm, .desk-search)[open]::backdrop,
  .toast {
    animation: ui-feedback-in var(--ui-feedback) ease-out;
  }
}

@keyframes ui-menu-in {
  from { opacity: .6; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ui-dialog-in {
  from { opacity: .6; translate: 0 4px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes ui-feedback-in {
  from { opacity: .6; }
  to { opacity: 1; }
}

/* Explicit local fallback, even if this layer is reused without fresh-ui.css. */
@media (prefers-reduced-motion: reduce) {
  .shell-profile[open] > .personal-popover,
  :is(.cabinet-confirm, .desk-search)[open],
  :is(.cabinet-confirm, .desk-search)[open]::backdrop,
  .toast { animation: none; }
}