/* ============================================================
   magnetic-hover · base styles
   Brand-neutral. The JS writes `transform: translate3d(...)` inline;
   this file only adds the polish that composes cleanly with it:
   a smooth transform fallback when at rest, and hover/active accents.

   Tune via custom properties:
     --mag-accent     accent colour for the demo buttons (your call)
     --mag-ease       settle easing used when JS is NOT driving a frame
   ============================================================ */

:root {
  --mag-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Every magnetic element. will-change keeps the GPU layer warm so the
   lerp stays buttery; the JS owns `transform` so we never set it here. */
.magnetic {
  will-change: transform;
  /* Transition is only felt when JS isn't actively writing transform
     each frame (e.g. reduced-motion / touch, or the brief idle gap).
     During an active pull the per-frame inline transform overrides it. */
  transition: box-shadow 0.3s var(--mag-ease);
  -webkit-tap-highlight-color: transparent;
}

/* Inner parallax target (data-magnetic-text). Same idea: JS owns transform. */
.magnetic [data-magnetic-inner] {
  display: inline-block;
  will-change: transform;
}

/* Active-pull state — element is currently being tugged. Use for subtle
   lift so the magnetism reads as physical, not just positional. */
.magnetic.is-magnetic {
  z-index: 1;
}

/* ---- reduced-motion / touch ---------------------------------------------
   No transform is ever applied by JS in these modes; make sure nothing
   here reintroduces movement. Hover polish only. */
@media (prefers-reduced-motion: reduce) {
  .magnetic,
  .magnetic [data-magnetic-inner] {
    will-change: auto;
    transform: none !important;
  }
}