3D tilt card

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/interactive/card-3d-tilt.html
  Desc   : Pseudo-3D card tilt with layered depth and a moving sheen
  ============================================================
-->
<div class="sg-card-3d-tilt" style="--sg-color:#7F77DD; --sg-size:240px; --sg-duration:0.5s;">
  <div class="sg-card-3d-tilt-card" tabindex="0">
    <svg class="sg-card-3d-tilt-badge" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <polygon points="12,2 15,9 22,9.6 17,14.4 18.4,21.6 12,18 5.6,21.6 7,14.4 2,9.6 9,9" />
    </svg>
    <strong class="sg-card-3d-tilt-title">Depth, not decoration</strong>
    <span class="sg-card-3d-tilt-text">Hover or focus: the layers sit at different translateZ heights, so the tilt reads as thickness.</span>
  </div>
</div>
<style>
  .sg-card-3d-tilt {
    width: var(--sg-size);
    perspective: 900px;
  }
  .sg-card-3d-tilt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.15rem 1.2rem 1.3rem;
    border: 1px solid rgba(128, 128, 128, 0.35);
    border-radius: 14px;
    background:
      linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%) no-repeat,
      rgba(128, 128, 128, 0.1);
    background-size: 250% 100%, auto;
    background-position: 110% 0, 0 0;
    transform-style: preserve-3d;
    transition: transform var(--sg-duration) ease, background-position var(--sg-duration) ease;
    cursor: pointer;
  }
  .sg-card-3d-tilt-card:hover,
  .sg-card-3d-tilt-card:focus-visible {
    transform: rotateX(11deg) rotateY(-13deg);
    background-position: -10% 0, 0 0;
  }
  .sg-card-3d-tilt-card:focus-visible {
    outline: 2px solid var(--sg-color);
    outline-offset: 4px;
  }
  .sg-card-3d-tilt-badge {
    width: 34px;
    transform: translateZ(46px);
  }
  .sg-card-3d-tilt-badge polygon {
    fill: var(--sg-color);
  }
  .sg-card-3d-tilt-title {
    font-size: 1.02rem;
    font-weight: 600;
    transform: translateZ(28px);
  }
  .sg-card-3d-tilt-text {
    font-size: 0.84rem;
    opacity: 0.75;
    line-height: 1.5;
    transform: translateZ(14px);
  }
</style>