/* float — 動きのプリセット（接頭辞 pf-）。説明は ../PRESET.md
 * 使い方: class="pf-float" の要素に .is-on を足すと、常に軽く浮き続ける（上下 6px・傾き ±1.5°・3.6 秒・往復）
 * translate / rotate の個別プロパティで書く。出るときの transform の動き（pop など）とぶつからない */
.pf-float {
  --pf-dur: 3.6s;
  --pf-amp: 6px;
  --pf-tilt: 1.5deg;
  --pf-delay: 0ms;
}
.pf-float.is-on {
  animation: pf-float var(--pf-dur) ease-in-out var(--pf-delay) infinite alternate;
}
@keyframes pf-float {
  from { translate: 0 0; rotate: calc(var(--pf-tilt) * -1); }
  to   { translate: 0 calc(var(--pf-amp) * -1); rotate: var(--pf-tilt); }
}
@media (prefers-reduced-motion: reduce) {
  .pf-float, .pf-float.is-on { animation: none; translate: none; rotate: none; }
}