<div class="scd-deck">
  <div class="scd-deck__felt"></div>
  <div class="scd-deck__stage">
    <div class="scd-deck__card"><span class="scd-deck__corner">A&#9824;</span><span class="scd-deck__pip">&#9824;</span><span class="scd-deck__corner scd-deck__corner--br">A&#9824;</span></div>
    <div class="scd-deck__card"><span class="scd-deck__corner">K&#9829;</span><span class="scd-deck__pip" style="color:#9b1b1b">&#9829;</span><span class="scd-deck__corner scd-deck__corner--br">K&#9829;</span></div>
    <div class="scd-deck__card"><span class="scd-deck__corner">Q&#9830;</span><span class="scd-deck__pip">&#9830;</span><span class="scd-deck__corner scd-deck__corner--br">Q&#9830;</span></div>
    <div class="scd-deck__card"><span class="scd-deck__corner">J&#9827;</span><span class="scd-deck__pip">&#9827;</span><span class="scd-deck__corner scd-deck__corner--br">J&#9827;</span></div>
    <div class="scd-deck__card"><span class="scd-deck__corner">10&#9824;</span><span class="scd-deck__pip">&#9824;</span><span class="scd-deck__corner scd-deck__corner--br">10&#9824;</span></div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;1,500&family=Cormorant+Garamond:wght@500&display=swap');

.scd-deck, .scd-deck *, .scd-deck *::before, .scd-deck *::after { box-sizing: border-box; margin: 0; padding: 0; }

.scd-deck {
  position: relative;
  min-height: 460px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 30%,#16432e,#0a2419 70%);
  font-family: 'Cormorant Garamond', serif;
}
.scd-deck__felt {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 6px);
  pointer-events: none;
}
.scd-deck__stage { position: relative; width: 240px; height: 340px; }
.scd-deck__card {
  position: absolute; inset: 0;
  border-radius: 16px;
  background: linear-gradient(160deg,#fffdf6,#f3ead4);
  box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 0 0 2px #c9a227, inset 0 0 0 7px #fffdf6;
  display: flex; align-items: center; justify-content: center;
  transition: transform .65s cubic-bezier(.2,.9,.25,1), box-shadow .5s;
  cursor: pointer;
}
.scd-deck__card .scd-deck__corner {
  position: absolute; top: 14px; left: 16px;
  font-family: 'Playfair Display', serif; font-size: 1.5rem; color: #9b1b1b;
}
.scd-deck__card .scd-deck__corner.scd-deck__corner--br {
  top: auto; left: auto; bottom: 14px; right: 16px; transform: rotate(180deg);
}
.scd-deck__pip { font-size: 4.5rem; color: #9b1b1b; font-family: 'Playfair Display', serif; }
.scd-deck__card:nth-child(1) { transform: translateY(0) rotate(0deg); z-index: 5; }
.scd-deck__card:nth-child(2) { transform: translateY(4px) translateX(3px) rotate(2deg); z-index: 4; filter: brightness(.96); }
.scd-deck__card:nth-child(3) { transform: translateY(8px) translateX(6px) rotate(4deg); z-index: 3; filter: brightness(.92); }
.scd-deck__card:nth-child(4) { transform: translateY(12px) translateX(9px) rotate(6deg); z-index: 2; filter: brightness(.88); }
.scd-deck__card:nth-child(5) { transform: translateY(16px) translateX(12px) rotate(8deg); z-index: 1; filter: brightness(.84); }
.scd-deck__stage:hover .scd-deck__card:nth-child(1) { transform: translateY(-30px) rotate(-12deg) translateX(-90px); }
.scd-deck__stage:hover .scd-deck__card:nth-child(2) { transform: translateY(-15px) rotate(-6deg) translateX(-45px); }
.scd-deck__stage:hover .scd-deck__card:nth-child(3) { transform: translateY(0) rotate(0deg); }
.scd-deck__stage:hover .scd-deck__card:nth-child(4) { transform: translateY(-15px) rotate(6deg) translateX(45px); }
.scd-deck__stage:hover .scd-deck__card:nth-child(5) { transform: translateY(-30px) rotate(12deg) translateX(90px); }
.scd-deck__card:hover { box-shadow: 0 30px 60px rgba(0,0,0,.55), inset 0 0 0 2px #c9a227, inset 0 0 0 7px #fffdf6; }

@media (prefers-reduced-motion: reduce) {
  .scd-deck__card { transition: none !important; }
}