/* Scoped to the storefront: staff/cashier motion is unchanged. */
html.market-motion #sheets .sheet,
html.market-motion #sheets .sheet-in { animation: none; }
html.market-motion #sheets .closing { pointer-events: none; }
html.market-motion #sheets { overflow-x: clip; }

/* Use the same touch cadence for links, chips, profile rows and buttons. */
@media (prefers-reduced-motion: no-preference) {
  html.market-motion :is(button, .btn, [role="button"], a.yoyo-category, .prod-name, .more) {
    transition: transform var(--m-tap) var(--e-out), opacity var(--m-fast) var(--e-out),
      background-color var(--m-fast) var(--e-out), color var(--m-fast) var(--e-out),
      border-color var(--m-fast) var(--e-out), box-shadow var(--m-fast) var(--e-out);
    -webkit-tap-highlight-color: transparent;
  }
  html.market-motion :is(button, .btn, [role="button"], a.yoyo-category, .prod-name, .more):not(:disabled):not([aria-disabled="true"]):active {
    transform: scale(.97);
  }
  html.market-motion button:disabled:active { transform: none; }
  html.market-motion .ord-code-btn[aria-expanded="true"]:active { transform: none; }
  :host([data-market-motion]) :is(button, a) {
    transition: transform var(--m-tap) var(--e-out), opacity var(--m-fast) var(--e-out),
      background-color var(--m-fast) var(--e-out), color var(--m-fast) var(--e-out);
    -webkit-tap-highlight-color: transparent;
  }
  :host([data-market-motion]) :is(button, a):not(:disabled):active { transform: scale(.97); }
  html.market-motion .sk { position: relative; overflow: hidden; background: var(--line); animation: none; }
  html.market-motion .sk::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, var(--surface), transparent);
    animation: market-loading calc(var(--m-slow) * 4) var(--e-move) infinite;
  }
}
@keyframes market-loading { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
/* The partner illustration stays still; only loading may loop. */
:host([data-market-motion]) .pulse { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html.market-motion *, html.market-motion *::before, html.market-motion *::after,
  :host([data-market-motion]) *, :host([data-market-motion]) *::before, :host([data-market-motion]) *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
  html.market-motion :is(button, .btn, [role="button"], .tag):active,
  :host([data-market-motion]) :is(button, a):active { transform: none; }
}