.add-to-cart-animated {
  position: relative;
  overflow: visible;
  isolation: isolate;
  color: #fff !important;
}

.add-to-cart-animated:hover,
.add-to-cart-animated:focus,
.add-to-cart-animated:active {
  color: #000 !important;
}

.add-to-cart-animated:hover .button-label,
.add-to-cart-animated:focus .button-label,
.add-to-cart-animated:active .button-label {
  color: #000 !important;
}

.add-to-cart-animated .button-label {
  position: relative;
  display: inline-block !important;
  z-index: 2;
  transition: transform 0.25s ease, opacity 0.25s ease;
  color: inherit !important;
}

.add-to-cart-animated .shirt,
.add-to-cart-animated .cart {
  pointer-events: none;
  position: absolute;
  display: block !important;
  left: 50%;
  top: 0;
  opacity: 0;
}

.add-to-cart-animated .shirt {
  width: 20px;
  height: 20px;
  margin: -14px 0 0 0;
  background: url("../images/ko-station-logo-mark.svg") center / contain
    no-repeat;
  transform-origin: 50% 50%;
  z-index: 4;
}

.add-to-cart-animated .cart {
  display: none !important;
  width: 20px;
  height: 14px;
  margin-top: 8px;
  border: 2px solid currentColor;
  border-top-width: 3px;
  border-radius: 2px 2px 4px 4px;
  z-index: 3;
}

.add-to-cart-animated .cart:before,
.add-to-cart-animated .cart:after {
  content: "";
  position: absolute;
  bottom: -6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.add-to-cart-animated .cart:before {
  left: 2px;
}

.add-to-cart-animated .cart:after {
  right: 2px;
}

.add-to-cart-animated.is-animating .button-label {
  transform: translateY(-130%);
  opacity: 0;
  display: block !important;
}

html:not(:lang(ja)) .add-to-cart-animated.is-animating .button-label {
  transform: none;
  opacity: 1 !important;
  color: #000 !important;
}

html:lang(ja) .add-to-cart-animated.is-animating .button-label {
  transform: none;
  opacity: 1 !important;
  color: #000 !important;
}

.add-to-cart-animated.is-animating .shirt {
  animation: add-to-cart-shirt 520ms linear forwards;
}

.add-to-cart-animated.is-animating .cart {
  animation: add-to-cart-cart 850ms ease forwards;
}

@keyframes add-to-cart-shirt {
  0% {
    opacity: 0;
    transform: translate(-50%, 14px) scale(0.8) rotate(0deg);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -28px) scale(1.06) rotate(90deg);
  }
  48% {
    opacity: 1;
    transform: translate(-50%, -38px) scale(1) rotate(220deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -6px) scale(0.94) rotate(360deg);
  }
}

@keyframes add-to-cart-cart {
  0% {
    opacity: 0;
    transform: translate(-50%, 16px) scale(0.9);
  }
  24% {
    opacity: 1;
    transform: translate(-50%, 6px) scale(1);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, 4px) scale(1.08);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -2px) scale(0.95);
  }
}

@media (prefers-reduced-motion: reduce) {
  .add-to-cart-animated .button-label,
  .add-to-cart-animated .shirt,
  .add-to-cart-animated .cart {
    transition: none;
    animation: none !important;
  }
}

/* Header cart button: icon races into circular portal */
a.static-cart-button {
  position: relative;
  isolation: isolate;
}

@media (min-width: 800px) {
  a.static-cart-button {
    padding-left: 1.2em;
    padding-right: 3.5em;
  }
}

/* Flying clone of cart icon - races right into portal */
.cart-icon-fly-clone {
  transition: none;
}

.cart-icon-fly-clone.cart-icon-fly-animating {
  animation: cart-icon-fly-to-portal 560ms cubic-bezier(0.17, 0.84, 0.44, 1)
    forwards;
}

@keyframes cart-icon-fly-to-portal {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  35% {
    transform: translate(1em, -50%) scale(1.08);
    opacity: 1;
  }
  70% {
    transform: translate(3em, -50%) scale(0.7);
    opacity: 1;
  }
  82% {
    transform: translate(3.8em, -50%) scale(0.4);
    opacity: 1;
  }
  100% {
    transform: translate(4em, -50%) scale(0.2);
    opacity: 0;
  }
}

a.static-cart-button::after {
  content: "";
  position: absolute;
  right: 0.25em;
  top: 50%;
  width: 0.7em;
  height: 1.6em;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.9);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
  transform: translateY(-50%) scale(0.15);
  transform-origin: center center;
  opacity: 0;
  pointer-events: none;
}

a.static-cart-button.cart-portal-animating::before {
  opacity: 0;
  pointer-events: none;
}

a.static-cart-button.cart-portal-animating::after {
  animation: header-cart-portal-pop 560ms ease-out forwards;
}

@keyframes header-cart-portal-pop {
  0% {
    transform: translateY(-50%) scale(0.2);
    opacity: 0;
  }
  35% {
    transform: translateY(-50%) scale(1.15);
    opacity: 1;
    box-shadow: 0 0 0 0.25em rgba(0, 0, 0, 0.25);
  }
  100% {
    transform: translateY(-50%) scale(1.4);
    opacity: 0;
    box-shadow: 0 0 0 0.6em rgba(0, 0, 0, 0);
  }
}

/* Cart page: hide icon until arrival animation or skip */
body.woocommerce-cart a.static-cart-button::before {
  opacity: 0;
}

body.woocommerce-cart a.static-cart-button.cart-arrival-skip::before {
  opacity: 1;
}

/* Cart page: portal on left, icon emerges and travels left to right */
a.static-cart-button.cart-arrival-animating::before {
  display: inline-block;
  transform-origin: left center;
  animation: cart-arrival-from-portal 600ms cubic-bezier(0.17, 0.84, 0.44, 1)
    forwards;
}

a.static-cart-button.cart-arrival-animating::after {
  right: auto;
  left: 0.25em;
  animation: cart-arrival-portal-open 600ms ease-out forwards;
}

@keyframes cart-arrival-from-portal {
  0% {
    transform: translate(-3.5em, 0) scale(0.35);
    opacity: 0;
  }
  30% {
    transform: translate(-2.5em, 0) scale(0.5);
    opacity: 0;
  }
  45% {
    transform: translate(-1.5em, 0) scale(0.75);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}

@keyframes cart-arrival-portal-open {
  0% {
    transform: translateY(-50%) scale(0.2);
    opacity: 0;
  }
  20% {
    transform: translateY(-50%) scale(1.1);
    opacity: 1;
    box-shadow: 0 0 0 0.25em rgba(0, 0, 0, 0.25);
  }
  70% {
    transform: translateY(-50%) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) scale(1.3);
    opacity: 0;
    box-shadow: 0 0 0 0.5em rgba(0, 0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart-icon-fly-clone.cart-icon-fly-animating {
    animation: none !important;
  }
  a.static-cart-button.cart-portal-animating::before,
  a.static-cart-button.cart-portal-animating::after {
    animation: none !important;
  }
  a.static-cart-button.cart-arrival-animating::before,
  a.static-cart-button.cart-arrival-animating::after {
    animation: none !important;
  }
}