/* ---- Motion: one hover feel for the whole site ----------------------------
   Jack, 7 Oct 2026: every hover should change state as smoothly as the
   homepage "Who we serve" rows, never snap. Every hover transition on the
   site points at these values, so changing them here changes the feel of
   every page (homepage, inner pages, both looks). Loaded on every page by
   chrome.ts, and on the homepage by index.astro. */
:root{
  --ease-soft:cubic-bezier(.22,1,.36,1);  /* fast start, long gentle settle */
  --hover-dur:.45s;                       /* colour, background, border, opacity */
  --hover-move:.6s;                       /* anything that slides or scales */
}

/* Baseline for anything interactive that sets no transition of its own.
   :where() has zero specificity, so a component's own transition always wins. */
:where(a, button, summary, [role="button"], .btn, input, select, textarea){
  transition-property:color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform;
  transition-duration:var(--hover-dur);
  transition-timing-function:var(--ease-soft);
}
/* What changes inside a link or button when it is hovered (a card's title,
   its "Read more" line, an arrow's gap). Colour and spacing only, never
   transform: some children are positioned by script and must not lag. */
:where(a, button, [role="button"]) :where(*){
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, gap;
  transition-duration:var(--hover-dur);
  transition-timing-function:var(--ease-soft);
}