/* ============================================================
   Animation cinématique ajout panier — dans le bouton
   Fonctionne sur .add-to-cart-btn et .validate-btn
   ============================================================ */

/* Tailles réactives via custom properties */
:root {
  --lfd-cart-w:       clamp(32px, 6.5vw, 50px);
  --lfd-cart-h:       clamp(24px, 5vw,   40px);
  --lfd-bouquet-w:    clamp(20px, 4vw,   30px);
  --lfd-bouquet-h:    clamp(24px, 5vw,   36px);
  --lfd-success-size: clamp(28px, 6vw,   40px);
}

/* Bouton : fond transparent pendant l'animation */
.add-to-cart-btn.cart-animating,
.validate-btn.cart-animating {
  background:    transparent !important;
  border:        1.5px solid rgba(201, 144, 122, 0.45) !important;
  box-shadow:    none !important;
  color:         transparent !important;
  pointer-events: none;
}

/* Scène absolue qui couvre le bouton, déborde pour le bouquet */
.lfd-cart-scene {
  position:       absolute;
  inset:          0;
  pointer-events: none;
  overflow:       visible;
  z-index:        2;
}

/* --- Chariot ------------------------------------------------ */
.lfd-cart-anim {
  position:     absolute;
  top:          50%;
  left:         50%;
  width:        var(--lfd-cart-w);
  height:       var(--lfd-cart-h);
  margin-top:   calc(var(--lfd-cart-h) / -2);
  margin-left:  calc(var(--lfd-cart-w) / -2);
  transform:    translateX(-130vw);
  opacity:      0;
  animation:    lfdCartBtnIn 0.48s cubic-bezier(0.34, 1.4, 0.64, 1) 0.05s forwards;
}
.lfd-cart-anim svg { width: 100%; height: 100%; }

.lfd-cart-anim.exiting {
  animation: lfdCartBtnOut 0.44s ease-in forwards;
}

/* --- Bouquet (tombe depuis au-dessus) ---------------------- */
.lfd-bouquet-anim {
  position:     absolute;
  top:          50%;
  left:         50%;
  width:        var(--lfd-bouquet-w);
  height:       var(--lfd-bouquet-h);
  margin-top:   calc(var(--lfd-bouquet-h) / -2);
  margin-left:  calc(var(--lfd-bouquet-w) / -2);
  transform:    translateY(clamp(-60px, -12vw, -75px));
  opacity:      0;
  animation:    lfdBouquetBtnDrop 0.5s ease-out 0.62s forwards;
}
.lfd-bouquet-anim svg { width: 100%; height: 100%; }

/* --- Cercle vert succès ------------------------------------ */
.lfd-success-anim {
  position:    absolute;
  top:         50%;
  left:        50%;
  width:       var(--lfd-success-size);
  height:      var(--lfd-success-size);
  margin-top:  calc(var(--lfd-success-size) / -2);
  margin-left: calc(var(--lfd-success-size) / -2);
  border-radius: 50%;
  background:  linear-gradient(135deg, #c9a47e, #c4826c);
  display:     flex;
  align-items: center;
  justify-content: center;
  color:       #fff;
  font-size:   clamp(12px, 2.5vw, 18px);
  font-weight: 700;
  transform:   scale(0);
  opacity:     0;
  box-shadow:  0 3px 14px rgba(196, 130, 108, 0.5);
}
.lfd-success-anim.show {
  animation: lfdSuccessBtnPop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ---- Keyframes -------------------------------------------- */

/* Phase 1 : chariot entre depuis la gauche avec rebond */
@keyframes lfdCartBtnIn {
  from { transform: translateX(-130vw); opacity: 0; }
  to   { transform: translateX(0);      opacity: 1; }
}

/* Phase 3 : chariot sort vers la droite */
@keyframes lfdCartBtnOut {
  from { transform: translateX(0);      opacity: 1; }
  to   { transform: translateX(130vw);  opacity: 0; }
}

/* Phase 2 : bouquet tombe, s'absorbe dans le chariot */
@keyframes lfdBouquetBtnDrop {
  0%   { transform: translateY(clamp(-60px, -12vw, -75px)); opacity: 0; }
  14%  { opacity: 1; }
  70%  { transform: translateY(0);                          opacity: 1; }
  100% { transform: translateY(0) scale(0.05);              opacity: 0; }
}

/* Phase 4 : cercle pop */
@keyframes lfdSuccessBtnPop {
  0%   { transform: scale(0);    opacity: 0; }
  65%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}