.chart-container {
  position: relative;
  width: 400px;
  height: 400px;
}

.animation-container {
  /* This container holds the circle and the line for positioning */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
}

.circle {
  /* Common styles for both blurred and sharp circles */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #334089;
  /* Updated circle color */
  border-radius: 50%;
}

.blurred-circle {
  /* The background, blurred circle */
  filter: blur(24px);
  opacity: 0.6;
}

.sharp-circle-container {
  /* This container will have the clip-path applied to it */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* The clip-path starts at the top, revealing nothing */
  clip-path: inset(0 0 100% 0);
}

.reveal-line {
  /* The horizontal line that moves down */
  position: absolute;
  left: -20%;
  /* Adjusted for increased width */
  width: 140%;
  /* Increased horizontal length */
  height: 1px;
  background-color: #e2e8f0;
  /* Updated subtle line color */
  /* Initially positioned at the top of the circle */
  transform: translateY(0px);
}