@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-card-tilt],
  .stack-card[data-card-tilt] {
    transform: perspective(1100px) rotateX(var(--card-tilt-x, 0deg))
      rotateY(var(--card-tilt-y, 0deg)) translateZ(var(--card-tilt-lift, 0px))
      var(--card-rest-transform, translateZ(0));
    transition:
      transform 480ms cubic-bezier(0.22, 1, 0.36, 1),
      background-color 200ms ease,
      filter 700ms ease,
      opacity 500ms ease;
  }

  [data-card-tilt][data-card-tilt-active='true'] {
    --card-tilt-lift: 6px;
    transition-duration: 140ms, 200ms, 700ms, 500ms;
    will-change: transform;
  }

  [data-card-tilt]:focus-visible,
  [data-card-tilt]:has(:focus-visible) {
    transform: var(--card-rest-transform, none);
  }
}

.stack-card[data-position="0"] { --card-rest-transform: translate(-4px, 6px) rotate(-5deg); }
.stack-card[data-position="1"] { --card-rest-transform: translate(59px, 4px) rotate(11deg) scale(0.94); }
.stack-card[data-position="2"] { --card-rest-transform: translate(-54px, -10px) rotate(-14deg) scale(0.91); }
.story-photo { --card-rest-transform: rotate(9deg); }
.story-sticker { --card-rest-transform: rotate(-8deg); }