@keyframes heartbeat {
0% {
transform: scale(1) rotate(0deg);
opacity: 1;
}
50% {
transform: scale(1.1) rotate(90deg);
opacity: 0.9;
}
100% {
transform: scale(1) rotate(0deg);
opacity: 1;
}
}

@keyframes moveAlongReading {
0% {
transform: translate(0, 0) rotate(0deg);
opacity: 1;
}
25% {
transform: translate(100%, 50%) rotate(90deg);
}
50% {
transform: translate(200%, 100%) rotate(180deg);
opacity: 0.8;
}
75% {
transform: translate(300%, 150%) rotate(90deg);
}
100% {
transform: translate(400%, 200%) rotate(180deg);
opacity: 1;
}
}

@keyframes width {
  0% {
    width: 0;
    background-color: var(--primary-trans-10);
  }
  
  100% {
    width: -35%;
    background-color: var(--primary-trans-50);
  }
}