/* PATCH_ID: b2c_product_card_add_animation_v1_20260709 */

/*
  Product Card Add Animation V1
  - Product list/home card Add micro animation
  - Does not change cart logic
  - Does not affect product detail Add
*/

.b2c-card-add-enhanced{
  position:relative !important;
  overflow:hidden !important;
  transition:
    transform .22s cubic-bezier(.22,.8,.2,1),
    box-shadow .22s ease,
    filter .22s ease !important;
}

.b2c-card-add-enhanced:hover{
  transform:translateY(-2px);
}

.b2c-card-add-enhanced:active{
  transform:translateY(0) scale(.985);
}

.b2c-card-add-enhanced.is-card-added{
  animation:b2cCardAddButtonPopV1 .52s cubic-bezier(.22,.8,.2,1) both;
}

.b2c-card-add-enhanced.is-card-added::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(110deg, transparent 0%, rgba(255,255,255,.46) 42%, transparent 70%);
  transform:translateX(-120%);
  animation:b2cCardAddSweepV1 .72s cubic-bezier(.22,.8,.2,1) both;
}

@keyframes b2cCardAddButtonPopV1{
  0%{transform:scale(1);}
  38%{transform:scale(1.06);}
  100%{transform:scale(1);}
}

@keyframes b2cCardAddSweepV1{
  to{transform:translateX(120%);}
}

.b2c-card-add-source{
  position:relative;
  z-index:22;
  animation:b2cCardAddCardPulseV1 .56s cubic-bezier(.22,.8,.2,1) both;
}

@keyframes b2cCardAddCardPulseV1{
  0%{transform:translateY(0) scale(1);}
  42%{transform:translateY(-3px) scale(1.012);}
  100%{transform:translateY(0) scale(1);}
}

/* flying thumbnail */
.b2c-card-add-flyer{
  position:fixed;
  z-index:99998;
  pointer-events:none;
  width:68px;
  height:68px;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:
    0 22px 56px rgba(44,33,58,.22),
    0 0 0 1px rgba(255,255,255,.72) inset;
  will-change:transform, opacity, filter;
}

.b2c-card-add-flyer::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.30), rgba(255,255,255,0) 44%),
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.34), transparent 28%);
}

.b2c-card-add-flyer img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* cart pulse */
.b2c-card-cart-pulse{
  animation:b2cCardCartPulseV1 .62s cubic-bezier(.22,.8,.2,1) both;
}

@keyframes b2cCardCartPulseV1{
  0%{transform:scale(1);}
  35%{transform:scale(1.12);}
  68%{transform:scale(.985);}
  100%{transform:scale(1);}
}

/* toast */
.b2c-card-add-toast{
  position:fixed;
  right:clamp(16px, 3vw, 34px);
  top:clamp(76px, 10vh, 112px);
  z-index:99999;
  width:min(360px, calc(100vw - 32px));
  padding:14px 15px;
  border-radius:22px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(244,235,248,.82);
  box-shadow:
    0 24px 74px rgba(44,33,58,.15),
    0 1px 0 rgba(255,255,255,.90) inset;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  display:grid;
  grid-template-columns:46px 1fr;
  gap:12px;
  align-items:center;
  opacity:0;
  transform:translateY(-12px) scale(.982);
  animation:b2cCardAddToastInV1 .42s cubic-bezier(.22,.8,.2,1) forwards;
}

.b2c-card-add-toast.is-out{
  animation:b2cCardAddToastOutV1 .32s ease forwards;
}

.b2c-card-toast-thumb{
  width:46px;
  height:46px;
  border-radius:14px;
  overflow:hidden;
  background:
    linear-gradient(135deg, #fbf7ff, #fff7fb);
  box-shadow:0 10px 22px rgba(44,33,58,.10);
}

.b2c-card-toast-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.b2c-card-toast-title{
  font-size:13px;
  font-weight:950;
  color:#21182a;
  line-height:1.2;
  margin-bottom:4px;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.b2c-card-toast-sub{
  font-size:12px;
  font-weight:800;
  color:rgba(86,70,99,.62);
}

@keyframes b2cCardAddToastInV1{
  to{opacity:1; transform:translateY(0) scale(1);}
}

@keyframes b2cCardAddToastOutV1{
  to{opacity:0; transform:translateY(-10px) scale(.985);}
}

@media(max-width:760px){
  .b2c-card-add-toast{
    right:16px;
    left:16px;
    top:auto;
    bottom:18px;
    width:auto;
  }

  .b2c-card-add-flyer{
    width:62px;
    height:62px;
    border-radius:16px;
  }
}

@media(prefers-reduced-motion: reduce){
  .b2c-card-add-enhanced,
  .b2c-card-add-source,
  .b2c-card-add-flyer,
  .b2c-card-add-toast,
  .b2c-card-cart-pulse{
    animation:none !important;
    transition:none !important;
  }
}