/* fx-magnetic: the main button leans toward a mouse pointer (desktop only), the label a little further, plus a soft
   sheen on hover. Touch screens and reduced motion get the plain button. */
[data-fx~="magnetic"]{position:relative;overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.1,1),box-shadow .3s;will-change:transform}
[data-fx~="magnetic"] .mg-l{display:inline-flex;align-items:center;gap:inherit;transition:transform .5s cubic-bezier(.2,.7,.1,1)}
[data-fx~="magnetic"].mg-on{transition:transform .15s linear,box-shadow .3s}
[data-fx~="magnetic"].mg-on .mg-l{transition:transform .15s linear}
@media (hover:hover) and (pointer:fine){
  [data-fx~="magnetic"]:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%);transition:transform .8s cubic-bezier(.2,.7,.1,1);pointer-events:none}
  [data-fx~="magnetic"]:hover:after{transform:translateX(120%)}
}
@media (prefers-reduced-motion:reduce){[data-fx~="magnetic"],[data-fx~="magnetic"] .mg-l{transform:none!important;transition:none!important}[data-fx~="magnetic"]:after{display:none}}