/* char-in — 動きのプリセット（接頭辞 pf-）。説明は ../PRESET.md
 * 使い方: 見出しを 1 文字ずつ <span class="pf-c" style="--i:0"> に分け、親（.pf-char-in）に .is-on を足すと、
 *   1 文字ずつ時間差で出る。種類は修飾クラスで切り替える（付けなければ rise）:
 *   --rise 下からせり上がる／--fall 上から落ちる／--from-l 左から滑り込む／--from-r 右から滑り込む／
 *   --blur ぼかしから浮かぶ／--drop 傾きながら落ちて弾む／--pop 小さい所からぽんと出る */
.pf-char-in {
  --pf-dur: 850ms;
  --pf-step: 30ms;
  --pf-delay: 100ms;
  --pf-dist: 0.9em;
  --pf-ease: cubic-bezier(0.08, 0.82, 0.17, 1);
}
.pf-char-in .pf-c { position: relative; opacity: 0; }   /* inline のまま top / left で動かす（行の折り返しは変わらない） */
.pf-char-in.is-on .pf-c {
  opacity: 1;
  animation: pf-char-in-rise var(--pf-dur) var(--pf-ease) calc(var(--pf-delay) + var(--i, 0) * var(--pf-step)) both;
}
/* 種類ごとの既定値（時間・距離・イージング・時間差）。--pf-* を要素に直接書けば上書きできる */
.pf-char-in--from-l { --pf-dist: 3em; }
.pf-char-in--drop   { --pf-dur: 900ms; --pf-step: 45ms; --pf-dist: 0.9em; --pf-rot: -14deg; --pf-ease: cubic-bezier(0.34, 1.56, 0.64, 1); }
.pf-char-in--pop    { --pf-dur: 500ms; --pf-step: 50ms; --pf-dist: 0.4em; --pf-from: 0.2; --pf-ease: cubic-bezier(0.34, 1.56, 0.64, 1); }
.pf-char-in--drop .pf-c, .pf-char-in--pop .pf-c { display: inline-block; }   /* transform を使う 2 種は inline-block が要る */
.pf-char-in--from-l.is-on .pf-c { animation-name: pf-char-in-from-l; }
.pf-char-in--drop.is-on   .pf-c { animation-name: pf-char-in-drop; }
.pf-char-in--pop.is-on    .pf-c { animation-name: pf-char-in-pop; }

@keyframes pf-char-in-rise   { from { top: var(--pf-dist); opacity: 0; } 30% { opacity: 1; } to { top: 0; opacity: 1; } }
@keyframes pf-char-in-fall   { from { top: calc(var(--pf-dist) * -1); opacity: 0; } 30% { opacity: 1; } to { top: 0; opacity: 1; } }
@keyframes pf-char-in-from-r { from { left: var(--pf-dist); opacity: 0; } 25% { opacity: 1; } to { left: 0; opacity: 1; } }
@keyframes pf-char-in-from-l { from { left: calc(var(--pf-dist) * -1); opacity: 0; } 25% { opacity: 1; } to { left: 0; opacity: 1; } }
@keyframes pf-char-in-blur   { from { top: calc(var(--pf-dist) * -1); opacity: 0; filter: blur(var(--pf-blur)); } to { top: 0; opacity: 1; filter: blur(0); } }
@keyframes pf-char-in-drop   { from { opacity: 0; transform: translateY(calc(var(--pf-dist) * -1)) rotate(var(--pf-rot)); } to { opacity: 1; transform: none; } }
@keyframes pf-char-in-pop    { from { opacity: 0; transform: scale(var(--pf-from)) translateY(var(--pf-dist)); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .pf-char-in .pf-c, .pf-char-in.is-on .pf-c { opacity: 1; animation: none; top: 0; left: 0; transform: none; filter: none; }
}