harahara motion

@keyframes onoma-harahara {
  0% { transform: translate(0%, 0%) rotate(0deg); opacity: 1; animation-timing-function: ease-in-out; }
  20% { transform: translate(28%, 27.15%) rotate(18.67deg); opacity: 1; animation-timing-function: ease-in-out; }
  40% { transform: translate(-26%, 66.85%) rotate(-17.33deg); opacity: 1; animation-timing-function: ease-in-out; }
  60% { transform: translate(24%, 113.25%) rotate(16deg); opacity: 1; animation-timing-function: ease-in-out; }
  80% { transform: translate(-22%, 164.6%) rotate(-14.67deg); opacity: 0.6; animation-timing-function: ease-in-out; }
  100% { transform: translate(0%, 220%) rotate(6deg); opacity: 0; animation-timing-function: ease-in-out; }
}

.onoma-harahara {
  animation: onoma-harahara 2s ease-in-out both;
}

/* Reduced motion: only fade out */
@keyframes onoma-harahara-fade { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .onoma-harahara { animation: onoma-harahara-fade 0.2s ease-out both; }
}

@keyframes onoma-harahara-2 {
  0% { transform: rotate(-6deg); }
  100% { transform: rotate(6deg); }
}

.onoma-harahara-2 {
  animation: onoma-harahara-2 0.7s ease-in-out infinite alternate both;
  transform-origin: 50% 100%;
}

/* Reduced motion: no motion */
@media (prefers-reduced-motion: reduce) {
  .onoma-harahara-2 { animation: none; }
}