流れるグラデーション Animated gradient

「流れるグラデーション（Animated gradient）」の動きを実装してください。
OmochiX Learn の動く見本 #017（背景・雰囲気）です。

頼み方の例: ヒーローの背景を、ゆっくり流れるグラデーションにして。7秒くらいで行って戻る感じ。
どんな動きか: 色がゆっくり流れて変わる背景
見本で起きること: 紫・青・アンバーのグラデーションが、ゆっくり左右に流れながら色合いを変え続けます。
仕様:
- linear-gradient を3〜4色で作り、最初と最後の色を同じにする
- background-size: 300% 300% にして background-position を 0%→100% へ動かす
- 7秒、ease-in-out、alternate で往復させる
- 文字を上に載せるときは白＋薄い影でコントラストを確保する
使いどころ: ヒーロー背景、CTAエリア、ブランドカラーを印象づけたいカード。
調整した値:
- 色1: #6e4bff（既定）
- 色2: #2563eb（既定）
- 色3: #d97706（既定）
- 往復に7sかける（既定）
- グラデーションの角度は120deg（既定）

実装の条件:
- HTML / CSS（必要なら素のJavaScript）で、外部ライブラリは使わない
- 見本の形・タイミング・イージングの数値はそのまま使い、文字・色・素材だけ今作っているものに合わせる
- prefers-reduced-motion: reduce の環境では動きを止めるか最小限にする
- 使った技術: CSS

見本（動くプレビューと参考コード）: https://omochix.com/learn/motion/gradient-shift/

<!-- 流れるグラデーション (Animated gradient) | OmochiX Learn 動く見本 #017 | https://omochix.com/learn/motion/gradient-shift/ -->

<style>
.gs{display:grid;place-items:center;width:260px;height:130px;border-radius:18px;background:linear-gradient(var(--p-angle,120deg),var(--p-c1,#6e4bff),var(--p-c2,#2563eb),var(--p-c3,#d97706),var(--p-c1,#6e4bff));background-size:300% 300%;animation:gs var(--p-cycle,7s) ease-in-out infinite alternate}
.gs span{font:800 28px/1 system-ui,sans-serif;letter-spacing:-.04em;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.2)}
@keyframes gs{from{background-position:0% 50%}to{background-position:100% 50%}}
</style>

<div class="gs"><span>OmochiX</span></div>