/* =============================================
   KEYFRAMES
   ============================================= */
@keyframes bounce{ 0%,80%,100%{ transform:scale(0); opacity:.3; } 40%{ transform:scale(1); opacity:1; } }
@keyframes fade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pulse-glow{ 0%,100%{ box-shadow:0 0 15px rgba(68,241,207,.15); } 50%{ box-shadow:0 0 30px rgba(68,241,207,.35); } }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
@keyframes glow-pulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
@keyframes slide-up{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
@keyframes card-in{ from{ opacity:0; transform:translateY(12px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } }

/* =============================================
   TRANSITIONS
   ============================================= */
.card-image{ transition:opacity .35s ease, transform .4s ease, filter .4s ease; }
.card-image.switching{ opacity:.15; transform:scale(1.03); filter:blur(5px); }

.product-card-wrap{ animation:card-in .4s ease; }
.message{ animation:fade .25s ease; }
.ai-chip{ transition:all .2s; }

/* CARD HOVER */
.product-card{ transition:border-color .3s, box-shadow .3s; }
.product-card:hover{ box-shadow:0 8px 30px rgba(0,0,0,.4); }

/* BUTTONS */
.card-cart-btn{ transition:transform .2s, box-shadow .2s, opacity .2s; }
.card-ai-btn{ transition:transform .2s, opacity .2s; }
.ai-send{ transition:transform .2s, box-shadow .2s; }