/* A shallow diagonal stack keeps each bank visible and adds depth. */
#ofCardCartao .of-stage-cartao {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 30px;
}
.of-card-wallet {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 360 / 397;
  isolation: isolate;
}
.of-bank-card {
  position: absolute;
  z-index: var(--card-order);
  width: 70%;
  aspect-ratio: 85.6 / 54;
  left: calc(10% + var(--card-order) * 2.5%);
  top: calc(5.5% + var(--card-order) * 16.1%);
  transform: rotate(var(--card-tilt));
}
.of-bank-card-face {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 6% / 9.5%;
  overflow: hidden;
  background: #18181b;
  box-shadow: -3px -12px 22px -9px #000a, 0 16px 26px -15px #000d, 0 0 0 .65px #ffffff26;
}
.of-bank-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.of-bank-card img.of-bank-card-portrait {
  position: absolute;
  width: 63.08%;
  height: 158.52%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
}
.of-bank-card--bb { --card-order: 0; --card-tilt: -6deg; }
.of-bank-card--santander { --card-order: 1; --card-tilt: -3deg; }
.of-bank-card--bradesco { --card-order: 2; --card-tilt: 0deg; }
.of-bank-card--nubank { --card-order: 3; --card-tilt: 0deg; }
.of-card-wallet.is-revealing .of-bank-card-face {
  animation: of-card-arrive 900ms cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--card-order) * 90ms);
}
@keyframes of-card-arrive {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
  #ofCardCartao .of-stage-cartao { flex: none; min-height: 0; padding-bottom: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .of-card-wallet.is-revealing .of-bank-card-face { animation: none; }
}