/*
 * Tooltip motion contract (free/shared).
 *
 * Tooltip animations + fade in/out are part of the free contract, so these
 * keyframes and `.b3-wvs-animate-tooltip-*` classes ship in the shared CSS
 * bundle (imported by src/frontend/index.css). The premium frontend renderer
 * references the same class names; keeping the rules here means both free and
 * Pro builds animate tooltips consistently.
 *
 * NOTE: swatch-hover + quantity keyframes stay Pro and remain in
 * src/extension-motion.css. Tooltip *styling* (position, colors, font) stays
 * Pro — only the animation lifecycle is free.
 */

@keyframes b3-wvs-tooltip-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes b3-wvs-tooltip-scale {
  from {
    opacity: 0;
    scale: 0.96;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes b3-wvs-tooltip-shift {
  from {
    opacity: 0;
    translate: 0 4px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes b3-wvs-tooltip-slide {
  from {
    opacity: 0;
    translate: -20px 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes b3-wvs-tooltip-flip {
  from {
    opacity: 0;
    rotate: x -90deg;
  }
  to {
    opacity: 1;
    rotate: x 0deg;
  }
}

@keyframes b3-wvs-tooltip-zoom {
  from {
    opacity: 0;
    scale: 0.5;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes b3-wvs-tooltip-swing {
  0% {
    opacity: 0;
    transform: var(--b3-wvs-tooltip-base-transform, none) rotate(-10deg);
  }
  50% {
    transform: var(--b3-wvs-tooltip-base-transform, none) rotate(5deg);
  }
  100% {
    opacity: 1;
    transform: var(--b3-wvs-tooltip-base-transform, none) rotate(0deg);
  }
}

@keyframes b3-wvs-tooltip-elastic {
  0% {
    opacity: 0;
    transform: var(--b3-wvs-tooltip-base-transform, none) scale(0.82);
  }
  55% {
    opacity: 1;
    transform: var(--b3-wvs-tooltip-base-transform, none) scale(1.045);
  }
  78% {
    transform: var(--b3-wvs-tooltip-base-transform, none) scale(0.985);
  }
  90% {
    transform: var(--b3-wvs-tooltip-base-transform, none) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: var(--b3-wvs-tooltip-base-transform, none) scale(1);
  }
}

@keyframes b3-wvs-tooltip-blur {
  from {
    opacity: 0;
    filter: blur(4px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes b3-wvs-tooltip-rotate {
  from {
    opacity: 0;
    transform: var(--b3-wvs-tooltip-base-transform, none) rotate(-180deg)
      scale(0.8);
  }
  to {
    opacity: 1;
    transform: var(--b3-wvs-tooltip-base-transform, none) rotate(0deg) scale(1);
  }
}

@keyframes b3-wvs-tooltip-stretch {
  0% {
    opacity: 0;
    scale: 0.5 1.5;
  }
  50% {
    scale: 1.1 0.9;
  }
  100% {
    opacity: 1;
    scale: 1 1;
  }
}

@keyframes b3-wvs-tooltip-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes b3-wvs-tooltip-scale-out {
  from {
    opacity: 1;
    scale: 1;
  }
  to {
    opacity: 0;
    scale: 0.96;
  }
}

@keyframes b3-wvs-tooltip-shift-out {
  from {
    opacity: 1;
    translate: 0 0;
  }
  to {
    opacity: 0;
    translate: 0 4px;
  }
}

@keyframes b3-wvs-tooltip-slide-out {
  from {
    opacity: 1;
    translate: 0 0;
  }
  to {
    opacity: 0;
    translate: -20px 0;
  }
}

@keyframes b3-wvs-tooltip-flip-out {
  from {
    opacity: 1;
    rotate: x 0deg;
  }
  to {
    opacity: 0;
    rotate: x -90deg;
  }
}

@keyframes b3-wvs-tooltip-zoom-out {
  from {
    opacity: 1;
    scale: 1;
  }
  to {
    opacity: 0;
    scale: 0.5;
  }
}

@keyframes b3-wvs-tooltip-swing-out {
  0% {
    opacity: 1;
    transform: var(--b3-wvs-tooltip-base-transform, none) rotate(0deg);
  }
  50% {
    transform: var(--b3-wvs-tooltip-base-transform, none) rotate(5deg);
  }
  100% {
    opacity: 0;
    transform: var(--b3-wvs-tooltip-base-transform, none) rotate(-10deg);
  }
}

@keyframes b3-wvs-tooltip-elastic-out {
  0% {
    opacity: 1;
    transform: var(--b3-wvs-tooltip-base-transform, none) scale(1);
  }
  25% {
    transform: var(--b3-wvs-tooltip-base-transform, none) scale(0.985);
  }
  55% {
    transform: var(--b3-wvs-tooltip-base-transform, none) scale(1.02);
  }
  100% {
    opacity: 0;
    transform: var(--b3-wvs-tooltip-base-transform, none) scale(0.88);
  }
}

@keyframes b3-wvs-tooltip-blur-out {
  from {
    opacity: 1;
    filter: blur(0);
  }
  to {
    opacity: 0;
    filter: blur(4px);
  }
}

@keyframes b3-wvs-tooltip-rotate-out {
  from {
    opacity: 1;
    transform: var(--b3-wvs-tooltip-base-transform, none) rotate(0deg) scale(1);
  }
  to {
    opacity: 0;
    transform: var(--b3-wvs-tooltip-base-transform, none) rotate(-180deg)
      scale(0.8);
  }
}

@keyframes b3-wvs-tooltip-stretch-out {
  0% {
    opacity: 1;
    scale: 1 1;
  }
  50% {
    scale: 1.1 0.9;
  }
  100% {
    opacity: 0;
    scale: 0.5 1.5;
  }
}

.b3-wvs-animate-tooltip-fade {
  animation: b3-wvs-tooltip-fade 140ms ease-out;
}

.b3-wvs-animate-tooltip-scale {
  animation: b3-wvs-tooltip-scale 140ms ease-out;
}

.b3-wvs-animate-tooltip-shift {
  animation: b3-wvs-tooltip-shift 140ms ease-out;
}

.b3-wvs-animate-tooltip-slide {
  animation: b3-wvs-tooltip-slide 200ms ease-out;
}

.b3-wvs-animate-tooltip-flip {
  animation: b3-wvs-tooltip-flip 300ms ease-out;
}

.b3-wvs-animate-tooltip-zoom {
  animation: b3-wvs-tooltip-zoom 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.b3-wvs-animate-tooltip-swing {
  animation: b3-wvs-tooltip-swing 350ms ease-in-out;
}

.b3-wvs-animate-tooltip-elastic {
  animation: b3-wvs-tooltip-elastic 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.b3-wvs-animate-tooltip-blur {
  animation: b3-wvs-tooltip-blur 300ms ease-out;
}

.b3-wvs-animate-tooltip-rotate {
  animation: b3-wvs-tooltip-rotate 400ms ease-out;
}

.b3-wvs-animate-tooltip-stretch {
  animation: b3-wvs-tooltip-stretch 350ms ease-in-out;
}

.b3-wvs-animate-tooltip-fade-out {
  animation: b3-wvs-tooltip-fade-out 140ms ease-in forwards;
}

.b3-wvs-animate-tooltip-scale-out {
  animation: b3-wvs-tooltip-scale-out 140ms ease-in forwards;
}

.b3-wvs-animate-tooltip-shift-out {
  animation: b3-wvs-tooltip-shift-out 140ms ease-in forwards;
}

.b3-wvs-animate-tooltip-slide-out {
  animation: b3-wvs-tooltip-slide-out 200ms ease-in forwards;
}

.b3-wvs-animate-tooltip-flip-out {
  animation: b3-wvs-tooltip-flip-out 300ms ease-in forwards;
}

.b3-wvs-animate-tooltip-zoom-out {
  animation: b3-wvs-tooltip-zoom-out 250ms
    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.b3-wvs-animate-tooltip-swing-out {
  animation: b3-wvs-tooltip-swing-out 350ms ease-in-out forwards;
}

.b3-wvs-animate-tooltip-elastic-out {
  animation: b3-wvs-tooltip-elastic-out 420ms cubic-bezier(0.4, 0, 0.2, 1)
    forwards;
}

.b3-wvs-animate-tooltip-blur-out {
  animation: b3-wvs-tooltip-blur-out 300ms ease-in forwards;
}

.b3-wvs-animate-tooltip-rotate-out {
  animation: b3-wvs-tooltip-rotate-out 400ms ease-in forwards;
}

.b3-wvs-animate-tooltip-stretch-out {
  animation: b3-wvs-tooltip-stretch-out 350ms ease-in-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .b3-wvs-animate-tooltip-fade,
  .b3-wvs-animate-tooltip-scale,
  .b3-wvs-animate-tooltip-shift,
  .b3-wvs-animate-tooltip-slide,
  .b3-wvs-animate-tooltip-flip,
  .b3-wvs-animate-tooltip-zoom,
  .b3-wvs-animate-tooltip-swing,
  .b3-wvs-animate-tooltip-elastic,
  .b3-wvs-animate-tooltip-blur,
  .b3-wvs-animate-tooltip-rotate,
  .b3-wvs-animate-tooltip-stretch,
  .b3-wvs-animate-tooltip-fade-out,
  .b3-wvs-animate-tooltip-scale-out,
  .b3-wvs-animate-tooltip-shift-out,
  .b3-wvs-animate-tooltip-slide-out,
  .b3-wvs-animate-tooltip-flip-out,
  .b3-wvs-animate-tooltip-zoom-out,
  .b3-wvs-animate-tooltip-swing-out,
  .b3-wvs-animate-tooltip-elastic-out,
  .b3-wvs-animate-tooltip-blur-out,
  .b3-wvs-animate-tooltip-rotate-out,
  .b3-wvs-animate-tooltip-stretch-out {
    animation: none !important;
  }
}