/* =========================================================================
   Tilt / 3D card mechanics (shared by testimonial, product & media cards)
   ========================================================================= */
.tilt{
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  will-change: transform;
  position: relative;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.tilt::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(500px circle at var(--mx) var(--my), rgba(255,255,255,.14), transparent 45%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
  z-index: 2;
}
.tilt:hover::before{ opacity: 1; }
.tilt:hover{
  box-shadow: var(--shadow-2);
}