/* ===================================================== */
/* CUPISSA — ANIMACIONES */
/* ===================================================== */

/* ========================= */
/* VIBRACIÓN CARRITO */
/* ========================= */

@keyframes cart-shake {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(-10deg); }
  40% { transform: rotate(8deg); }
  60% { transform: rotate(-6deg); }
  80% { transform: rotate(4deg); }
  100% { transform: rotate(0deg); }
}

.cart-animate {
  animation: cart-shake 0.5s ease;
}

/* ========================= */
/* FADE IN SUAVE */
/* ========================= */

.fade-in {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.4s ease forwards;
}

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

/* ========================= */
/* TRANSICIONES GLOBALES */
/* ========================= */

body,
.header,
.mundos-bar,
.footer,
.producto-card,
input,
button {
  transition: background-color var(--transition-medium),
              color var(--transition-medium),
              border-color var(--transition-medium);
}