/* Independent of the hero's manual SCAR rotation and scroll-reveal translate. */
.pointer-tilt {
  transform: perspective(1000px) rotateX(var(--pointer-tilt-x, 0deg)) rotateY(var(--pointer-tilt-y, 0deg));
  transform-origin: 50% 50%;
}
.pointer-tilt.is-tilting { will-change: transform; }

/* An extra clipped layer keeps the existing panel ::before and text intact. */
.button > span.button-sheen,
.social-slots > :is(button, a) > .button-sheen {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  clip-path: var(--button-cut);
  overflow: hidden;
  pointer-events: none;
}
.button-sheen::after {
  content: '';
  position: absolute;
  inset: -30% auto -30% 0;
  width: 38%;
  background: linear-gradient(105deg, transparent, #ffffff99, transparent);
  transform: translateX(-150%) skewX(-15deg);
}

@keyframes button-light-pass {
  to { transform: translateX(370%) skewX(-15deg); }
}

@media (hover: hover) and (pointer: fine) {
  :is(.button, .social-slots > button, .social-slots > a):not(:disabled):hover > .button-sheen::after {
    animation: button-light-pass 700ms cubic-bezier(.2,.7,.4,1) both;
  }
}
:is(.button, .social-slots > button, .social-slots > a):not(:disabled):focus-visible > .button-sheen::after {
  animation: button-light-pass 700ms cubic-bezier(.2,.7,.4,1) both;
}
:is(.button, .social-slots > button, .social-slots > a):not(:disabled):active {
  transform: scale(.97);
  transition-duration: 75ms;
}

.motion-paused .pointer-tilt,
.interactions-hidden .pointer-tilt { transform: none; will-change: auto; }
.motion-paused .button-sheen::after,
.interactions-hidden .button-sheen::after { animation: none !important; }
.motion-paused :is(.button, .social-slots > button, .social-slots > a) { transition: none; transform: none; }
.motion-paused .rarity-card { transition: none; }
.motion-paused .inventory-display:hover .rarity-gold { transform: rotate(-3deg) translateZ(20px); }

@media (prefers-reduced-motion: reduce) {
  .pointer-tilt { transform: none; will-change: auto; }
  .button-sheen::after { animation: none !important; }
  :is(.button, .social-slots > button, .social-slots > a):not(:disabled):active { transform: none; }
}