.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);
}