TILT
3D HOVER

.tilt-card {
  width: 320px;
  height: 400px;
  background: #FFFFFF;
  border: 1px solid #1A1A1A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Oswald', sans-serif;
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #1A1A1A;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transform-style: preserve-3d;
  cursor: pointer;
  will-change: transform;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.15);
}

/* Important: parent needs perspective */
.stage { perspective: 1200px; }

@media (prefers-reduced-motion: reduce) { .tilt-card { transition: none; } }
@media (hover: none) { .tilt-card { transform: none !important; } }

const card = document.querySelector('.tilt-card');
const maxTilt = 15; // degrees

card.addEventListener('mousemove', (e) => {
  const rect = card.getBoundingClientRect();
  const x = (e.clientX - rect.left) / rect.width;
  const y = (e.clientY - rect.top) / rect.height;
  const rotateY = (x - 0.5) * 2 * maxTilt;
  const rotateX = (0.5 - y) * 2 * maxTilt;
  card.style.transform =
    `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
});

card.addEventListener('mouseleave', () => {
  card.style.transform = 'rotateX(0) rotateY(0)';
});