/* Measurebase — partner badge tilt (2026-10-19). Behaviour in js/badge-tilt.js.
   Shared by the partner badge page (dashboard) and the partner directory
   (marketing site), so it carries no tokens from either sheet. */

[data-tilt] { perspective: 700px; }

.mb-tilt-card {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  border-radius: 12px;
  transform: rotateX(var(--tilt-rx, 0deg)) rotateY(var(--tilt-ry, 0deg)) scale(1);
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.mb-tilt-card > img {
  display: block;
  max-width: 100%;
  height: auto;
  transition: filter 0.4s ease;
}

/* The sheen: a soft highlight that sits where the cursor is, plus a faint
   diagonal band that slides with it. Masked by the badge's own artwork. */
.mb-tilt-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at var(--tilt-mx, 50%) var(--tilt-my, 50%), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 58%),
    linear-gradient(115deg, rgba(255, 255, 255, 0) calc(var(--tilt-mx, 50%) - 22%), rgba(255, 255, 255, 0.28) var(--tilt-mx, 50%), rgba(255, 255, 255, 0) calc(var(--tilt-mx, 50%) + 22%));
  mix-blend-mode: overlay;
  -webkit-mask: var(--tilt-mask, none) center / 100% 100% no-repeat;
          mask: var(--tilt-mask, none) center / 100% 100% no-repeat;
  transition: opacity 0.45s ease;
}

.mb-tilt-card.is-tilting {
  transform: rotateX(var(--tilt-rx, 0deg)) rotateY(var(--tilt-ry, 0deg)) scale(1.035);
  transition: transform 0.14s ease-out;
}
.mb-tilt-card.is-tilting > img { filter: drop-shadow(0 12px 18px rgba(16, 24, 40, 0.16)); }
.mb-tilt-card.is-tilting::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .mb-tilt-card, .mb-tilt-card.is-tilting { transform: none; transition: none; }
}