/* buttons.css. The rolling button labels (#13), from the custom websites page
   (package P6, 2026-09-24). Owner in the merged site: O2. On 2026-09-25 the
   hover and focus selectors also took the original site's .button class, whose
   label button() in shell.mjs now wraps in the same .btn-label span.

   Every booking button is <a class="btn ..." data-book><span class="btn-label"
   data-label="...">...</span></a>, made by cta() in templates/lib.mjs. The
   button's own look lives in base.css and is not changed here.

   The real text stays in place and invisible (text-fill-color: transparent),
   so the button keeps its exact size and its accessible name. Two ::before /
   ::after copies drawn from attr(data-label) carry the visible text and roll
   out of view on hover/focus; their empty alternative text keeps screen
   readers from reading them twice. The clip sits on the label, not the
   button, so the focus ring is never clipped. Scoped to full motion, modern
   `content: attr() / ""` support and no forced-colours mode: older browsers
   and forced colours get the plain button. */

@supports (content: "a" / "b") {
  @media (forced-colors: none) {
    :root[data-motion="full"] .btn-label {
      display: inline-block; position: relative;
      clip-path: inset(0 -4px);
      -webkit-text-fill-color: transparent;
    }
    :root[data-motion="full"] .btn-label::before,
    :root[data-motion="full"] .btn-label::after {
      content: attr(data-label) / "";
      position: absolute; left: 0; top: 0; width: 100%;
      -webkit-text-fill-color: currentColor;
      transition: transform 250ms cubic-bezier(.2, .7, .2, 1);
    }
    :root[data-motion="full"] .btn-label::after { top: 100%; }
    @media (hover: hover) {
      :root[data-motion="full"] :is(.btn, .button):hover .btn-label::before,
      :root[data-motion="full"] :is(.btn, .button):hover .btn-label::after { transform: translateY(-100%); }
    }
    :root[data-motion="full"] :is(.btn, .button):focus-visible .btn-label::before,
    :root[data-motion="full"] :is(.btn, .button):focus-visible .btn-label::after { transform: translateY(-100%); }
  }
}