/* ═══════════════════════════════════════════════════════════
   56 – MAGNETIC CURSOR
   Physics-basierter Magneteffekt auf Desktop-Buttons
   Benchmark: Porsche Design / Apple / Studio Dumbar
   
   Buttons und interaktive Elemente „ziehen" den Mauszeiger
   sanft zu sich, wenn er sich nähert.
   
   TECHNIK:
   - JS setzt translate3d() basierend auf Mausposition
   - Nur auf Desktop (hover-fähige Geräte)
   - Cubic-Bezier Snap-Back beim Verlassen
   - Kein Impact auf Touch-Geräte
   ═══════════════════════════════════════════════════════════ */

/* Basis-Transition für das „Zurückschnappen" beim Verlassen.
   Die Hinbewegung geschieht via JS ohne Transition (instant).
   Nur der Rückweg (mouseleave) ist animiert. */
@media (hover: hover) and (pointer: fine) {
    .magnetic-target {
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: transform;
    }

    /* Innerer Text bewegt sich stärker als der Button selbst
       → erzeugt den „Parallax-in-sich"-Effekt wie bei Apple */
    .magnetic-target .magnetic-text {
        display: inline-block;
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: transform;
    }

    /* Wenn JS aktiv ist: Transition nur auf dem Rückweg */
    .magnetic-target.is-magnetic {
        transition: none;
    }

    .magnetic-target.is-magnetic .magnetic-text {
        transition: none;
    }

    /* Snap-Back Animation: JS entfernt .is-magnetic auf mouseleave,
       dann greift diese Transition für den smoothen Rückweg */
    .magnetic-target.is-snapping {
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .magnetic-target.is-snapping .magnetic-text {
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
}

/* ── Reduced Motion: Kein Magneteffekt ── */
@media (prefers-reduced-motion: reduce) {
    .magnetic-target {
        transition: none !important;
        transform: none !important;
    }

    .magnetic-target .magnetic-text {
        transition: none !important;
        transform: none !important;
    }
}