/* boton-magnetico — el botón se acerca ligeramente al cursor cuando pasas cerca.
   Portado del `magnetic-button` de la cantera.

   Es un detalle mínimo y es exactamente de los que separan una web de agencia de
   una de plantilla: el usuario no sabe por qué, pero nota que "responde". */
[data-lui~="iman"]{
  --lui-fuerza:.32;           /* cuánto sigue al cursor: 0 nada, .5 mucho */
  display:inline-block;
  transform:translate(var(--lui-dx,0px),var(--lui-dy,0px));
  transition:transform .35s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}

/* Al salir vuelve con un rebote suave; al seguir, casi instantáneo. La
   diferencia entre las dos duraciones es lo que lo hace parecer físico. */
[data-lui~="iman"][data-lui-cerca="1"]{transition-duration:.12s}

/* Si el botón lleva contenido propio, se puede mover MENOS que la caja para dar
   profundidad (el texto "arrastra" un poco por detrás). */
[data-lui~="iman"] > .lui-dentro{
  display:block;
  transform:translate(calc(var(--lui-dx,0px) * -.25),calc(var(--lui-dy,0px) * -.25));
  transition:inherit;
}

@media (prefers-reduced-motion:reduce),(hover:none){
  [data-lui~="iman"],[data-lui~="iman"] > .lui-dentro{transform:none;transition:none}
}