/**
 * Successful Add-to-Cart signature interaction.
 * WooCommerce/Woodmart own every functional state; these selectors are
 * activated only by the success event listener in cart-interaction.js.
 */
.sk-add-to-cart-interaction {
  position: relative;
  overflow: visible;
  isolation: isolate;
}

.sk-add-to-cart-interaction .sk-add-to-cart-label {
  position: relative;
  z-index: 2;
}

.sk-add-to-cart-interaction.sk-is-celebrating,
.sk-add-to-cart-interaction.sk-is-celebrating:hover,
.sk-add-to-cart-interaction.sk-is-celebrating:focus-visible {
  width: var(--sk-add-to-cart-success-width);
  min-width: var(--sk-add-to-cart-success-width);
  border-color: var(--sk-text);
  background: var(--sk-pink);
  color: var(--sk-text);
  box-shadow: 2px 2px 0 var(--sk-text);
  transform: none;
}

/* Win over the intentionally specific PDP/card button state rules. */
body.sk-pdp .summary .single_add_to_cart_button.sk-is-celebrating,
body.sk-pdp .summary .single_add_to_cart_button.sk-is-celebrating:hover,
body.sk-pdp .summary .single_add_to_cart_button.sk-is-celebrating:focus-visible,
body .wd-loop-builder-off .wd-product.wd-hover-standard .wd-add-btn > a.sk-is-celebrating,
body .wd-loop-builder-off .wd-product.wd-hover-standard .wd-add-btn > a.sk-is-celebrating:hover,
body .wd-loop-builder-off .wd-product.wd-hover-standard .wd-add-btn > a.sk-is-celebrating:focus-visible {
  border-color: var(--sk-text);
  background: var(--sk-pink);
  color: var(--sk-text);
  box-shadow: 2px 2px 0 var(--sk-text);
  transform: none;
}

.sk-add-to-cart-mascot {
  position: absolute;
  z-index: 3;
  inset-inline-end: 10px;
  bottom: calc(100% - 10px);
  display: block;
  width: clamp(46px, 4.2vw, 58px);
  aspect-ratio: 1;
  opacity: 0;
  transform: translate3d(0, 55%, 0) scale(.68) rotate(4deg);
  transform-origin: 70% 100%;
  pointer-events: none;
  animation: sk-mascot-peek 900ms cubic-bezier(.2, .8, .2, 1) both;
}

.sk-add-to-cart-mascot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sk-add-to-cart-heart {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  color: var(--sk-pink);
  font-size: 16px;
  font-weight: var(--sk-fw-bold);
  line-height: 1;
  text-shadow: 0 1px 0 var(--sk-brand-white);
  animation: sk-heart-pop 700ms 100ms ease-out both;
}

/* Product cards use the same signature at a smaller, shorter scale. */
.wd-product .sk-add-to-cart-mascot {
  inset-inline-end: 7px;
  bottom: calc(100% - 14px);
  width: 38px;
  animation-duration: 720ms;
}

.wd-product .sk-add-to-cart-heart {
  font-size: 13px;
}

/* Sticky purchase bars have less vertical room; keep the peek within the bar. */
.wd-sticky-btn-cart .sk-add-to-cart-mascot {
  bottom: calc(100% - 20px);
  width: 42px;
}

@keyframes sk-mascot-peek {
  0%   { opacity: 0; transform: translate3d(0, 55%, 0) scale(.68) rotate(4deg); }
  24%  { opacity: 1; transform: translate3d(0, -5%, 0) scale(1.04) rotate(-2deg); }
  42%  { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0); }
  78%  { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate3d(0, 45%, 0) scale(.82) rotate(2deg); }
}

@keyframes sk-heart-pop {
  0%   { opacity: 0; transform: translate3d(0, 5px, 0) scale(.5); }
  35%  { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.08); }
  100% { opacity: 0; transform: translate3d(0, -8px, 0) scale(.9); }
}

@media (max-width: 768px) {
  .sk-add-to-cart-mascot {
    inset-inline-end: 8px;
    width: 44px;
  }

  .wd-product .sk-add-to-cart-mascot {
    bottom: calc(100% - 17px);
    width: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-add-to-cart-mascot {
    display: none;
    animation: none;
  }

  .sk-add-to-cart-interaction.sk-is-celebrating {
    transition: none;
  }
}