@keyframes promo-shake {
        0%, 100% { transform: translateX(0); }
        20% { transform: translateX(-6px); }
        40% { transform: translateX(6px); }
        60% { transform: translateX(-4px); }
        80% { transform: translateX(4px); }
      }
      .promo-shake { animation: promo-shake 0.4s ease; }

@keyframes promo-coupon-error-pulse {
  0%, 100% { transform: translateX(0); }
  28% { transform: translateX(-3px); }
  55% { transform: translateX(2px); }
  78% { transform: translateX(-1px); }
}

.promo-coupon-trigger-motion {
  transform-origin: left center;
  transition:
    opacity 160ms ease,
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.promo-coupon-trigger-enter-start {
  opacity: 0;
  transform: translateX(-10px) scaleX(0.92);
}

.promo-coupon-trigger-enter-end,
.promo-coupon-trigger-leave-start {
  opacity: 1;
  transform: translateX(0) scaleX(1);
}

.promo-coupon-trigger-leave-end {
  opacity: 0;
  transform: translateX(14px) scaleX(0.9);
}

.promo-coupon-panel-motion {
  overflow: hidden;
  transform-origin: left center;
  transition:
    clip-path 300ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease,
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: clip-path, opacity, transform;
}

.promo-coupon-panel-enter-start {
  clip-path: inset(0 100% 0 0 round 6px);
  opacity: 0.2;
  transform: translateX(-6px) scaleX(0.97);
}

.promo-coupon-panel-enter-end,
.promo-coupon-panel-leave-start {
  clip-path: inset(0 0 0 0 round 6px);
  opacity: 1;
  transform: translateX(0) scaleX(1);
}

.promo-coupon-panel-leave-end {
  clip-path: inset(0 0 0 100% round 6px);
  opacity: 0;
  transform: translateX(8px) scaleX(0.98);
}

.promo-coupon-error-pulse {
  animation: promo-coupon-error-pulse 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .promo-coupon-trigger-motion,
  .promo-coupon-panel-motion {
    transition-duration: 1ms;
  }

  .promo-coupon-error-pulse {
    animation: none;
  }
}