/* ===== Shy — the cursor-flee transform =====
   One hook, `data-shy`, shared by everything that runs away from the cursor:
   the Work / Adventures / Blog cards and the footer contact buttons. It's a
   data attribute rather than a class because js/modules/shy-cards.js selects
   on the same hook — one name to keep in sync instead of two.

   The JS writes --dx/--dy (offset in px) and --vx (velocity → tilt).

   --lift is the one hook a component may set for a hover offset. It has to
   compose INSIDE this transform: a separate `transform` rule on :hover would
   replace the flee offset outright rather than add to it, so a hovered element
   would snap back to its resting spot mid-flee. */

[data-shy] {
  will-change: transform;
  transform:
    translate(
      calc(var(--dx, 0) * 1px),
      calc(var(--dy, 0) * 1px + var(--lift, 0px))
    )
    rotate(calc(var(--vx, 0) * 10deg))
    skewX(calc(var(--vx, 0) * -6deg));
}

@media (prefers-reduced-motion: reduce) {
  [data-shy] { transform: none; }
}