Как еще больше замедлить скорость вращения маленького кружка в конце анимации?

Подскажите плиз как еще больше замедлить скорость вращения маленького кружка в конце анимации? Например, чтобы последний оборот вокруг большого круга шел медленнее, еле еле... и останавливался в итоге. Набросал, но хотелось бы чтобы последних полобората анимация замедлилась еще больше... не могу добавиться такого эффекта

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        :root {
            --rotate-to: 2300deg;
        }

        body{
            display: flex;
            justify-content: center;
        }

        .container{
            padding: 60px;
            border: 1px solid #777;
        }

        .circle {
            width: 180px;
            height: 180px;
            border: 1px solid red;
            border-radius: 100%;
            position: relative;
        }

        .circle__arrow{
            width: 10px;
            height: 10px;
            border-radius: 100%;
            background: red;

            position: absolute;
            top: 0px;
            transform-origin: center 5.7em;
            left: calc(50% - 5px);

            transform: rotate(100deg);
        }

        .animate{
             animation-name: pulse;
             animation-duration: 5250ms;
             animation-fill-mode: forwards;
        }

        @keyframes pulse {
            0% {
                transform: rotate(0deg);
                animation-timing-function: cubic-bezier(.5,0,0,1);
            }
            /*90% {
                transform: rotate(2140deg);
            }*/
            100% {
                transform: rotate(var(--rotate-to));
            }
        }
    </style>

    <script>
        function run() {

            function randomRange(min, max) {
                return ~~(Math.random() * (max - min + 1)) + min
            }

            let root = document.querySelector(':root');
            let rand = randomRange(0, 360);
            let rotate = 2160;

            console.log('rand', rand);

            root.style.setProperty('--rotate-to', `${rotate}deg`);

            let element = document.querySelector('.circle__arrow')
            element.classList.remove('animate')
            setTimeout(() => {
                element.classList.add('animate')
            }, 100)
        }
    </script>
</head>
<body>
    <div class="container">
        <div class="circle">
            <div class="circle__arrow"></div>
        </div>
        <br><br>
        <button onclick="run()">click</button>
    </div>
</body>
</html>