Css – How to use mix-blend-mode to change text color on an animated background

i want to use mix-blend-mode to change the text color on a moving background svg.

My problem is, that i cant get the colors right.
I want red text on yellow background and yellow text on red background, but instead i get green text.
Image of the problem

I tried alot of things and got a pen where you can see the problem.

Here is my pen:
https://codepen.io/nicopoggenburg/pen/xxmjmNQ

    <div class="box">
      <div class="svgs">
        <div class="svg-container">
          <svg class="svg svg-1" viewBox="0 0 1024 244" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1029 59.77c-258.25 0-258.25 124.62-516.5 124.62S254.25 59.77-4 59.77" stroke="red" stroke-width="118.634" stroke-miterlimit="10"/>
      </svg>
        </div><div class="svg-container">
          <svg class="svg svg-2" viewBox="0 0 1024 244" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1029 59.77c-258.25 0-258.25 124.62-516.5 124.62S254.25 59.77-4 59.77" stroke="red" stroke-width="118.634" stroke-miterlimit="10"/>
      </svg>
        </div>
      </div>
      <h1 class="text">Do reinvent<br>the wheel</h1>

    </div>

    @keyframes moveWave {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }

    :root {
      --light: yellow;
      --dark: red;
    }
    .box {
      position: relative;
      overflow: hidden;
      background: var(--light);
      color: var(--light);
      padding: 20px 0;
    }
    .svgs {
      display: flex;
      width: 200%;
      animation: moveWave 5s linear infinite;
      height: 100%;
      display: flex;
      align-items: center;
    }
    .svg-container {
      width: 100%;
    }
    .svg {
      width: 100%;
      height: auto;
    }
    .svg-1 {
    }
    .svg-2 {
    }
    .text {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 80%;
      transform: translate(-50%, -50%);
      text-align: center;
      font-size: 90px;
      text-transform: uppercase;
      margin: 0;
      mix-blend-mode: difference;
      font-weight: 800;
    }

Anyone got a good solution for this?

I am thankful for every hint!