/**
 * Fly To Cart Animation
 *
 * THE CONTRACT WITH assets/js/modules/fly-animation.js
 * ----------------------------------------------------
 * The script does not animate anything itself. It appends the two elements,
 * writes a start transform, and on the next frame writes an end transform —
 * then waits for `transitionend` to remove the flyer and bounce the cart icon.
 * Every one of those steps depends on a rule in THIS file:
 *
 *   .fly-item        transition: transform   — the horizontal (linear) leg
 *   .fly-item-inner  transition: transform   — the vertical leg, whose easing
 *                                              is what bends the path into an
 *                                              arc, plus the fade
 *   .cart-bounce     animation                — the header icon's acknowledgement
 *
 * These were removed once as "decorative effects" while the script was left
 * intact. With no transition declared the element jumps straight to its end
 * transform in one frame — invisible — and `transitionend` NEVER FIRES, so the
 * flyer sat in the document until the script's 1600 ms fallback timer swept it
 * up. The feature looked dead because it was: the animation lives here.
 *
 * `.cart-bounce` is also the ONLY feedback a reduced-motion visitor gets — the
 * script skips the flight entirely and calls bounceCart() on its own — so the
 * keyframes are declared unconditionally and the reduced-motion block below
 * shortens the bounce rather than removing it.
 */

:root {
    --fly-duration: 1.2s;
    --fly-ease-x: linear;
    --fly-ease-y: cubic-bezier(0, .5, .5, 1);
}

.fly-item {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    z-index: 9999;
    pointer-events: none;
    will-change: transform;
    transition: transform var(--fly-duration) var(--fly-ease-x);
}

.fly-item-inner {
    width: 38px;
    height: 38px;
    background-color: var(--casablanca-brand, #531628);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    will-change: transform, opacity;
    transition:
        transform var(--fly-duration) var(--fly-ease-y),
        opacity var(--fly-duration) ease;
}

/*
 * No `fill: none; stroke: currentColor` here.
 *
 * The flyer's markup is now the theme's own assets/icons/ui/cart.svg, served
 * through CASABLANCA\Helpers\get_svg() like every other icon in the theme, and that
 * file is a FILLED path. Forcing `fill: none` on it painted nothing at all —
 * the rule was written for the outline icon that the parallel JS registry used
 * to hand over. Each icon file carries its own fill/stroke; the helper rewrites
 * the colour to currentColor and this rule only sets the box.
 */
.fly-item svg {
    width: var(--casablanca-icon-size-md);
    height: var(--casablanca-icon-size-md);
}

/* Target icon bounce animation */
@keyframes cart-bounce {
    0%, 100% { transform: scale(1); }
    40% { transform: scale(1.3); }
    70% { transform: scale(0.9); }
}

.cart-bounce {
    animation: cart-bounce 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/*
 * The flight is skipped in JS under reduced motion; the bounce is kept, because
 * without it an add-to-cart gives no feedback at all beyond the count changing.
 * Shortened rather than removed, and the transitions are neutralised so a flyer
 * created before the preference changed cannot drift across the screen.
 */
@media (prefers-reduced-motion: reduce) {
    .fly-item,
    .fly-item-inner {
        transition: none;
    }
    .cart-bounce {
        animation-duration: 0.2s;
    }
}