Curved SVG Hero Title with Animated Shine

<div class="animate-blur-in delay-400 max-w-5xl mt-6 mr-auto ml-auto relative" style="height: clamp(150px, 40vw, 320px)">
              <svg viewBox="0 0 1000 320" class="max-w-[1024px] mr-auto ml-auto w-[1024px] h-[320px]" stroke-width="2" preserveAspectRatio="xMidYMid meet" data-icon-replaced="true" style="width: 1024px; height: 320px; color: rgb(255, 255, 255);">
                <defs class="">
                  <path id="curve-title" d="M 100,250 Q 500,50 900,250" fill="transparent" class=""></path>
                  <path id="curve-subtitle" d="M 120,295 Q 500,135 880,295" fill="transparent" class=""></path>
                </defs>
                <text class="text-[40px] sm:text-[56px] md:text-[72px] lg:text-[110px] font-semibold tracking-tight fill-white animate-flux-shine" text-anchor="middle" style="font-family: Inter, ui-sans-serif, system-ui;">
                  <textPath href="#curve-title" startOffset="50%" class="">
                    Build. Ship. Scale.
                  </textPath>
                </text>
                <text class="text-[13px] sm:text-[16px] md:text-[18px] lg:text-[22px] fill-zinc-400" text-anchor="middle" style="font-family: Inter, ui-sans-serif, system-ui;">
                  <textPath href="#curve-subtitle" startOffset="50%" class="">
                    The workflow platform built for modern teams. Ship faster
                    with intelligent automation.
                  </textPath>
                </text>
              </svg>
            </div>