ひらり の動き

@keyframes onoma-hirari {
  0% { transform: translate(0%, 0%) rotate(0deg); opacity: 1; animation-timing-function: ease-in-out; }
  25% { transform: translate(32.2%, 42.88%) rotate(22.08deg); opacity: 1; animation-timing-function: ease-in-out; }
  50% { transform: translate(-29.4%, 105.59%) rotate(-20.16deg); opacity: 1; animation-timing-function: ease-in-out; }
  75% { transform: translate(26.6%, 178.88%) rotate(18.24deg); opacity: 0.6; animation-timing-function: ease-in-out; }
  100% { transform: translate(0%, 260%) rotate(-7.2deg); opacity: 0; animation-timing-function: ease-in-out; }
}

.onoma-hirari {
  animation: onoma-hirari 1.2s ease-in-out both;
}

/* 動きを減らす設定の人には、消えるだけ */
@keyframes onoma-hirari-fade { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .onoma-hirari { animation: onoma-hirari-fade 0.2s ease-out both; }
}

@keyframes onoma-hirari-flutter {
  0% { transform: perspective(300px) rotateY(0deg) skewY(0deg); }
  50% { transform: perspective(300px) rotateY(-38deg) skewY(-6deg); }
  100% { transform: perspective(300px) rotateY(11.4deg) skewY(4.2deg); }
}

.onoma-hirari-flutter {
  animation: onoma-hirari-flutter 1.4s ease-in-out infinite alternate both;
  transform-origin: 0% 50%;
}

/* 動きを減らす設定の人には、動かさない */
@media (prefers-reduced-motion: reduce) {
  .onoma-hirari-flutter { animation: none; }
}