ライトスイープ Light sweep

「ライトスイープ（Light sweep）」の動きを実装してください。
OmochiX Learn の動く見本 #019（背景・雰囲気）です。

頼み方の例: プランのカードに、光が斜めに一筋通るライトスイープを付けて。3秒に1回くらい。
どんな動きか: カードの上を光が一筋通る
見本で起きること: 暗めのカードの上を、斜めの光が左から右へ通り抜けます。少し間を置いて繰り返します。
仕様:
- ::after に透明→白(0.35)→透明の斜め linear-gradient を置き、カードより大きくはみ出させる
- translateX(-60%)→(60%) を約1.3秒、周期3.2秒で繰り返す（残りは静止）
- カードは overflow: hidden で光をトリミング
- ホバー時だけ再生する版も用意する（常時再生は主役の要素だけに限る）
使いどころ: 料金プラン、プレミアムバッジ、キャンペーンのカード。
調整した値:
- 光が1回通り過ぎる周期は3.2s（既定）
- 光の強さは0.35（0〜1）（既定）
- 光の帯の幅は中心から前後10%（既定）
- 光の角度は115deg（既定）
- バッジの色: #6e4bff（既定）

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

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

<!-- ライトスイープ (Light sweep) | OmochiX Learn 動く見本 #019 | https://omochix.com/learn/motion/light-sweep/ -->

<style>
.ls{position:relative;display:grid;align-content:end;gap:8px;width:240px;height:130px;padding:16px;overflow:hidden;border-radius:16px;background:linear-gradient(145deg,#1e1b2e,#2a2440);color:#fff;border:1px solid rgba(255,255,255,.12)}
.ls::after{content:'';position:absolute;inset:-40% -60%;background:linear-gradient(var(--p-angle,115deg),transparent calc(50% - var(--p-band,10%)),rgba(255,255,255,var(--p-glow,.35)) 50%,transparent calc(50% + var(--p-band,10%)));transform:translateX(-60%);animation:ls var(--p-cycle,3.2s) cubic-bezier(.65,0,.35,1) infinite}
.ls__badge{width:max-content;padding:4px 10px;border-radius:999px;background:var(--p-color,var(--primary));font:700 11px/1 system-ui,sans-serif;letter-spacing:.08em}
.ls__t{font:700 20px/1.2 system-ui,sans-serif}
@keyframes ls{0%,20%{transform:translateX(-60%)}60%,100%{transform:translateX(60%)}}
</style>

<div class="ls"><span class="ls__badge">PRO</span><b class="ls__t">Premium Plan</b></div>