<div class="scd-receipt">
  <div class="scd-receipt__stage">
    <div class="scd-receipt__receipt scd-receipt__receipt--r3"><h3>&#9733; THANKS &#9733;</h3><div class="scd-receipt__line"><span>Loyalty pts</span><span>+45</span></div><div class="scd-receipt__line scd-receipt__line--total"><span>NEXT VISIT</span><span>10% OFF</span></div></div>
    <div class="scd-receipt__receipt scd-receipt__receipt--r2"><h3>SUBTOTAL</h3><div class="scd-receipt__line"><span>Tax</span><span>$1.92</span></div><div class="scd-receipt__line"><span>Tip</span><span>$4.50</span></div><div class="scd-receipt__line scd-receipt__line--total"><span>TOTAL</span><span>$30.42</span></div></div>
    <div class="scd-receipt__receipt scd-receipt__receipt--r1"><h3>CAFE NORD</h3><div class="scd-receipt__line"><span>Flat white</span><span>$4.50</span></div><div class="scd-receipt__line"><span>Croissant</span><span>$3.75</span></div><div class="scd-receipt__line"><span>Oat latte</span><span>$5.25</span></div><div class="scd-receipt__line"><span>Banana bread</span><span>$4.00</span></div></div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=VT323&family=Courier+Prime:wght@400;700&display=swap');

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

.scd-receipt {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #2d2a26;
  font-family: 'Courier Prime', monospace;
}
.scd-receipt__stage { position: relative; width: 240px; height: 380px; }
.scd-receipt__receipt {
  position: absolute; left: 0; right: 0;
  background: #fdfcf7;
  padding: 18px 20px;
  color: #222;
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
  transition: transform .55s cubic-bezier(.3,.9,.3,1);
  transform-origin: top center;
  cursor: pointer;
  -webkit-mask:
    radial-gradient(circle 5px at 5px 50%,transparent 98%,#000) left/100% 12px repeat-y,
    radial-gradient(circle 5px at calc(100% - 5px) 50%,transparent 98%,#000) right/100% 12px repeat-y;
  mask:
    radial-gradient(circle 5px at 5px 50%,transparent 98%,#000) left/100% 12px repeat-y,
    radial-gradient(circle 5px at calc(100% - 5px) 50%,transparent 98%,#000) right/100% 12px repeat-y;
  -webkit-mask-composite: source-over;
  mask-composite: add;
}
.scd-receipt__receipt h3 {
  font-family: 'VT323', monospace;
  font-size: 1.6rem; text-align: center; letter-spacing: .05em;
}
.scd-receipt__line {
  display: flex; justify-content: space-between;
  font-size: .85rem; padding: 3px 0;
  border-bottom: 1px dashed #bbb;
}
.scd-receipt__line--total {
  font-weight: 700;
  border-top: 2px solid #222;
  margin-top: 6px;
  padding-top: 6px;
}
.scd-receipt__receipt--r1 { top: 0; z-index: 3; }
.scd-receipt__receipt--r2 { top: 30px; z-index: 2; transform: scaleY(.5) translateY(-20px); filter: brightness(.96); }
.scd-receipt__receipt--r3 { top: 60px; z-index: 1; transform: scaleY(.25) translateY(-30px); filter: brightness(.92); }
.scd-receipt__stage:hover .scd-receipt__receipt--r2 { transform: scaleY(1) translateY(160px); }
.scd-receipt__stage:hover .scd-receipt__receipt--r3 { transform: scaleY(1) translateY(330px); }

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