Y-Axis Flip Button

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

【演出内容】
- ホバーするとボタンが縦軸まわりに半回転し、裏面に用意した別のラベルが現れる
- 表と裏は同じ大きさの1枚のカードとして扱い、厚みのない板が回るように見せる

【品質要件】
- 回転は0.5〜0.6秒。回転の途中で裏面の内容が透けて見えないようにする
- 回転軸はボタンの中心に固定し、位置を移動させない
- 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 rotates a half turn around its vertical axis, revealing a different label on the back face
- Treat the front and back as one card of equal size, like a board with no thickness

[Quality requirements]
- The rotation takes 0.5-0.6s. The back face must not show through mid-rotation
- Fix the axis at the button's center; the position must not move
- 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