/* Premium-only motion contracts shared by admin/frontend extension entries. */

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

@keyframes b3-wvs-swatch-jiggle {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(-1deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes b3-wvs-swatch-wobble {
  0% {
    transform: translateX(0%);
  }
  15% {
    transform: translateX(-5%) rotate(-2deg);
  }
  30% {
    transform: translateX(4%) rotate(2deg);
  }
  45% {
    transform: translateX(-3%) rotate(-1deg);
  }
  60% {
    transform: translateX(2%) rotate(1deg);
  }
  75% {
    transform: translateX(-1%) rotate(-0.5deg);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes b3-wvs-swatch-flip {
  0% {
    transform: perspective(400px) rotateY(0);
  }
  100% {
    transform: perspective(400px) rotateY(360deg);
  }
}

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

.b3-wvs-animate-swatch-jiggle {
  animation: b3-wvs-swatch-jiggle 400ms ease-in-out;
}

.b3-wvs-animate-swatch-wobble {
  animation: b3-wvs-swatch-wobble 600ms ease-in-out;
}

.b3-wvs-animate-swatch-flip {
  animation: b3-wvs-swatch-flip 600ms ease-in-out;
}

/*
 * NOTE: Tooltip keyframes + `.b3-wvs-animate-tooltip-*` classes (incl. the
 * -out variants and their prefers-reduced-motion rules) are part of the free
 * contract and now live in src/frontend/tooltip-motion.css (imported by
 * src/frontend/index.css). They are intentionally NOT duplicated here so the
 * free CSS build keeps them after this premium file is stripped, and the
 * premium build does not double-emit them.
 */

@media (prefers-reduced-motion: reduce) {
  .b3-wvs-animate-swatch-bounce,
  .b3-wvs-animate-swatch-jiggle,
  .b3-wvs-animate-swatch-wobble,
  .b3-wvs-animate-swatch-flip {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}