/* Emil /animate: occasional customer actions only; no counter or route motion. */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

body[data-role="welcome"] #sign-in,
body[data-role="customer"] :is(#buy-pack, #native-wallet button) {
  transform: scale(1);
  transition: transform 100ms var(--ease-out);
}

body[data-role="welcome"] #sign-in:active:not(:disabled):not(:focus-visible),
body[data-role="customer"] :is(#buy-pack, #native-wallet button):active:not(:disabled):not(:focus-visible) {
  transform: scale(0.98);
  transition-duration: 120ms;
}

/* Keyboard actions stay immediate, retaining the existing visible focus ring. */
body[data-role="welcome"] #sign-in:focus-visible,
body[data-role="customer"] :is(#buy-pack, #native-wallet button):focus-visible {
  transform: none;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body[data-role="welcome"] #sign-in,
  body[data-role="customer"] :is(#buy-pack, #native-wallet button) {
    transform: none;
    /* Override the legacy global transition reset only for this gentler feedback. */
    transition: opacity 100ms var(--ease-out) !important;
  }

  body[data-role="welcome"] #sign-in:active:not(:disabled):not(:focus-visible),
  body[data-role="customer"] :is(#buy-pack, #native-wallet button):active:not(:disabled):not(:focus-visible) {
    transform: none;
    opacity: 0.85;
    transition-duration: 120ms !important;
  }

  body[data-role="welcome"] #sign-in:focus-visible,
  body[data-role="customer"] :is(#buy-pack, #native-wallet button):focus-visible {
    transition: none !important;
  }
}