/* ---------------------------------------------------------------------------
   Button hover: the gradient sweep (picked 22 Oct from nine samples; it replaced the
   glass sheen). A gradient twice the control's width glides in from the left as it
   fades up, on one ::before layer under the label:
     ink controls   (.btn-primary .btn-arrow, and quiet ones .btn-quiet .btn-ghost
                     .icon-btn .btn-view)  deep red → brand red, white label
     red controls   (.btn-lime .sub-pill .hs-go)  deepen to the darkest red
     pale controls  (.tagbtn .chip .hero2-try a .icon-link .nav-top .lang > summary)
                    a warm blush, red ink
     over the dark header or a dark hero ground  deep red → ink, light label
   Every stop keeps its label at AA on Linen (lowest 4.53:1).

   Why it is smooth:
   - The layer only changes opacity and transform, which the compositor runs; the
     gradient itself never swaps (a background-image swap cannot animate and snaps).
   - In and out share one curve and length.
   - Hover looks apply only where there is a real pointer, so a tap never leaves a
     button stuck "hovered"; presses apply everywhere, so touch still gets feedback.
   - Presses come last, so they win over the hover they start from.
   - Reduced motion keeps the colours and drops the glide.
   Keyboard focus shows the same look, with the global focus ring on top.
   --------------------------------------------------------------------------- */
:root {
  --btn-ease: cubic-bezier(.22, .8, .24, 1);
  --btn-d: .32s;
  /* the left half shows on hover; the right half sits behind the resting colour */
  --btn-g-ink: linear-gradient(115deg, var(--b-grad-end) 0%, var(--b-primary) 50%, var(--b-solid) 100%);
  --btn-g-red: linear-gradient(115deg, var(--b-grad-end) 0%, var(--b-accent-600) 50%, var(--b-accent) 100%);
  --btn-g-pale: linear-gradient(115deg, var(--b-accent-200) 0%, var(--b-tint-100) 55%, var(--b-tint-50) 100%);
  --btn-g-dark: linear-gradient(115deg, var(--b-grad-end) 0%, var(--b-ink-surface-2) 55%, var(--b-ink-surface) 100%);
}

/* every family holds the layer and moves on one curve */
:root :is(.tagbtn, .chip, .hero2-try a, .icon-link, .icon-btn, .nav-top, .lang > summary) { position: relative; isolation: isolate; overflow: hidden; }
:root :is(.btn, .sub-pill, .hs-go, .btn-arrow, .btn-view, .tagbtn, .chip, .hero2-try a, .icon-link, .icon-btn, .nav-top, .lang > summary) {
  transition: background-color var(--btn-d) var(--btn-ease), border-color var(--btn-d) var(--btn-ease), color var(--btn-d) var(--btn-ease), box-shadow var(--btn-d) var(--btn-ease); }
:root :is(.btn, .hs-go, .btn-view) .ico:last-child, :root .btn-arrow .ba-sq .ico { transition: transform .4s var(--btn-ease); }

/* the layer */
:root :is(.btn, .sub-pill, .hs-go, .btn-arrow, .btn-view, .tagbtn, .chip, .hero2-try a, .icon-link, .icon-btn, .nav-top, .lang > summary)::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 200%; pointer-events: none;
  background: var(--btn-g, var(--btn-g-ink)); opacity: 0; filter: none; transform: translateX(-50%);
  transition: opacity var(--btn-d) var(--btn-ease), transform .6s var(--btn-ease), filter .2s var(--btn-ease); }
