Css 如何使用混合混合模式更改动画背景上的文本 colored颜色

我想使用混合-混合-模式来更改移动背景SVG上的文本 colored颜色 .

我的问题是，我找不到正确的 colored颜色 . 我想要黄色背景上的红色文本和红色背景上的黄色文本，但我得到的是绿色文本. Image of the problem个

我试了很多方法，拿到了一支钢笔，你可以看到问题所在.

这是我的钢笔: 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;
    }

有没有人有好的解决方案？

我感谢每一个提示！