マスクリビール Mask reveal

「マスクリビール（Mask reveal）」の動きを実装してください。
OmochiX Learn の動く見本 #004（登場・退場）です。

頼み方の例: 見出しをマスクリビールで出して。帯が左から右へ通ったあとに文字が見える感じで、1秒くらい。
どんな動きか: 帯が通り過ぎた跡に文字が現れる
見本で起きること: 紫の帯が左から右へ通り抜け、その跡から「OmochiX」の文字が左から順に見えてきます。
仕様:
- 文字は clip-path: inset(0 100% 0 0) → inset(0 0 0 0) で左から現れる
- 同じタイミングで細い帯（幅18px）が左端から右端へ移動する
- 所要時間は約1秒、イージングは cubic-bezier(.65,0,.35,1)
- 帯の色はアクセントカラー、文字色は本文色
使いどころ: ヒーローの見出しやセクションタイトルを印象的に見せたいとき。
調整した値:
- 隠れた状態から見えて、また隠れるまでの1周期は3s（既定）
- バーの色: #6e4bff（既定）
- バーの太さは18px（既定）

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

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

<!-- マスクリビール (Mask reveal) | OmochiX Learn 動く見本 #004 | https://omochix.com/learn/motion/mask-reveal/ -->

<style>
.mr{position:relative;padding:8px 12px;overflow:hidden}
.mr__text{display:block;font:800 44px/1 system-ui,sans-serif;letter-spacing:-.04em;color:var(--text);clip-path:inset(0 100% 0 0);animation:mr-text var(--p-cycle,3s) cubic-bezier(.65,0,.35,1) infinite}
.mr__bar{position:absolute;inset:0 auto 0 0;width:var(--p-bar,18px);background:var(--p-color,var(--primary));transform:translateX(-30px);animation:mr-bar var(--p-cycle,3s) cubic-bezier(.65,0,.35,1) infinite}
@keyframes mr-text{0%,8%{clip-path:inset(0 100% 0 0)}40%,80%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes mr-bar{0%,8%{transform:translateX(-30px)}40%{transform:translateX(230px)}41%,100%{transform:translateX(-30px)}}
</style>

<div class="mr"><span class="mr__text">OmochiX</span><span class="mr__bar"></span></div>