.scene {
  perspective: 1400px;
}

.business-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform-origin: 50% 70%;
  will-change: transform;
  transition:
    transform 480ms cubic-bezier(.2, .8, .2, 1),
    box-shadow 480ms cubic-bezier(.2, .8, .2, 1);
}

.business-card.is-tilting {
  transform: translateY(-5px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) !important;
  box-shadow: 24px 44px 60px #0000008a, 7px 12px 18px #00000066, 0 70px 104px #00000052;
  transition-duration: 90ms;
}

@media (hover: hover) and (pointer: fine) {
  .business-card:hover {
    box-shadow: 30px 52px 64px #0000008a, 8px 14px 20px #00000066, 0 72px 110px #00000052;
    transform: translateY(-13px) rotate(.15deg) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  }
}

@media (prefers-reduced-motion: reduce) {
  .business-card {
    transition: none;
  }

  .business-card:hover {
    transform: rotate(-.65deg);
  }

  .business-card.is-tilting {
    transform: none !important;
  }
}