ワードスワップ Word swap

「ワードスワップ（Word swap）」の動きを実装してください。
OmochiX Learn の動く見本 #008（テキスト・数字）です。

頼み方の例: 見出しの一部の言葉を、縦にめくれる感じで3つ順番に入れ替えて。1語あたり1.5秒表示。
どんな動きか: 言葉が縦にめくれて入れ替わる
見本で起きること: 「AIで」に続く言葉が「書く」「作る」「公開する」の順に、下から上へめくれるように入れ替わります。
仕様:
- 高さ1行の枠（overflow: hidden）の中で、縦に並べた言葉を translateY で1行ずつ送る
- 最後に最初の言葉をもう一度置き、戻るときの跳ねを隠す
- 切り替えは約0.35秒、イージングは cubic-bezier(.65,0,.35,1)
- 入れ替わる部分はアクセントカラーにする
使いどころ: サービスの価値を複数の言葉で見せるヒーロー見出し。
調整した値:
- 4語が1周するのに4.5s（既定）
- 入れ替わる語の色: #6e4bff（既定）
- 文字の大きさは34px（既定）
- 動き方は「なめらか」（既定）

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

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

<!-- ワードスワップ (Word swap) | OmochiX Learn 動く見本 #008 | https://omochix.com/learn/motion/kinetic-words/ -->

<style>
.kw{display:flex;gap:.3em;margin:0;font:800 var(--p-size,34px)/1.3 system-ui,sans-serif;letter-spacing:-.03em;color:var(--text)}
.kw__roll{display:inline-block;height:1.3em;overflow:hidden;color:var(--p-color,var(--primary))}
.kw__list{display:flex;flex-direction:column;animation:kw var(--p-cycle,4.5s) var(--p-ease,cubic-bezier(.65,0,.35,1)) infinite}
.kw__list span{height:1.3em}
@keyframes kw{0%,25%{transform:translateY(0)}33%,58%{transform:translateY(-1.3em)}66%,91%{transform:translateY(-2.6em)}100%{transform:translateY(-3.9em)}}
</style>

<p class="kw">AIで<span class="kw__roll"><span class="kw__list"><span>書く</span><span>作る</span><span>公開する</span><span>書く</span></span></span></p>