/* === Flying ghost (image clone that arcs to the cart) === */
.cart-fly-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    will-change: transform, opacity, width, height;
}

.cart-fly-ghost--fallback {
    background: #0C4B33;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.cart-fly-ghost--fallback svg {
    width: 60%;
    height: 60%;
}

/* === Cart icon bounce === */
@keyframes cart-bounce {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.25); }
    60%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}

.cart-bouncing {
    animation: cart-bounce 400ms ease-out;
    transform-origin: center;
    display: inline-block;
}

/* === Badge pop (when count updates) === */
@keyframes badge-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.4); }
    100% { transform: scale(1); }
}

.badge-popping {
    animation: badge-pop 300ms ease-out;
    transform-origin: center;
}

/* === Button pulse + checkmark overlay === */
@keyframes btn-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.6); }
    100% { box-shadow: 0 0 0 14px rgba(40, 167, 69, 0); }
}

.btn-pulsing {
    animation: btn-pulse 600ms ease-out;
    position: relative;
}

.btn-check-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.4em;
    font-weight: bold;
    pointer-events: none;
    background: rgba(40, 167, 69, 0.9);
    border-radius: inherit;
    animation: btn-check 600ms ease-out forwards;
}

@keyframes btn-check {
    0%   { opacity: 0; transform: scale(0.5); }
    30%  { opacity: 1; transform: scale(1.1); }
    60%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}

/* === Reduced motion: keep only badge change + brief checkmark === */
@media (prefers-reduced-motion: reduce) {
    .cart-fly-ghost { display: none !important; }
    .cart-bouncing { animation: none !important; }
    .badge-popping { animation: none !important; }
    .btn-pulsing { animation: none !important; }
    .btn-check-overlay { animation-duration: 300ms; }
}