/* Independent rotate/scale leave the block button's hover/pressed transform intact. */
.btn-wiggle { transform-origin: center; animation: btn-idle-wiggle 4.5s ease-in-out var(--btn-wiggle-delay, .6s) infinite; }
.btn-wiggle:hover { animation: btn-hover-wiggle .6s ease-in-out 0s 1; }
.btn-wiggle:focus, .btn-wiggle:active, .btn-wiggle:disabled { animation: none; rotate: none; scale: none; }

@keyframes btn-idle-wiggle {
  0%, 13%, 100% { rotate: 0deg; scale: 1; }
  2%, 6% { rotate: -4deg; scale: 1.04; }
  4%, 8% { rotate: 4deg; scale: 1.04; }
  10% { rotate: -2deg; scale: 1.02; }
}
@keyframes btn-hover-wiggle {
  0%, 100% { rotate: 0deg; scale: 1; }
  15%, 45% { rotate: -4deg; scale: 1.04; }
  30%, 60% { rotate: 4deg; scale: 1.04; }
  80% { rotate: -2deg; scale: 1.02; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-wiggle { animation: none !important; rotate: none !important; scale: none !important; }
}