@keyframes drawLoop {
  0% {
    clip-path: inset(-100px 100% -100px 0);
    -webkit-clip-path: inset(-100px 100% -100px 0);
  }

  40% {
    clip-path: inset(-100px 0 -100px 0);
    -webkit-clip-path: inset(-100px 0 -100px 0);
  }

  60% {
    clip-path: inset(-100px 0 -100px 0);
    -webkit-clip-path: inset(-100px 0 -100px 0);
  }

  100% {
    clip-path: inset(-100px 0 -100px 100%);
    -webkit-clip-path: inset(-100px 0 -100px 100%);
  }
}

@keyframes tooltipAppear {

  0%,
  19% {
    opacity: 0;
    transform: scale(0.95);
  }

  22%,
  78% {
    opacity: 1;
    transform: scale(1);
  }

  81%,
  100% {
    opacity: 0;
    transform: scale(0.95);
  }
}
@property --fill {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes donutFillLoop {
  0% {
    --fill: 0deg;
    opacity: 0;
  }
  5% {
    --fill: 0deg;
    opacity: 1;
  }
  45% {
    --fill: 360deg;
    opacity: 1;
  }
  85% {
    --fill: 360deg;
    opacity: 1;
  }
  95% {
    --fill: 360deg;
    opacity: 0;
  }
  100% {
    --fill: 0deg;
    opacity: 0;
  }
}

@keyframes drawProgressLoop {
  0% {
    stroke-dashoffset: 351.8;
    opacity: 0;
  }
  5% {
    stroke-dashoffset: 351.8;
    opacity: 1;
  }
  45% {
    stroke-dashoffset: 80;
    opacity: 1;
  }
  85% {
    stroke-dashoffset: 80;
    opacity: 1;
  }
  95% {
    stroke-dashoffset: 80;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 351.8;
    opacity: 0;
  }
}

@keyframes statFade {
  0%, 40% {
    opacity: 0;
    transform: translateY(4px);
    filter: blur(2px);
  }
  45%, 85% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  95%, 100% {
    opacity: 0;
    transform: translateY(-4px);
    filter: blur(2px);
  }
}

@keyframes numberFade {
  0%, 4% { opacity: 0; }
  5%, 85% { opacity: 1; }
  95%, 100% { opacity: 0; }
}

@keyframes rowReveal {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes marquee-vertical-down {
  0% {
    transform: translateY(-50%);
  }

  100% {
    transform: translateY(0%);
  }
}