/* BANANA PAY motion: quick feedback, stable layout and unchanged dark borders. */
@media (prefers-reduced-motion: no-preference) {
  :is(button, .ui-btn, .sidenav-item, .tab, .period-btn, .filter-chip) {
    transition-property: background-color, color, border-color, box-shadow, transform, opacity;
    transition-duration: 160ms;
    transition-timing-function: var(--motion-ease);
  }
  :is(button, .ui-btn):not(:disabled):not([aria-disabled="true"]):active {
    transform: translateY(1px) scale(.98);
    transition-duration: 80ms;
  }
  .sidenav-item:not(.active):hover { transform: translateX(0.1875rem); }
  .sidenav-item.active { animation: bp-selected 240ms var(--motion-ease); }
  .tab.active, .period-btn.active { animation: bp-selected 200ms var(--motion-ease); }
  :is(.ui-btn, .setting-btn, .geo-fee) > svg { transition: transform 220ms var(--motion-ease); }
  :is(.ui-btn, .setting-btn, .geo-fee):not([aria-busy="true"]):hover > [data-bp-icon="plus"] { transform: rotate(90deg); }
  :is(.ui-btn, .setting-btn):not([aria-busy="true"]):hover > [data-bp-icon="settings"] { transform: rotate(24deg); }
  :is(.ui-btn, .setting-btn):not([aria-busy="true"]):hover > [data-bp-icon="refresh-cw"] { transform: rotate(35deg); }
  .brand-icon > img, .ui-brand__mark > img { transition: transform 240ms var(--motion-ease); }
  :is(.sidenav-brand, .ui-brand, .mobile-bar__brand):hover img { transform: rotate(-5deg) scale(1.04); }

  div[id^="hsection-"], div[id^="tab-"] { animation: bp-view 220ms var(--motion-ease); }
  [data-ui-modal] { animation: bp-overlay 160ms ease-out; }
  :is(.ui-dialog, .modal-card, .modal, .gc-card, .rq-modal) {
    animation: bp-dialog 260ms var(--motion-ease) backwards;
    transform-origin: 50% 40%;
  }
  .ui-auth__card { animation: bp-dialog 420ms var(--motion-ease) backwards; }
  :is(.menu__list, .ui-menu, .ui-dp) { animation-duration: 190ms; animation-timing-function: var(--motion-ease); }
  .menu__list { animation-name: bp-dialog; }
  .ui-dp--sheet { animation-duration: 260ms; }
  .ui-switch::after { transition: transform 240ms var(--motion-ease), background-color 180ms ease-out; }
  .pp-bar > span { transition: width 480ms var(--motion-ease); }
  details[open] > :not(summary) { animation: bp-view 220ms var(--motion-ease); }
  .msg-bubble-wrap.first-of-group { animation: bp-dialog 220ms var(--motion-ease); }

  .bp-spark-line { animation: bp-draw 650ms var(--motion-ease) backwards; }
  .bp-spark-fill { animation: bp-view 650ms ease-out; }
  .bp-spark-end { animation: bp-view 160ms ease-out 450ms backwards; }
}
@keyframes bp-view { from { opacity: .55; } to { opacity: 1; } }
@keyframes bp-overlay { from { opacity: 0; } to { opacity: 1; } }
@keyframes bp-dialog {
  from { opacity: .35; transform: translateY(0.75rem) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes bp-selected { from { opacity: .65; } to { opacity: 1; } }
@keyframes bp-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .bp-spark-line { stroke-dashoffset: 0; }
}