Buonasera a tutti!

Sono un principiante di JavaScript, ho bisogno del vostro aiuto.

Stavo provando a creare una carta interattiva animata come nel video in allegato, ma non va come desideravo.

Sapete per caso dove si trova l'errore? In allegato il codice.

codice:
<!DOCTYPE html>
<html lang="it-IT">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BETA</title>
    <style>
        .container {
            width: 400px;
            height: 240px;
        }
        
        .card {
            width: 100%;
            height: 100%;
            border-radius: 20px;
            background: linear-gradient(to bottom right, #9847FF 0%, #C447FF 100%);
        }
        
        .card {
            --x-pos: 0.5;
            --y-angle: calc(var(--x-pos) * 5 deg);
            --y-pos: 0;
            --x-angle: calc(var(--y-pos) * 5 deg);
            transform: perspective(200px) rotateY(var(--y-angle)) rotateX(var(--x-angle));
        }
    </style>
</head>

<body>
    <script>
        const container = document.querySelector('.container');
        const card = document.querySelector('.card');
        const {
            width,
            height
        } = container.getBoundingClientRect();
        container.addEventListener('mousemove', (event) => {
            const {
                offsetX,
                offsetY
            } = event;
            card.style.setProperty('--x-pos', (offsetX / width) - 0.5);
            card.style.setProperty('--y-pos', (offsetY / height) - 0.5);
        });
    </script>
    <div class="container">
        <div class="card">
            <!--Contents card-->
        </div>
    </div>
</body>


</html>
Grazie in anticipo della risposta
NewTechSlyDev_