/* Shared quantity motion. Preserve storefront timing and plus/minus direction. */

@keyframes b3-wvs-quantity-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
  }
  35% {
    transform: translateY(-4px);
  }
  80% {
    transform: translateY(-2px);
  }
}

@keyframes b3-wvs-quantity-bounce-minus {
  0%,
  60%,
  100% {
    transform: translateY(0);
  }
  35% {
    transform: translateY(4px);
  }
  80% {
    transform: translateY(2px);
  }
}

@keyframes b3-wvs-quantity-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

@keyframes b3-wvs-quantity-pulse-minus {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

@keyframes b3-wvs-quantity-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes b3-wvs-quantity-rotate-minus {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes b3-wvs-quantity-wiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
}

@keyframes b3-wvs-quantity-wiggle-minus {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(5deg);
  }
}

@keyframes b3-wvs-quantity-squeeze {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.85) scaleX(1.05);
  }
}

@keyframes b3-wvs-quantity-squeeze-minus {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.15) scaleX(0.95);
  }
}

@keyframes b3-wvs-quantity-swing {
  0%,
  100% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(15deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(5deg);
  }
  80% {
    transform: rotate(-5deg);
  }
}

@keyframes b3-wvs-quantity-swing-minus {
  0%,
  100% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-15deg);
  }
  40% {
    transform: rotate(10deg);
  }
  60% {
    transform: rotate(-5deg);
  }
  80% {
    transform: rotate(5deg);
  }
}

@keyframes b3-wvs-quantity-jello {
  0%,
  100% {
    transform: skewX(0deg) skewY(0deg);
  }
  30% {
    transform: skewX(12.5deg) skewY(12.5deg);
  }
  40% {
    transform: skewX(-6deg) skewY(-6deg);
  }
  50% {
    transform: skewX(3deg) skewY(3deg);
  }
  65% {
    transform: skewX(-1.5deg) skewY(-1.5deg);
  }
  75% {
    transform: skewX(0.5deg) skewY(0.5deg);
  }
}

@keyframes b3-wvs-quantity-jello-minus {
  0%,
  100% {
    transform: skewX(0deg) skewY(0deg);
  }
  30% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  40% {
    transform: skewX(6deg) skewY(6deg);
  }
  50% {
    transform: skewX(-3deg) skewY(-3deg);
  }
  65% {
    transform: skewX(1.5deg) skewY(1.5deg);
  }
  75% {
    transform: skewX(-0.5deg) skewY(-0.5deg);
  }
}

@keyframes b3-wvs-quantity-tada {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }
  10%,
  20% {
    transform: scale(0.95) rotate(-6deg);
  }
  30%,
  50%,
  70%,
  90% {
    transform: scale(1.05) rotate(6deg);
  }
  40%,
  60%,
  80% {
    transform: scale(1.05) rotate(-6deg);
  }
}

@keyframes b3-wvs-quantity-tada-minus {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }
  10%,
  20% {
    transform: scale(0.95) rotate(6deg);
  }
  30%,
  50%,
  70%,
  90% {
    transform: scale(1.05) rotate(-6deg);
  }
  40%,
  60%,
  80% {
    transform: scale(1.05) rotate(6deg);
  }
}

@keyframes b3-wvs-quantity-rubberband {
  0%,
  100% {
    transform: scale(1);
  }
  30% {
    transform: scaleX(1.25) scaleY(0.75);
  }
  40% {
    transform: scaleX(0.75) scaleY(1.25);
  }
  50% {
    transform: scaleX(1.15) scaleY(0.85);
  }
  65% {
    transform: scaleX(0.95) scaleY(1.05);
  }
  75% {
    transform: scaleX(1.05) scaleY(0.95);
  }
}

@keyframes b3-wvs-quantity-rubberband-minus {
  0%,
  100% {
    transform: scale(1);
  }
  30% {
    transform: scaleX(0.75) scaleY(1.25);
  }
  40% {
    transform: scaleX(1.25) scaleY(0.75);
  }
  50% {
    transform: scaleX(0.85) scaleY(1.15);
  }
  65% {
    transform: scaleX(1.05) scaleY(0.95);
  }
  75% {
    transform: scaleX(0.95) scaleY(1.05);
  }
}

@keyframes b3-wvs-quantity-magnetic {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(0, -1px) scale(1.03);
  }
}

@keyframes b3-wvs-quantity-magnetic-minus {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(0, 1px) scale(1.03);
  }
}

