スケルトン Skeleton screen

「スケルトン（Skeleton screen）」の動きを実装してください。
OmochiX Learn の動く見本 #012（UIパーツの動き）です。

頼み方の例: 一覧の読み込み中はスケルトンを出して、データが来たら中身にふわっと切り替えて。
どんな動きか: 読み込み中の形だけ先に見せる
見本で起きること: グレーのプレースホルダーに光が流れ、読み込みが終わると本物のカードにふわっと置き換わります。
仕様:
- 本物と同じレイアウトのグレーのブロックを置く（画像・見出し・本文の形）
- 各ブロックに左→右へ流れる光（linear-gradient の translateX）を1.2秒周期で重ねる
- データ到着時は不透明度0→1で約0.3秒かけて本物に置き換える
- aria-busy="true" を読み込み中のコンテナに付け、完了時に外す
使いどころ: 一覧・カード・プロフィールなど、読み込みに1秒以上かかる画面。
調整した値:
- 光が1回流れるのに1.2s（既定）
- 骨組み→本物→骨組みの1周期は4s（既定）
- 光の強さは0.45（0〜1）（既定）

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

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

<!-- スケルトン (Skeleton screen) | OmochiX Learn 動く見本 #012 | https://omochix.com/learn/motion/skeleton-loading/ -->

<style>
.sk{position:relative;width:220px;height:130px}
.sk__ph,.sk__real{position:absolute;inset:0;padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.sk__img{height:56px;border-radius:10px;background:var(--line)}
.sk__t{height:10px;margin-top:12px;border-radius:5px;background:var(--line)}
.sk__t--s{width:55%;margin-top:8px}
.sk__ph>*{position:relative;overflow:hidden}
.sk__ph>*::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,var(--p-glow,.45)),transparent);transform:translateX(-100%);animation:sk-shine var(--p-shine,1.2s) linear infinite}
.sk__img--real{background:linear-gradient(135deg,var(--primary),var(--blue))}
.sk__title{margin:10px 0 0;font:700 13px/1.3 system-ui,sans-serif;color:var(--text)}
.sk__sub{margin:4px 0 0;font:500 11px/1.3 system-ui,sans-serif;color:var(--muted)}
.sk__ph{animation:sk-ph var(--p-cycle,4s) ease infinite}
.sk__real{opacity:0;animation:sk-real var(--p-cycle,4s) ease infinite}
@keyframes sk-shine{to{transform:translateX(100%)}}
@keyframes sk-ph{0%,55%{opacity:1}65%,92%{opacity:0}100%{opacity:1}}
@keyframes sk-real{0%,55%{opacity:0;transform:translateY(4px)}65%,92%{opacity:1;transform:translateY(0)}100%{opacity:0}}
</style>

<div class="sk"><div class="sk__ph"><div class="sk__img"></div><div class="sk__t"></div><div class="sk__t sk__t--s"></div></div><div class="sk__real"><div class="sk__img sk__img--real"></div><p class="sk__title">AIで作る最初の一歩</p><p class="sk__sub">5分で読める入門ガイド</p></div></div>