/* Interaction-only motion: animate the icon, never the control's hit area. */
[data-ui-icon="previous"] { --interaction-icon-transform: translateX(-3px); }
[data-ui-icon="next"] { --interaction-icon-transform: translateX(3px); }
[data-ui-icon="search"] { --interaction-icon-transform: scale(1.12); }
:is([data-ui-icon="refresh"], .bm-reload) { --interaction-icon-transform: rotate(45deg); }
[data-ui-icon="close"] { --interaction-icon-transform: rotate(90deg); }
[data-ui-icon="reset"] { --interaction-icon-transform: rotate(-30deg); }
[data-ui-icon="more"] { --interaction-icon-transform: translateY(2px); }

@media (prefers-reduced-motion: no-preference) {
  [data-ui-icon]::before,
  :is(button, a[href], summary, [role="button"])
  :is(svg[aria-hidden="true"], [aria-hidden="true"] > svg) {
    transition: transform 160ms ease-out;
    transform-origin: center;
    transform-box: fill-box;
  }

  @media (hover: hover) and (pointer: fine) {
    [data-ui-icon]:not(:disabled, [aria-disabled="true"], [aria-busy="true"]):hover::before,
    :is(button, a[href], summary, [role="button"]):not(:disabled, [aria-disabled="true"], [aria-busy="true"]):hover
    :is(svg[aria-hidden="true"], [aria-hidden="true"] > svg) {
      transform: var(--interaction-icon-transform, translateY(-1px) scale(1.08));
    }
  }

  [data-ui-icon]:not(:disabled, [aria-disabled="true"], [aria-busy="true"]):focus-visible::before,
  :is(button, a[href], summary, [role="button"]):not(:disabled, [aria-disabled="true"], [aria-busy="true"]):focus-visible
  :is(svg[aria-hidden="true"], [aria-hidden="true"] > svg) {
    transform: var(--interaction-icon-transform, translateY(-1px) scale(1.08));
  }

  [data-ui-icon]:not(:disabled, [aria-disabled="true"], [aria-busy="true"]):active::before,
  :is(button, a[href], summary, [role="button"]):not(:disabled, [aria-disabled="true"], [aria-busy="true"]):active
  :is(svg[aria-hidden="true"], [aria-hidden="true"] > svg) {
    transform: scale(.9);
    transition-duration: 80ms;
  }
}

/* Summary cards remain informational; only their decorative icon responds to hover. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .tx-metrics > .tx-metric .tx-status-icon,
  :is(.bm-metrics, .orders-metrics, .topup-metrics, .bulk-counter-grid, .order-summary)[class] > :is(div, article) > :is(span, dt)::before {
    transition: transform 160ms ease-out;
    transform-origin: center;
  }
  .tx-metrics > .tx-metric:hover .tx-status-icon,
  :is(.bm-metrics, .orders-metrics, .topup-metrics, .bulk-counter-grid, .order-summary)[class] > :is(div, article):hover > :is(span, dt)::before {
    transform: translateY(-1px) scale(1.08);
  }
}