CSS animation-fill-mode: forwards not working - css

Question

I am trying to create a codepen where I have a circle that moves in a circular path based on its parent div getting rotated. I rotate the text inside the circle in the opposite direction at the same rate so that it create the allusion that the text does not rotate at all and stay upright. However, I would like to add an animation that pulses when I am hovering over the circle. I was able to do this, but the problem is that the text is then changing back to its original rotation (which is based on the orientation of the circle, and the text will not be upright).
Here is my code for anyone to replicate
HTML
<div class="container">
<div class="parent">
<div class="child">
<p>Word</p>
</div>
</div>
</div>
CSS
.container {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: blue;
}
.parent {
display: flex;
align-items: center;
/* justify-content: center; */
background-color: red;
width: 600px;
height: 600px;
animation: square-rotate 30s linear infinite;
pointer-events: none;
}
#keyframes square-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.child {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
width: 100px;
height: 100px;
border-radius: 50%;
pointer-events: auto;
}
p {
animation: text-rotate 30s linear infinite forwards;
animation-fill-mode: forwards;
pointer-events: auto
}
#keyframes text-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
.parent:hover {
background-color: green;
animation-play-state: paused;
}
.child:hover p {
/* animation-play-state: paused; */
animation: pulse 1s linear infinite;
}
#keyframes pulse {
0% {
transform:scale(1);
}
50% {
transform:scale(1.3);
}
100% {
transform:scale(1);
}
}
What exactly am I missing here? I need the text to not reset back to its rotation according to the white circle and just go through the pulse animation at whatever rotation it was in when my pointer hovers over the element.