/* ══════════════════════════════════════════════════════════════════════
   tilted-card.css — React Bits' TiltedCard.css, ported.

   The original sizes the card in fixed pixels because it is a demo. Here
   the cards sit in a responsive grid and take their size from the slot,
   so the two `width/height: 100%` rules replace the inline style props.
   Everything else — the 800px perspective, preserve-3d, the 15px radius,
   translateZ(30px) on the overlay, the tooltip — is as supplied.
   ══════════════════════════════════════════════════════════════════════ */

.tilted-card-figure{
  position:relative;
  width:100%;height:100%;
  margin:0;
  perspective:800px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}

.tilted-card-inner{
  position:relative;
  width:100%;height:100%;
  transform-style:preserve-3d;
  /* the radius lives here as well as on the image so the whole card, and
     anything overlaid on it, clips to the same edge */
  border-radius:15px;
}

.tilted-card-img{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;
  border-radius:15px;
  will-change:transform;
  transform:translateZ(0);
  /* a hairline in the page's own ink, so a photograph reads as an object
     on the ground rather than a file lying on it */
  box-shadow:0 0 0 1px color-mix(in srgb,var(--body) 16%,transparent);
}

.tilted-card-overlay{
  position:absolute;top:0;left:0;
  z-index:2;
  will-change:transform;
  transform:translateZ(30px);
}

/* No tilt without a real pointer, and none at all if motion is unwanted —
   the JS does not even bind in those cases, so this is only the resting
   look those visitors get. */
@media (prefers-reduced-motion:reduce){
  .tilted-card-inner{transform:none!important}
}