Layered Depth Card Hover

<div class="hfx-depth-layers-card">
  <article class="hfx-depth-layers-card-card">
    <div class="hfx-depth-layers-card-bg"></div>
    <div class="hfx-depth-layers-card-ridge"></div>
    <span class="hfx-depth-layers-card-badge">New</span>
    <h3>Aurora Pass</h3>
    <p>Night tours above the Arctic Circle</p>
    <span class="hfx-depth-layers-card-cta">Book a seat</span>
  </article>
</div>

.hfx-depth-layers-card {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  perspective: 40em;
  font-family: system-ui, sans-serif;
}
.hfx-depth-layers-card-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  width: 14em;
  height: 8.6em;
  padding: 1em 1.1em;
  color: #fff;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.3, 1.2, 0.5, 1);
}
.hfx-depth-layers-card-card > * {
  transition: transform 0.5s cubic-bezier(0.3, 1.2, 0.5, 1), box-shadow 0.5s ease;
}
.hfx-depth-layers-card-bg,
.hfx-depth-layers-card-ridge {
  position: absolute;
  inset: 0;
  border-radius: 0.9em;
}
.hfx-depth-layers-card-bg {
  background:
    radial-gradient(80% 60% at 25% 5%, color-mix(in srgb, var(--c) 40%, #6ee7b7), transparent 75%),
    radial-gradient(55% 50% at 85% 10%, color-mix(in srgb, var(--c) 50%, #f0abfc), transparent 75%),
    linear-gradient(170deg, color-mix(in srgb, var(--c) 70%, #1e1b4b), color-mix(in srgb, var(--c) 35%, #020617));
  box-shadow: 0 0.8em 1.6em color-mix(in srgb, var(--c) 25%, transparent);
}
.hfx-depth-layers-card-ridge {
  top: auto;
  height: 55%;
  border-radius: 0 0 0.9em 0.9em;
  background: linear-gradient(color-mix(in srgb, var(--c) 18%, #020617), #020617);
  clip-path: polygon(0 45%, 18% 20%, 32% 38%, 52% 0, 70% 30%, 84% 14%, 100% 36%, 100% 100%, 0 100%);
}
.hfx-depth-layers-card-badge {
  position: absolute;
  top: 1em;
  right: 1.1em;
  padding: 0.2em 0.6em;
  border-radius: 1em;
  background: #fff;
  color: color-mix(in srgb, var(--c) 80%, #000);
  font-size: 0.7em;
  font-weight: 700;
}
.hfx-depth-layers-card h3 {
  position: relative;
  margin: 0;
  font-size: 1.2em;
  text-shadow: 0 0.1em 0.4em color-mix(in srgb, #000 35%, transparent);
}
.hfx-depth-layers-card p {
  position: relative;
  margin: 0.15em 0 0.7em;
  font-size: 0.78em;
  opacity: 0.8;
}
.hfx-depth-layers-card-cta {
  position: relative;
  padding: 0.35em 0.9em;
  border-radius: 0.5em;
  background: var(--c);
  font-size: 0.8em;
  font-weight: 600;
}
.hfx-depth-layers-card:hover .hfx-depth-layers-card-card {
  transform: rotateX(12deg) rotateY(18deg);
}
.hfx-depth-layers-card:hover .hfx-depth-layers-card-ridge { transform: translateZ(1.2em); }
.hfx-depth-layers-card:hover h3 { transform: translateZ(3.2em); }
.hfx-depth-layers-card:hover p { transform: translateZ(2.4em); }
.hfx-depth-layers-card:hover .hfx-depth-layers-card-badge { transform: translateZ(4.4em); }
.hfx-depth-layers-card:hover .hfx-depth-layers-card-cta {
  transform: translateZ(4em);
  box-shadow: -0.5em 0.6em 0.9em color-mix(in srgb, #000 35%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .hfx-depth-layers-card, .hfx-depth-layers-card *, .hfx-depth-layers-card::before, .hfx-depth-layers-card::after, .hfx-depth-layers-card *::before, .hfx-depth-layers-card *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Similar hover effects