/* paint-reveal — 動きのプリセット（接頭辞 pf-）。説明は ../PRESET.md
 * 使い方: <span class="pf-paint-reveal">SAMPLE</span>。.is-on を足すと、文字（や面）が左から右へ一気に塗られて書き上がる
 *   塗られる間に縦にも 0.5 → 1 へ伸びる（スプレーで書くときの太り）。最初は何も見えない（描かれる前）
 * 位置は案件側（position・rotate など）。親は position: relative にして、飾りの語として absolute で置くのが基本 */
.pf-paint-reveal {
  --pf-dur: 700ms;                              /* 横に書き上がる長さ（縦は × 0.55） */
  --pf-delay: 300ms;                            /* 書き始めの待ち（.is-on 側だけに効く） */
  --pf-dur-repaint: 450ms;                      /* 書き直し（.is-repaint）の長さ */
  --pf-ease: cubic-bezier(1, 0.26, 0, 1);       /* 一瞬で走って最後だけ止まる */
  --pf-y-from: 0.5;                             /* 縦の伸びの始まり（1 で縦の動きなし） */
  --pf-color: #1a1a2e;
  display: inline-block;
  line-height: 1;
  color: var(--pf-color);
  clip-path: inset(-20% 100% -40% -10%);        /* 上下・左は余白つき（はみ出す影・線を切らない） */
  transform-origin: 0 50%;
  pointer-events: none;
}
.pf-paint-reveal.is-on {
  animation: pf-paint-reveal var(--pf-dur) var(--pf-ease) var(--pf-delay) both, pf-paint-reveal-y calc(var(--pf-dur) * 0.55) var(--pf-ease) var(--pf-delay) both;
}
/* 書き直し：すでに書き上がっている語を、待ちなしで短く書き直す（ホバー・押した直後など）。.is-on と一緒に付け、付け直すと再生される */
@keyframes pf-paint-reveal { from { clip-path: inset(-20% 100% -40% -10%); } to { clip-path: inset(-20% -10% -40% -10%); } }
@keyframes pf-paint-reveal-y { from { scale: 1 var(--pf-y-from); } to { scale: 1 1; } }
@media (prefers-reduced-motion: reduce) {
}