/* Wallet Wrapper */
.wallet {
  position: relative;
  width: 392px;
  height: 322px;
  cursor: pointer;
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.4s ease;
  margin-top: 2.5rem;
}

/* wallet back */
.wallet-back {
  position: absolute;
  bottom: 0;
  width: 392px;
  height: 280px;
  background-color: #423B35;
  background-image: url("/assets/images/textures/dark-leather.png");
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  border-radius: 31px 31px 84px 84px;
  z-index: 5;
  box-shadow:
    inset 0 35px 49px rgba(0, 0, 0, 0.4),
    inset 0 7px 21px rgba(0, 0, 0, 0.5);
}

/* cards */
.card {
  position: absolute;
  width: 364px;
  height: 196px;
  left: 14px;
  border-radius: 22px;
  padding: 25px;
  color: #EEF3E8;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    0 -6px 21px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    z-index 0s;
  animation: slideIntoPocket 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.card-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.card-bottom {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
}

/* tag list */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
}

.tag {
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

/* id card */
.id-photo {
  flex-shrink: 0;
  width: 62px;
  height: 62px;
  margin-right: 20px;
}

.id-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.id-info {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.id-tag {
  font-size: 1.25rem;
  font-weight: 500;
}

/* card variants */
.interests {
  background: #9a4769;
  bottom: 126px;
  z-index: 10;
  animation-delay: 0.1s;
}

.hobbies {
  background: #ae783c;
  bottom: 91px;
  z-index: 20;
  animation-delay: 0.2s;
}

.idcard {
  background: #2d72b1;
  color: #EEF3E8;
  bottom: 56px;
  z-index: 30;
  animation-delay: 0.3s;
}

.idcard .id-tag {
  color: #EEF3E8;
}

/* pocket */
.pocket {
  position: absolute;
  bottom: 0;
  width: 392px;
  height: 224px;
  z-index: 40;
  filter: drop-shadow(0 21px 35px rgba(20, 40, 20, 0.4));
}

.pocket-content {
  position: absolute;
  top: 63px;
  width: 100%;
  text-align: center;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
}

.balance {
  font-family: "LadyLiefy", cursive;
  color: #383531;
  font-size: 2.5rem; 
  font-weight: 600;
  text-shadow:
    0 1px 0 rgba(140, 125, 113, 0.49),
    0 -1px 1px rgba(22, 20, 17, 0.5);
}

/* hovers effects */
.wallet:hover {
  transform: translateY(-7px);
}

.wallet:hover .interests {
  transform: translateY(-105px) rotate(-3deg);
}

.wallet:hover .hobbies {
  transform: translateY(-63px) rotate(2deg);
}

.wallet:hover .idcard {
  transform: translateY(-14px);
}

/* card hover */
.card:hover {
  z-index: 100 !important;
  transition-delay: 0s !important;
}

.wallet:hover .interests:hover {
  transform: translateY(-84px) scale(1.05) rotate(0);
}

.wallet:hover .hobbies:hover {
  transform: translateY(-98px) scale(1.05) rotate(0);
}

.wallet:hover .idcard:hover {
  transform: translateY(-84px) scale(1.05) rotate(0);
}