:root :is(.btn-lime, .sub-pill, .hs-go) { --btn-g: var(--btn-g-red); }
:root :is(.tagbtn, .chip, .hero2-try a, .icon-link, .nav-top, .lang > summary) { --btn-g: var(--btn-g-pale); }
:root[data-heroground] .hero3 .hero2-try a { --btn-g: var(--btn-g-dark); }
/* Over a dark zone the nav takes no sweep at all: a plain, subtle white fill on hover (Shajee, 24 Oct) */
:root body.nav-dark :is(.icon-link, .nav-top, .lang > summary, .menu-btn)::before { display: none; }
/* Over a dark zone Subscribe sweeps to a whitish gradient with red text, so the hover still reads against the red hero */
:root body.nav-dark .sub-pill { --btn-g: linear-gradient(115deg, #fff 0%, var(--b-tint-50, #f8f1ef) 55%, var(--b-tint-100, #f1e3df) 100%); }

@media (hover: hover) {
  :root :is(.btn, .sub-pill, .hs-go, .btn-arrow, .btn-view, .tagbtn, .chip, .hero2-try a, .icon-link, .icon-btn, .nav-top, .lang > summary):is(:hover, :focus-visible)::before { opacity: 1; transform: translateX(0); }
  :root :is(.btn-primary, .btn-arrow, .btn-lime, .sub-pill, .hs-go):is(:hover, :focus-visible) { color: var(--b-accent-ink); }
  :root :is(.btn-quiet, .btn-ghost, .icon-btn, .btn-view):is(:hover, :focus-visible) { border-color: transparent; color: var(--b-solid-ink); }
  :root :is(.tagbtn, .chip, .hero2-try a):is(:hover, :focus-visible) { border-color: var(--b-accent-200); color: var(--b-accent-ink-light); }
  :root :is(.icon-link, .nav-top, .lang > summary):is(:hover, :focus-visible) { background-color: transparent; color: var(--b-accent-ink-light); }
  :root body.nav-dark .sub-pill:is(:hover, :focus-visible) { color: var(--b-accent-ink-light); }
  :root body.nav-dark :is(.icon-link, .nav-top, .lang > summary, .menu-btn):is(:hover, :focus-visible) { background-color: rgba(255, 255, 255, .12); color: var(--b-on-dark); transition: background-color .2s ease; }
  :root[data-heroground] .hero3 .hero2-try a:is(:hover, :focus-visible) { background-color: transparent; border-color: transparent; color: var(--b-on-dark); }
  /* the arrow leans the way it points */
  :root :is(.btn, .hs-go, .btn-view):is(:hover, :focus-visible) .ico:last-child,
  :root .btn-arrow:is(:hover, :focus-visible) .ba-sq .ico { transform: translateX(4px); }
}

/* presses, touch included: the layer shows and sinks a shade */
:root :is(.btn, .sub-pill, .hs-go, .btn-arrow, .btn-view, .tagbtn, .chip, .hero2-try a, .icon-link, .icon-btn, .nav-top, .lang > summary):active::before {
  opacity: 1; filter: brightness(.88); transition-duration: .08s; }
:root :is(.btn-primary, .btn-arrow, .btn-lime, .sub-pill, .hs-go):active { color: var(--b-accent-ink); }
:root :is(.btn-quiet, .btn-ghost, .icon-btn, .btn-view):active { border-color: transparent; color: var(--b-solid-ink); }
:root body.nav-dark :is(.icon-link, .nav-top, .lang > summary, .menu-btn):active { color: var(--b-on-dark); }

/* reduced motion: the colours stay, the glide and the lean go */
@media (prefers-reduced-motion: reduce) {
  :root :is(.btn, .sub-pill, .hs-go, .btn-arrow, .btn-view, .tagbtn, .chip, .hero2-try a, .icon-link, .icon-btn, .nav-top, .lang > summary),
  :root :is(.btn, .sub-pill, .hs-go, .btn-arrow, .btn-view, .tagbtn, .chip, .hero2-try a, .icon-link, .icon-btn, .nav-top, .lang > summary)::before,
  :root :is(.btn, .hs-go, .btn-view) .ico, :root .btn-arrow .ba-sq .ico { transition-duration: .01ms !important; }
  :root :is(.btn, .sub-pill, .hs-go, .btn-arrow, .btn-view, .tagbtn, .chip, .hero2-try a, .icon-link, .icon-btn, .nav-top, .lang > summary)::before { transform: none !important; }
  :root :is(.btn, .hs-go, .btn-view):is(:hover, :focus-visible) .ico:last-child,
  :root .btn-arrow:is(:hover, :focus-visible) .ba-sq .ico { transform: none !important; }
}