/* Brief feedback, with no stagger or delay before controls become usable. */
:root { --motion-ease: cubic-bezier(.2, .7, .3, 1); }
.btn, .icon-btn, .nav, .seg, .custom-select-btn, .modal-close,
.login-tab, .dropdown-menu button {
  transition: transform 120ms var(--motion-ease), background-color 160ms ease,
              border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}
.btn:active:not(:disabled), .icon-btn:active:not(:disabled), .nav:active,
.seg:active:not(:disabled), .custom-select-btn:active:not(:disabled),
.modal-close:active, .login-tab:active { transform: scale(.985); }
.acct-card:hover { transform: none; }
.view.active { animation: page-soft-in 200ms var(--motion-ease); }
.view.active > .page-grid > .card, .view.active > .card, .gs-card { animation: none; }
.dropdown-menu:not(.hidden), .notif-popover:not(.hidden),
.add-account-row:not(.hidden), .batch-bar:not(.hidden) {
  animation: panel-soft-in 150ms var(--motion-ease);
}
.modal:not(.hidden) { animation: page-soft-in 150ms ease; }
.modal:not(.hidden) .modal-body { animation: panel-soft-in 180ms var(--motion-ease); }
details[open] > :not(summary) { animation: page-soft-in 160ms ease; }
.motion-expanding { overflow: hidden; overflow-anchor: none; }
/* Closing a panel re-opens it for one tick to measure the collapsed height, which
   restarts the [open] fade on the content -- so a panel folding shut also fades
   in. While the box itself is animating, the content just rides along. The
   site-motion rules below set these with !important, so match their weight. */
.motion-expanding > :not(summary),
html[data-site-motion="on"] details.motion-expanding[open] > :not(summary) {
  animation: none !important;
}
@keyframes page-soft-in { from { opacity: .35; } to { opacity: 1; } }
@keyframes panel-soft-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled), .icon-btn:hover:not(:disabled) { transform: translateY(-1px); }
  .btn:hover:active:not(:disabled), .icon-btn:hover:active:not(:disabled) { transform: scale(.985); }
}
@media (prefers-reduced-motion: reduce) {
  .view.active, .dropdown-menu, .notif-popover, .add-account-row, .batch-bar,
  .modal, .modal-body, details[open] > :not(summary) { animation: none !important; }
  .btn, .icon-btn, .nav, .seg, .custom-select-btn, .modal-close,
  .login-tab, .dropdown-menu button { transition: none !important; transform: none !important; }
}

/* Explicit site motion takes priority over the Windows setting. */
html[data-site-motion="on"] input[type="checkbox"].switch {
  background: rgba(255, 108, 165, .05);
  transition: background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease !important;
}
html[data-site-motion="on"] input[type="checkbox"].switch:checked {
  background: #da216d;
  border-color: rgba(255, 108, 165, .5);
}
html[data-site-motion="on"] input[type="checkbox"].switch::before {
  transition: transform 240ms cubic-bezier(.2,.7,.3,1), background-color 240ms ease !important;
}
html[data-site-motion="on"] .view.active {
  animation: page-clean-in 280ms var(--motion-ease) both !important;
}
html[data-site-motion="on"] :is(.dropdown-menu, .notif-popover, .add-account-row, .batch-bar):not(.hidden),
html[data-site-motion="on"] .modal:not(.hidden) .modal-body {
  animation: panel-clean-in 220ms var(--motion-ease) both !important;
}
html[data-site-motion="on"] .modal:not(.hidden) { animation: page-soft-in 180ms ease !important; }
html[data-site-motion="on"] details[open] > :not(summary) { animation: page-soft-in 200ms ease !important; }
html[data-site-motion="on"] :is(.view.active, .dropdown-menu, .notif-popover, .add-account-row, .batch-bar, .modal, .modal-body, details[open] > :not(summary)) {
  animation-iteration-count: 1 !important;
}
html[data-site-motion="on"] :is(.btn, .icon-btn, .nav, .seg, .custom-select-btn, .modal-close, .login-tab, .dropdown-menu button, .sc-root button) {
  transition: transform 150ms var(--motion-ease), background-color 180ms ease,
              border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, opacity 180ms ease !important;
}
html[data-site-motion="on"] :is(.btn, .icon-btn, .nav, .seg, .custom-select-btn, .modal-close, .login-tab, .sc-root button):active:not(:disabled) {
  transform: scale(.97) !important;
}
html[data-site-motion="on"] .sc-panel { transition: opacity 240ms ease, transform 240ms var(--motion-ease), visibility 240ms ease !important; }
html[data-site-motion="on"] .sc-root :is(.sc-msg, .sc-faq-a, .sc-messages:not([hidden]), .sc-faq:not([hidden])) {
  animation: panel-clean-in 220ms ease both !important;
  animation-iteration-count: 1 !important;
}
@keyframes page-clean-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes panel-clean-in {
  from { opacity: 0; transform: translateY(6px) scale(.99); }
  to { opacity: 1; transform: none; }
}
@media (hover: hover) and (pointer: fine) {
  html[data-site-motion="on"] :is(.btn, .icon-btn):hover:not(:disabled) { transform: translateY(-2px) !important; }
  html[data-site-motion="on"] :is(.btn, .icon-btn):hover:active:not(:disabled) { transform: scale(.97) !important; }
}