scroll animation for a Timeline doesn´t work well

Question

I have a timeline at Codepen that uses html and css to create a line that moves from top to bottom when scrolling on the website, only the line is displayed on the entire website instead of just running over the second fixed line.

Z-index, hidden-overflow, ChatGPT, Perplexity and Gemini could not help me to solve the problem. Do you have a solution or am I just blinded by code?

Ps.i know its a easy solution with js. but i have zero knowledge with it.

body {
  background: #000;
}

.container-frontend-italia {
  height: 150px;
  z-index: 10;
  position: relative;
  display: block;
  background: #000;
}

.timeline {
  z-index: 0;
  position: relative;
}

.timeline-container {
  width: 100%;
  min-height: 100vh;
}

.w-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.w-container:before,
.w-container:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-container:after {
  clear: both;
}

.w-container .w-row {
  margin-left: -10px;
  margin-right: -10px;
}

.timeline-wrapper {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.timeline-progress {
  z-index: -9!important;
  width: 3px;
  height: 100%;
  background-color: #414141;
  position: absolute;
  overflow: hidden;
}

.timeline-progress-bar {
  width: 3px;
  height: 50vh;
  background-color: #c4ff29!important;
  padding: 0;
  bottom: 50vh;
  position: absolute;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.timeline-item {
  width: 100%;
  max-width: 1280px;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 160px 1fr;
  margin-left: auto;
  margin-right: auto;
  padding: 80px 15px;
}

.timeline-left {
  text-align: right;
}

.timeline-date-text {
  font-size: 33px;
  line-height: 1.2;
  position: -webkit-sticky;
  position: sticky;
  top: 50vh font-family: "bffutura;"
}

.timeline-center {
  text-align: left;
  justify-content: center;
  display: flex;
}

.timeline-right {
  font-weight: 500;
}

.timeline-circle {
  width: 15px;
  height: 15px;
  background-color: #fff;
  border-radius: 100%;
  position: -webkit-sticky;
  position: sticky;
  top: 50vh;
}

.timeline-text {
  font-family: "inter";
  font-size: var(--size-p);
  line-height: 26px;
  letter-spacing: var(--spacing-letter);
  font-weight: 500;
  width: 90%;
}

.text {
  animation: fade linear both;
  animation-timeline: view(block);
  animation-range: contain 20% cover 50%;
}

@keyframes fade {
  0% {
    opacity: 0.6;
    color: #999999;
  }
  100% {
    opacity: 1;
    color: #FFFFFF;
  }
}

@media screen and (max-width: 991px) {
  .w-container {
    max-width: 728px;
  }
}

@media screen and (max-width: 467px) {
  .w-row,
  .w-container .w-row {
    margin-left: 0;
    margin-right: 0;
  }
}

@media screen and (max-width: 479px) {
  .timeline-text {
    font-size: var(--read-text-mobile);
  }
}

@media screen and (min-width: 1440px) {
  .timeline {
    position: relative;
  }
  .timeline-container {
    overflow: visible;
  }
  .timeline-wrapper {
    flex-direction: column;
    align-items: center;
    display: flex;
  }
  .timeline-item {
    width: 100%;
    max-width: 1280px;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 160px 1fr;
    margin-left: auto;
    margin-right: auto;
    padding: 80px 0;
  }
  .timeline-left {
    text-align: right;
  }
  .timeline-center {
    justify-content: center;
    display: flex;
  }
  .timeline-right {
    letter-spacing: var(--spacing-letter);
  }
  .timeline-date-text {
    font-size: 33px;
    position: -webkit-sticky;
    position: sticky;
    top: 50vh;
  }
  .timeline-circle {
    width: 15px;
    height: 15px;
    background-color: #fff;
    border-radius: 100%;
    padding: 0;
    font-size: 16px;
    position: -webkit-sticky;
    position: sticky;
    top: 50vh;
  }
  .timeline-text {
    font-family: "inter";
    font-size: var(--size-p);
    line-height: 26px;
    letter-spacing: var(--spacing-letter);
    font-weight: 500;
    width: 90%;
  }
  .timeline-progress {
    z-index: -3;
    width: 3px;
    height: 100%;
    background-color: #414141;
    position: absolute;
  }
  .timeline-progress-bar {
    width: 3px;
    height: 50vh;
    background-color: #009dbe;
    position: absolute;
    /* display: none; */
    bottom: 50vh;
    /* top: 50vh;  */
  }
}

@media screen and (max-width: 991px) {
  .container {
    padding: 80px 50px 80px 60px;
  }
}

@media screen and (max-width: 769px) {
  .timeline {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 37px;
    padding-right: 37px;
  }
  .timeline-item {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    flex-direction: column;
    grid-template-rows: 1fr 64px;
    grid-template-columns: minmax(64px, 1fr);
    grid-auto-columns: 1fr;
    grid-auto-flow: row;
    align-content: stretch;
    justify-content: stretch;
    justify-items: start;
    padding: 80px 0 15px;
    display: grid;
  }
  .timeline-item.row-rmv {
    grid-template-rows: 1fr;
  }
  .timeline-center {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    display: flex;
    position: absolute;
    left: 10px;
  }
  .timeline-right {
    font-size: 16px;
    font-weight: 500;
  }
  .timeline-date-text {
    margin-bottom: 10px;
    font-size: 33px;
  }
  .timeline-text {
    font-size: var(--read-text-mobile);
  }
  .timeline-progress {
    left: 16px;
  }
}


}
@media screen and (max-width: 469px) {
  .container {
    background-color: rgba(0, 0, 0, 0);
    padding: 25px 10px 16px 11px;
  }
  
  .container.no-vertical-padding {
    padding-top: 2px;
  }
  
  .timeline {
    padding-left: 28px;
    padding-right: 15px;
  }
  
  .timeline-item {
    padding-top: 90px;
    padding-bottom: 90px;
  }
  
  .timeline-text {
    font-size: var(--read-text-mobile);
  }
  
  .timeline-date-text {
    margin-bottom: 10px;
    font-size: 26px;
  }
  
  .timeline-item.row-rmv {
    grid-template-rows: 1fr;
    padding-top: 70px;
    padding-bottom: 70px;
  }
  
  .timeline-center {
    left: 6px;
  }
  
  .timeline-progress {
    left: 11px;
  }
}

<div class="timeline">
  <div class="timeline-container w-container">
    <div class="timeline-wrapper">
      <div class="timeline-progress">
        <div class="timeline-progress-bar"></div>
      </div>
      <div class="w-layout-grid timeline-item row-rmv">
        <div class="timeline-left">
          <div class="timeline-date-text">
            <h2 class="text" data-bg-color="#999" data-fg-color="#ffffff">2022</h2>
          </div>
        </div>
        <div class="timeline-center">
          <div class="timeline-circle"></div>
        </div>
        <div class="timeline-right">
          <div class="timeline-text">
            <p class="text">Der Start zu deinem Podcast-Launch. Ein Tag, Vollgas Strategie- und Umsetzungsarbeit. Resultat ist das Konzept welches den Rahmen für deinen Podcast darstellen wird.</p>
          </div>
        </div>
      </div>
      <div class="w-layout-grid timeline-item row-rmv">
        <div class="timeline-left">
          <div class="timeline-date-text ">
            <h2 class="text" data-bg-color="#000" data-fg-color="orange">2023</h2>
          </div>
        </div>
        <div class="timeline-center">
        </div>
        <div class="timeline-right">
          <div class="timeline-text class">
            <p class="text" data-bg-color="#000" data-fg-color="orange">l"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec pretium libero. Donec sodales dolor ac mauris luctus vestibulum. Quisque tincidunt mi vitae quam fringilla interdum. Nulla facilisi. Sed non lectus at libero pharetra malesuada.</p>
          </div>
        </div>
      </div>
      <div class="w-layout-grid timeline-item row-rmv">
        <div class="timeline-left">
          <div class="timeline-date-text">
            <h2 class="text" data-bg-color="#000" data-fg-color="orange">2024</h2>
          </div>
        </div>
        <div class="timeline-center">
        </div>
        <div class="timeline-right">
          <div class="timeline-text class">
            <p class="text" data-bg-color="#000" data-fg-color="orange">l"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec pretium libero. Donec sodales dolor ac mauris luctus vestibulum. </p>
          </div>
        </div>
      </div>
      <div class="w-layout-grid timeline-item row-rmv">
        <div class="timeline-left">
          <div class="timeline-date-text">
            <h2 class="text" data-bg-color="#000" data-fg-color="orange">2024</h2>
          </div>
        </div>
        <div class="timeline-center">
          <div class="timeline-circle"></div>
        </div>
        <div class="timeline-right">
          <div class="timeline-text class2">
            <p class="text" data-bg-color="#000" data-fg-color="orange">Work on the Robin Voice platform with the goal of releasing it by the end of the year</p>
          </div>
        </div>
      </div>
      <div class="w-layout-grid timeline-item row-rmv">
        <div class="timeline-left">
          <div class="timeline-date-text">
            <h2 class="text" data-bg-color="#000" data-fg-color="orange">2025</h2>
          </div>
        </div>
        <div class="timeline-center">
          <div class="timeline-circle"></div>
        </div>
        <div class="timeline-right">
          <div class="timeline-text class2">
            <p class="text" data-bg-color="#000" data-fg-color="orange">l"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec pretium libero. Donec sodales dolor ac mauris luctus vestibulum.</p>
          </div>
        </div>
      </div>
      <div class="w-layout-grid timeline-item row-rmv">
        <div class="timeline-left">
          <div class="timeline-date-text">
            <h2 class="text" data-bg-color="#000" data-fg-color="orange">2026</h2>
          </div>
        </div>
        <div class="timeline-center">
          <div class="timeline-circle"></div>
        </div>
        <div class="timeline-right">
          <div class="timeline-text class2">
            <p class="text" data-bg-color="#000" data-fg-color="orange">l"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec pretium libero. </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>