カーソル方向へ傾くマグネットカード

<div class="d08-14-08-card">
          <b>Magnet Card</b>
          <p>カーソル方向にわずかに引き寄せられます</p>
        </div>

.d08-14-08-card{width:200px;padding:24px 20px;border-radius:16px;background:linear-gradient(160deg,#3730a3,#6d28d9);color:#fff;text-align:center;box-shadow:0 14px 30px rgba(76,29,149,.35);transition:transform .18s ease-out}
        .d08-14-08-card b{display:block;font-size:14px;margin-bottom:6px}
        .d08-14-08-card p{margin:0;font-size:11px;color:#e0d7ff;line-height:1.6}

(function(){
        var wrap=document.querySelector('#item-08-14-08 .d08-14-08');
        var card=document.querySelector('#item-08-14-08 .d08-14-08-card');if(!wrap||!card)return;
        wrap.addEventListener('mousemove',function(e){
          var r=card.getBoundingClientRect();
          var cx=r.left+r.width/2,cy=r.top+r.height/2;
          var dx=e.clientX-cx,dy=e.clientY-cy;
          var dist=Math.hypot(dx,dy);
          var radius=180;
          if(dist<radius){
            var p=(1-dist/radius);
            var rot=Math.max(-8,Math.min(8,(dx/radius)*8));
            card.style.transform='translate('+(dx*p*0.12)+'px,'+(dy*p*0.12)+'px) rotate('+rot+'deg)';
          }else{
            card.style.transform='';
          }
        });
        wrap.addEventListener('mouseleave',function(){card.style.transform='';});
      })();