Metallic Shine Credit Card

<!--
  Author: @samir-khan
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="metal-card">
  <div class="metal-card__sheen"></div>
  <div class="metal-card__logo">◆◆◆</div>
  <div class="metal-card__number">5512 &nbsp;7734 &nbsp;9902 &nbsp;1187</div>
  <div class="metal-card__footer">
    <span>J. MARTINEZ</span>
    <span>12/28</span>
  </div>
</div>

/*
 * Author: @samir-khan
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.metal-card {
  position: relative;
  width: 320px;
  height: 190px;
  border-radius: 18px;
  padding: 24px;
  overflow: hidden;
  background: linear-gradient(145deg, #4b4b55, #1c1c22 60%, #0e0e12);
  box-shadow: 0 24px 46px -18px rgba(0, 0, 0, 0.75);
  font-family: system-ui, sans-serif;
  color: #e4e4e7;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: perspective(700px) rotateX(0deg);
  transition: transform 0.4s ease;
}
.metal-card:hover {
  transform: perspective(700px) rotateX(4deg) rotateY(-3deg) translateY(-4px);
}
.metal-card__sheen {
  position: absolute;
  top: -50%;
  left: -60%;
  width: 60%;
  height: 200%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: rotate(20deg);
  transition: left 0.9s ease;
}
.metal-card:hover .metal-card__sheen {
  left: 130%;
}
.metal-card__logo {
  align-self: flex-end;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #a1a1aa;
}
.metal-card__number {
  font-family: 'Courier New', monospace;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.metal-card__footer {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #cfcfd6;
}