/*
 * Add to Cart Animation Styles
 * Creates a "flying image" effect from the product to the cart icon.
 */

body .fly-to-cart-animation {
    position: fixed;
    z-index: 10000;
    display: block;
    width: var(--start-width, 80px);
    height: var(--start-height, 80px);
    top: var(--start-top, 50%);
    left: var(--start-left, 50%);

    background-image: var(--image-url);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);

    animation: fly-to-cart-animation 0.8s ease-in-out forwards;
    will-change: transform, opacity;
    pointer-events: none; /* Make sure it doesn't intercept clicks */
}

@keyframes fly-to-cart-animation {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    20% {
        transform: translate(0, -30px) scale(1.05);
        opacity: 0.95;
    }
    100% {
        transform: translate(var(--end-x), var(--end-y)) scale(0.1);
        opacity: 0;
    }
}

/* Bounce animation for the cart icon */
.bounce {
    animation: bounce 0.6s ease-in-out;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}