/* ============================================================
   CTA button shake / wiggle attention animation
   - Pure left-right shake only (no zoom, no float)
   - Short pause between each shake cycle
   - Pure CSS, reduced-motion safe
   - Apply via the `cta-animate` class on order / checkout buttons
   ============================================================ */

@keyframes cta-shake {
  /* quick left-right wiggle burst */
  0%   { transform: translateX(0); }
  6%   { transform: translateX(-7px); }
  12%  { transform: translateX(7px); }
  18%  { transform: translateX(-6px); }
  24%  { transform: translateX(6px); }
  30%  { transform: translateX(-4px); }
  36%  { transform: translateX(4px); }
  42%  { transform: translateX(-2px); }
  48%  { transform: translateX(0); }

  /* hold still — pause between shake cycles */
  48%  { transform: translateX(0); }
  100% { transform: translateX(0); }
}

.cta-animate {
  animation: cta-shake 2.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
  transform-origin: center center;
  will-change: transform;
}

/* Freeze neatly while the user is interacting, then resume */
.cta-animate:hover,
.cta-animate:focus-visible {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .cta-animate {
    animation: none;
  }
}