Анимация ключевого кадра CSS — позиция: как разместить круг точно на вершине конуса? ⇐ CSS

[Anonymous]

Я работаю над анимацией ключевых кадров CSS и пытаюсь переместить круг поверх конуса, который будет выглядеть как мороженое.
Я использовал абсолютное положение, но, к сожалению, оно не работает. Я пытался использовать %, так как хотел, чтобы страница была более отзывчивой.
Мой код:

Код: Выделить всё

.flavour {
width: 40px;
height: 40px;
border-radius: 50%;
text-align: center;
transition: all 1s;
background-color: orange;
position: absolute;
top: 35%;
left: 10%;
}

.flavourselected {
animation: flavourSelected 1s 1 ease-in-out forwards;
}

@keyframes flavourSelected {
100% {
top: calc(90% - 60px);
left: calc(50% + 20px);
transform: scale(3);
}
}

#cone {
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 120px solid lightsalmon;
border-radius: 50%;
position: absolute;
top: 90%;
left: 50%;
}

Код: Выделить всё

orange

mango

strawberry

Подробнее здесь: [url]https://stackoverflow.com/questions/76040682/css-keyframe-animation-position-how-to-place-a-circle-exactly-on-top-of-the-c[/url]