/* ============================================================
   ADD-TO-CART MICRO-INTERACTION
   Purely visual feedback layered on top of the existing addToQuote()
   flow in js/cart.js — the actual cart push/save/render logic there is
   completely untouched. Everything here is: (1) a smooth color/scale
   transition on the Add button itself, (2) a small floating "$" cue,
   (3) a cloned price that flies toward the header cart icon, and
   (4) a brief pulse/bounce on the cart total/badge when it arrives.

   Every animated property is transform/opacity only — no layout-
   affecting properties — so this stays cheap regardless of how many
   result rows are on the page. Respects prefers-reduced-motion: the JS
   in js/cart.js skips spawning the floating elements entirely when
   that's set, and the fallback block below covers anything already in
   the DOM if the setting changes mid-animation.
   ============================================================ */

/* 1) Add button — was an instant class swap (no transition at all);
   now fades/scales into its success state. Color changed from the old
   dark blue to the brand green, per the "green success state" ask. */
.result-add{
  transition:background-color .22s ease, transform .18s ease;
}
.result-add.added{
  background:var(--green-dark);
  transform:scale(1.04);
}

/* 2) Small floating dollar cue — spawned at the button's position,
   floats up ~24px and fades out. Fixed-position + transform/opacity
   only, so it never affects page layout while it plays. */
.add-fly-dollar{
  position:fixed;z-index:2000;pointer-events:none;
  font-family:'Inter';font-weight:700;font-size:.95rem;color:var(--green-dark);
  transform:translate(-50%,-50%);
  animation:addFlyDollarFloat .6s ease-out forwards;
}
@keyframes addFlyDollarFloat{
  0%{opacity:0;transform:translate(-50%,-50%) translateY(0) scale(.8);}
  20%{opacity:1;transform:translate(-50%,-50%) translateY(-6px) scale(1);}
  100%{opacity:0;transform:translate(-50%,-50%) translateY(-26px) scale(1);}
}

/* 3) Flying price duplicate — a plain text clone (never the image or
   card) that travels from the result row's price to the header cart
   icon using a single transform, then fades out just before removal. */
.add-fly-price{
  position:fixed;z-index:2000;pointer-events:none;top:0;left:0;
  font-family:'Inter';font-weight:600;color:var(--green-dark);font-size:1.1rem;
  animation:addFlyPriceMove .45s cubic-bezier(.3,.7,.4,1) forwards;
}
@keyframes addFlyPriceMove{
  0%{opacity:1;transform:translate(var(--fly-x0),var(--fly-y0)) scale(1);}
  70%{opacity:1;}
  100%{opacity:0;transform:translate(var(--fly-x1),var(--fly-y1)) scale(.5);}
}

/* 4) Cart summary pulse/bounce, triggered right as the flying price
   arrives. Subtle — a single quick scale, not a spin or color flash. */
#header-cart-total.cart-pulse{display:inline-block;animation:cartTotalPulse .35s ease;}
@keyframes cartTotalPulse{
  0%{transform:scale(1);}
  40%{transform:scale(1.18);}
  100%{transform:scale(1);}
}
#header-cart-badge.cart-bounce{animation:cartBadgeBounce .4s ease;}
@keyframes cartBadgeBounce{
  0%{transform:scale(1);}
  30%{transform:scale(1.35);}
  60%{transform:scale(.92);}
  100%{transform:scale(1);}
}

@media (prefers-reduced-motion: reduce){
  .result-add{transition:none;}
  .add-fly-dollar,.add-fly-price{display:none;animation:none;}
  #header-cart-total.cart-pulse,#header-cart-badge.cart-bounce{animation:none;}
}