@keyframes b3-wvs-quantity-bloom {
  0% {
    box-shadow: 0 0 0 0 var(--b3-wvs-quantity-plus-halo, rgba(34, 197, 94, 0.7));
  }
  100% {
    box-shadow: 0 0 0 8px
      var(--b3-wvs-quantity-plus-halo-transparent, rgba(34, 197, 94, 0));
  }
}

@keyframes b3-wvs-quantity-bloom-minus {
  0% {
    box-shadow: 0 0 0 0
      var(--b3-wvs-quantity-minus-halo, rgba(239, 68, 68, 0.7));
  }
  100% {
    box-shadow: 0 0 0 8px
      var(--b3-wvs-quantity-minus-halo-transparent, rgba(239, 68, 68, 0));
  }
}

@keyframes b3-wvs-quantity-sheen {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.25);
  }
}

@keyframes b3-wvs-quantity-sheen-minus {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.2);
  }
}

@keyframes b3-wvs-quantity-pop {
  0% {
    transform: scale(0.96);
  }
  45% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes b3-wvs-quantity-pop-minus {
  0% {
    transform: scale(0.94);
  }
  40% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes b3-wvs-quantity-glow {
  0% {
    box-shadow: 0 0 0 0 var(--b3-wvs-quantity-plus-halo, rgba(34, 197, 94, 0.6));
  }
  100% {
    box-shadow: 0 0 0 12px
      var(--b3-wvs-quantity-plus-halo-transparent, rgba(34, 197, 94, 0));
  }
}

@keyframes b3-wvs-quantity-glow-minus {
  0% {
    box-shadow: 0 0 0 0
      var(--b3-wvs-quantity-minus-halo, rgba(239, 68, 68, 0.6));
  }
  100% {
    box-shadow: 0 0 0 10px
      var(--b3-wvs-quantity-minus-halo-transparent, rgba(239, 68, 68, 0));
  }
}

@keyframes b3-wvs-quantity-tilt {
  0%,
  100% {
    transform: perspective(400px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(400px) rotateX(8deg) rotateY(8deg);
  }
}

@keyframes b3-wvs-quantity-tilt-minus {
  0%,
  100% {
    transform: perspective(400px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(400px) rotateX(-8deg) rotateY(-8deg);
  }
}

@keyframes b3-wvs-quantity-click {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.92);
  }
}

/*
 * Quantity button class contract (mirrors QuantityCssEmitter.php, which emits
 * the SAVED settings on the storefront). This file is what the admin draft
 * preview runs on, so every advertised mode must exist here with the same
 * timing: `scale` is a persistent transform while the class is present,
 * `pulse` loops while hovered, and `b3-wvs-animate-quantity-click` is the
 * transient press used by the scale mode.
 */
.b3-wvs-animate-quantity-scale,
.b3-wvs-animate-quantity-scale-minus {
  transform: scale(1.1);
  transition: transform 150ms ease-out;
}

.b3-wvs-animate-quantity-bounce {
  animation: b3-wvs-quantity-bounce 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.b3-wvs-animate-quantity-bounce-minus {
  animation: b3-wvs-quantity-bounce-minus 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.b3-wvs-animate-quantity-pulse {
  animation: b3-wvs-quantity-pulse 600ms cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.b3-wvs-animate-quantity-pulse-minus {
  animation: b3-wvs-quantity-pulse-minus 700ms cubic-bezier(0.4, 0, 0.6, 1)
    infinite;
}

.b3-wvs-animate-quantity-rotate {
  animation: b3-wvs-quantity-rotate 500ms ease-in-out;
}

.b3-wvs-animate-quantity-rotate-minus {
  animation: b3-wvs-quantity-rotate-minus 500ms ease-in-out;
}

.b3-wvs-animate-quantity-wiggle {
  animation: b3-wvs-quantity-wiggle 400ms ease-in-out;
}

.b3-wvs-animate-quantity-wiggle-minus {
  animation: b3-wvs-quantity-wiggle-minus 400ms ease-in-out;
}

.b3-wvs-animate-quantity-squeeze {
  animation: b3-wvs-quantity-squeeze 500ms ease-in-out;
}

.b3-wvs-animate-quantity-squeeze-minus {
  animation: b3-wvs-quantity-squeeze-minus 500ms ease-in-out;
}

.b3-wvs-animate-quantity-swing {
  animation: b3-wvs-quantity-swing 800ms ease-in-out;
  transform-origin: top center;
}

.b3-wvs-animate-quantity-swing-minus {
  animation: b3-wvs-quantity-swing-minus 800ms ease-in-out;
  transform-origin: top center;
}

.b3-wvs-animate-quantity-jello {
  animation: b3-wvs-quantity-jello 700ms ease-in-out;
}

.b3-wvs-animate-quantity-jello-minus {
  animation: b3-wvs-quantity-jello-minus 700ms ease-in-out;
}

.b3-wvs-animate-quantity-tada {
  animation: b3-wvs-quantity-tada 800ms ease-in-out;
}

.b3-wvs-animate-quantity-tada-minus {
  animation: b3-wvs-quantity-tada-minus 800ms ease-in-out;
}

.b3-wvs-animate-quantity-rubberband {
  animation: b3-wvs-quantity-rubberband 800ms ease-in-out;
}

.b3-wvs-animate-quantity-rubberband-minus {
  animation: b3-wvs-quantity-rubberband-minus 800ms ease-in-out;
}

.b3-wvs-animate-quantity-magnetic {
  animation: b3-wvs-quantity-magnetic 300ms ease-out;
}

.b3-wvs-animate-quantity-magnetic-minus {
  animation: b3-wvs-quantity-magnetic-minus 300ms ease-out;
}

.b3-wvs-animate-quantity-bloom {
  animation: b3-wvs-quantity-bloom 500ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.b3-wvs-animate-quantity-bloom-minus {
  animation: b3-wvs-quantity-bloom-minus 500ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.b3-wvs-animate-quantity-sheen {
  animation: b3-wvs-quantity-sheen 600ms ease-in-out;
}

.b3-wvs-animate-quantity-sheen-minus {
  animation: b3-wvs-quantity-sheen-minus 700ms ease-in-out;
}

.b3-wvs-animate-quantity-pop {
  animation: b3-wvs-quantity-pop 420ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.b3-wvs-animate-quantity-pop-minus {
  animation: b3-wvs-quantity-pop-minus 450ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.b3-wvs-animate-quantity-glow {
  animation: b3-wvs-quantity-glow 600ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.b3-wvs-animate-quantity-glow-minus {
  animation: b3-wvs-quantity-glow-minus 650ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.b3-wvs-animate-quantity-tilt {
  animation: b3-wvs-quantity-tilt 400ms ease-in-out;
}

.b3-wvs-animate-quantity-tilt-minus {
  animation: b3-wvs-quantity-tilt-minus 400ms ease-in-out;
}

.b3-wvs-animate-quantity-click {
  animation: b3-wvs-quantity-click 150ms ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .b3-wvs-animate-quantity-scale,
  .b3-wvs-animate-quantity-scale-minus,
  .b3-wvs-animate-quantity-bounce,
  .b3-wvs-animate-quantity-bounce-minus,
  .b3-wvs-animate-quantity-pulse,
  .b3-wvs-animate-quantity-pulse-minus,
  .b3-wvs-animate-quantity-rotate,
  .b3-wvs-animate-quantity-rotate-minus,
  .b3-wvs-animate-quantity-wiggle,
  .b3-wvs-animate-quantity-wiggle-minus,
  .b3-wvs-animate-quantity-squeeze,
  .b3-wvs-animate-quantity-squeeze-minus,
  .b3-wvs-animate-quantity-swing,
  .b3-wvs-animate-quantity-swing-minus,
  .b3-wvs-animate-quantity-jello,
  .b3-wvs-animate-quantity-jello-minus,
  .b3-wvs-animate-quantity-tada,
  .b3-wvs-animate-quantity-tada-minus,
  .b3-wvs-animate-quantity-rubberband,
  .b3-wvs-animate-quantity-rubberband-minus,
  .b3-wvs-animate-quantity-magnetic,
  .b3-wvs-animate-quantity-magnetic-minus,
  .b3-wvs-animate-quantity-bloom,
  .b3-wvs-animate-quantity-bloom-minus,
  .b3-wvs-animate-quantity-sheen,
  .b3-wvs-animate-quantity-sheen-minus,
  .b3-wvs-animate-quantity-pop,
  .b3-wvs-animate-quantity-pop-minus,
  .b3-wvs-animate-quantity-glow,
  .b3-wvs-animate-quantity-glow-minus,
  .b3-wvs-animate-quantity-tilt,
  .b3-wvs-animate-quantity-tilt-minus,
  .b3-wvs-animate-quantity-click {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}