/* Smooth motion on every ValueOddsAPI page (source: bootstrap/smooth-src/, linked last by inject_chrome.py).
   smooth.js animates layout (heights, moves, fade in/out); this file softens the state changes CSS owns.
   Every rule here is :where() (no specificity), so any element with its own transition keeps it. */

/* Hover, press, focus and selected states change over 160ms instead of snapping. */
:where(a, button, summary, label, input, select, textarea, [role="button"], [role="tab"], [role="option"],
  .btn, .chip, .card, .plan, .panel, .acc-nav a, .vo-chip, .bp-chip, .bp-row, .sb-row, .vo-cat-tab) {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform, filter;
  transition-duration: 160ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
/* The dashboard's active menu item (aria-current) eases in as well. */
:where(.acc-nav a, .acc-sheet a)[aria-current] { transition-duration: 220ms; }

/* Late images (bookmaker logos, lazy images) wait invisible until they arrive; smooth.js then fades them in. */
img.vo-img-wait { opacity: 0; }

/* /sports/ selection bar: the room it makes at the bottom of the page grows with it. */
:where(body) { transition: padding-bottom 280ms cubic-bezier(0.2, 0, 0, 1); }

/* Prices switching currency (the number size follows its length) ease into the new size. */
:where(.plan-price strong) { transition: font-size 220ms cubic-bezier(0.2, 0, 0, 1); }

/* Book picker: the slot counter's colour (normal, full, over) changes softly. */
:where(.bp-count) { transition: color 180ms cubic-bezier(0.2, 0, 0, 1); }

@media (prefers-reduced-motion: reduce) {
  :where(a, button, summary, label, input, select, textarea, [role="button"], [role="tab"], [role="option"],
    .btn, .chip, .card, .plan, .panel, .acc-nav a, .vo-chip, .bp-chip, .bp-row, .sb-row, .vo-cat-tab),
  :where(body), :where(.plan-price strong) { transition-duration: 0.01ms; }
  img.vo-img-wait { opacity: 1; }
}