/* Bisserv: small, quick animations for everything you can tap or click.
   Linked by every app (website, store, cafe portal, rider, admin). Uses `scale` and `translate`,
   so it never clashes with an element's own `transform`. Turned off for people who ask for less motion. */

/* Smooth changes */
:where(a, button, summary, select, [role="button"], label:has(> input[type="file"]), .zcard, .card, .item, .kpi, .ocard) {
  transition: scale .14s ease, translate .18s ease, box-shadow .18s ease, background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}

/* Press: buttons and chips shrink a little */
:where(button, .btn, summary, [role="button"], label:has(> input[type="file"]), .qbtn, .chip, a.zcard):not(:disabled):active { scale: .96; }

/* Hover (mouse only): buttons rise, cards lift, pictures grow */
@media (hover: hover) {
  :where(.btn):not(:disabled):hover { translate: 0 -1px; box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
  :where(.zcard, .who-card, .cafe-card, .offer-card, .otype-card, .item, .ocard, .kpi.click, .join-band .btn):hover { translate: 0 -3px; box-shadow: 0 14px 30px rgba(0, 0, 0, .10); }
  :where(.crave-item:hover .crave-img, .rail-btn:hover img, .zlogo:hover, .logo-btn:hover) { scale: 1.06; }
  :where(.fchip, .chip, .loc-opt, .nav a, .signin-menu a, .rail-btn, .opt, .pick):hover { translate: 0 -1px; }
}

/* Add-to-cart style buttons: a quick pop when pressed */
:where(.add-btn, .scr-add, .qty button):active { scale: .9; }

/* New content fades in gently */
@keyframes bisserv-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
:where(.zgrid > *, .ci, .locpop, .signin-menu) { animation: bisserv-in .28s ease backwards;   /* "backwards" so hover lift still works after it ends */ }
:where(.zgrid > :nth-child(2)) { animation-delay: .04s; }
:where(.zgrid > :nth-child(3)) { animation-delay: .08s; }
:where(.zgrid > :nth-child(n+4)) { animation-delay: .12s; }

/* Keyboard users see where they are */
:where(a, button, [role="button"], select, summary):focus-visible { outline: 3px solid rgba(224, 22, 30, .45); outline-offset: 2px; }

/* Examples inside empty fields (like the phone number 1234567890) are light grey, so they never look already filled in */
:where(input, textarea)::placeholder { color: #B4B4BB; opacity: 1; }

/* A button that is waiting for the server (sending the code, checking it, signing in): a small spinner and
   "Sending code…" style text, so people see something is happening. Keeps the button's colour, not the pale "off" one. */
@keyframes bisserv-spin { to { rotate: 360deg; } }
.btn.is-busy, .btn.is-busy:disabled { cursor: progress; opacity: 1; }
.btn-red.is-busy:disabled { background: var(--red); }
.btn.is-busy:hover { translate: none; box-shadow: none; }
.btn .spin { flex: none; width: 1.1em; height: 1.1em; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: bisserv-spin .7s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  :where(*):hover, :where(*):active { scale: none !important; translate: none !important; }
  .btn .spin { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }   /* a slow turn still shows it's working */
}