<script>
document.addEventListener('DOMContentLoaded', function () {
    var card = document.querySelector('.login-card');
    if (!card) return;

    var maxRotate = 7;
    var currentX = 0, currentY = 0;
    var targetX = 0, targetY = 0;

    function onMove(e){
        var rect = card.getBoundingClientRect();
        var x = e.clientX - rect.left;
        var y = e.clientY - rect.top;
        var cx = rect.width / 2;
        var cy = rect.height / 2;

        targetX = ((y - cy) / cy) * -maxRotate;
        targetY = ((x - cx) / cx) *  maxRotate;
    }

    function onLeave(){
        targetX = 0;
        targetY = 0;
    }

    function animate(){
        // interpolazione morbida
        currentX += (targetX - currentX) * 0.12;
        currentY += (targetY - currentY) * 0.12;

        card.style.transform =
            'perspective(900px) rotateX(' + currentX.toFixed(2) + 'deg) rotateY(' + currentY.toFixed(2) + 'deg)';

        requestAnimationFrame(animate);
    }

    card.addEventListener('mousemove', onMove);
    card.addEventListener('mouseleave', onLeave);

    animate(); // parte il loop
});
</script>
