svg path fill animation dasharray dashoffset

Question

I've created a bunch of cubic bezier curves in 1 svg path and now trying to fill the path from top to bottom with dasharray and offset, but the animation keeps starting at every cubic bezier curve start point, so at every C in the path. how can I combine the lines, so the animation goes from the very top to the very bottom?

Here's my svg animation: https://codepen.io/mj2023/pen/wvEMwyB

<style>
svg {
width: 600px;
overflow:visible;
}
#lined-svg path {
stroke-dasharray: 7867.43;
stroke-dashoffset: 7867.43;
animation: dash 5s linear alternate infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 7867.43;
}
to {
stroke-dashoffset: 0;
}
}
</style>
<svg id="lined-svg" viewBox="0 0 600 4088">
<path stroke="red" fill="none" stroke-width="6" d="M 300, 0 C 300, 114, 600, 76, 600, 190 C 600, 304, 300, 266, 300, 380 M 300, 380, C 300, 542.6, 600, 488.4, 600, 651 C 600, 813.6, 300, 759.4, 300, 922 M 300, 922, C 300, 1003.6, 600, 976.4, 600, 1058 C 600, 1139.6, 300, 1112.4, 300, 1194 M 300, 1194, C 300, 1308, 600, 1270, 600, 1384 C 600, 1498, 300, 1460, 300, 1574 M 300, 1574, C 300, 1655.6, 600, 1628.4, 600, 1710 C 600, 1791.6, 300, 1764.4, 300, 1846 M 300, 1846, C 300, 2008.6, 600, 1954.4, 600, 2117 C 600, 2279.6, 300, 2225.4, 300, 2388 M 300, 2388, C 300, 2604.6, 600, 2532.4, 600, 2749 C 600, 2965.6, 300, 2893.4, 300, 3110 M 300, 3110, C 300, 3224, 600, 3186, 600, 3300 C 600, 3414, 300, 3376, 300, 3490 M 300, 3490, C 300, 3555.4, 600, 3533.6, 600, 3599 C 600, 3664.4, 300, 3642.6, 300, 3708 M 300, 3708, C 300, 3822, 600, 3784, 600, 3898 C 600, 4012, 300, 3974, 300, 4088"></path>
</svg>