Origami Flip Button

【対象要素】
- サイト内のボタン1点（CTA・リンクボタン・フォームの送信ボタン等）に適用する

【演出内容】
- ホバーすると、ボタンが折り目で奥へ折れて消え、入れ替わりに別のラベルを持つ面が手前へ折れて現れる
- 上下の折り目を軸にした、紙を折り返すような動きにする

【品質要件】
- 折り返しは0.5秒前後。奥へ折れる面と手前へ来る面のタイミングを合わせる
- 待機状態で、これから現れる面の色や縁が隅から見えていないこと
- prefers-reduced-motion 時は演出を無効化し、状態変化だけが分かる静的表示にフォールバックする
- ラベルの可読性を落とさない。文字が読めなくなる瞬間を作らない

[Target element]
- Apply to a single button on your site (a CTA, a link button, a form submit button, etc.)

[Motion]
- On hover the button folds away from the viewer along a crease and disappears, while a second face carrying a different label folds forward into place
- Use the top and bottom edges as hinges, like folding a sheet of paper

[Quality requirements]
- The fold takes about 0.5s; time the outgoing and incoming faces to match
- At rest, no part of the incoming face's color or edge may be visible at the corners
- When prefers-reduced-motion is set, disable the animation and fall back to a static state change
- Never reduce the legibility of the label; do not create a moment where the text cannot be read