/* vibrate-btn css start */
.vibrate-btn {
    transition: transform 120ms ease;
    /* total cycle = vibrateDuration (0.6s) + holdDuration (1s) = 1.6s */
    animation: vibrate-loop 1.6s cubic-bezier(.25,.8,.25,1) infinite;
    will-change: transform;
}

/* Keyframes: vibrate in first ~40% -> then stay still until 100% (hold ~1s) */
@keyframes vibrate-loop {
    0%   { transform: translate3d(0,0,0) rotate(0deg); }
    8%   { transform: translate3d(-2px, 0, 0) rotate(-0.6deg); }
    16%  { transform: translate3d(2px, 0, 0) rotate(0.6deg); }
    24%  { transform: translate3d(-1.5px, 0, 0) rotate(-0.4deg); }
    32%  { transform: translate3d(1px, 0, 0) rotate(0.3deg); }
    40%  { transform: translate3d(0,0,0) rotate(0deg); } /* end vibrate */
    100% { transform: translate3d(0,0,0) rotate(0deg); } /* hold until next cycle */
}

/* Optional focus/active states */
.vibrate-btn:active { 
    transform: translateY(1px); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.14); 
}
/* vibrate-btn css end */