マーカー線 Marker highlight

「マーカー線（Marker highlight）」の動きを実装してください。
OmochiX Learn の動く見本 #007（テキスト・数字）です。

頼み方の例: 文章の中のキーワードにマーカー線を引くアニメーションを付けて。左から右へ0.6秒で。
どんな動きか: 蛍光ペンを引くように強調される
見本で起きること: 文章の中の「マーカー」という言葉に、左から右へ蛍光ペンのような帯が引かれ、しばらく残ってから消えます。
仕様:
- span の背景に下半分だけ色が付く linear-gradient を使う
- background-size を 0% 100% → 100% 100% にして左から引く（約0.6秒、ease-in-out）
- 色は半透明のアンバー系（本文色の読みやすさを保つ）
- 行をまたぐ場合も自然につながるよう、box-decoration-break: clone を付ける
使いどころ: 本文中のキーワード、セクションのサブタイトルの強調。
調整した値:
- マーカーの色: #f5a455（既定）
- 線の太さは文字の高さの45%（既定）
- 引いて消えるまでの1周期は3s（既定）
- 動き方は「なめらか」（既定）

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

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

<!-- マーカー線 (Marker highlight) | OmochiX Learn 動く見本 #007 | https://omochix.com/learn/motion/marker-highlight/ -->

<style>
.mk{margin:0;font:600 22px/1.6 system-ui,sans-serif;color:var(--text)}
.mk span{background:linear-gradient(transparent calc(100% - var(--p-thick,45%)),rgba(245,164,85,.65) 0) no-repeat 0 0 / 0% 100%;background:linear-gradient(transparent calc(100% - var(--p-thick,45%)),color-mix(in srgb,var(--p-color,#f5a455) 65%,transparent) 0) no-repeat 0 0 / 0% 100%;padding:0 .1em;animation:mk var(--p-cycle,3s) var(--p-ease,ease-in-out) infinite}
@keyframes mk{0%,15%{background-size:0% 100%}40%,80%{background-size:100% 100%}95%,100%{background-size:0% 100%}}
</style>

<p class="mk">大事なところに<span>マーカー</span>を引く</p>