/* Base container holding everything */
.bag-container {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
cursor: pointer;
}
/* Big bag icon centered */
.bag {
font-size: 80px;
position: absolute;
z-index: 2;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/* Hidden items sitting behind the bag initially */
.item {
font-size: 40px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0);
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 1;
}
/* Target positions when the container gets the 'open' class */
.bag-container.open .phone {
transform: translate(-120px, -80px) scale(1);
}
.bag-container.open .keys {
transform: translate(0px, -130px) scale(1);
}
.bag-container.open .wallet {
transform: translate(80px, -80px) scale(1);
}