/* arrow-motion.css — ONE shared rule-set that makes every directional arrow icon in the site move the way it points
 * when its button / link is hovered, keyboard-focused or tapped.
 *
 *   up-right ↗ nudges up-right      right → nudges right      left ← nudges left      up/down likewise
 *
 * How it finds arrows (no per-page code needed):
 *   1. Lucide icons by name  (svg.lucide-move-up-right, svg.lucide-arrow-left, ... or the raw [data-lucide="..."] svg)
 *   2. Any custom svg tagged  data-dir="r | l | u | d | ur | ul | dr | dl"   (use this for hand-written arrow svgs)
 *
 * Uses the independent CSS `translate` property (NOT `transform`), so any rotate()/flip a page already applies to an
 * icon is left untouched. Locked / disabled controls never animate.
 * Tune globally with --vx-arr-dist (travel) and --vx-arr-dur (speed).
 */
:root {
  --vx-arr-dist: 4px;
  --vx-arr-dur: .28s;
  --vx-arr-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---- 1. direction of each arrow (unit vector) ---- */
:is(.lucide-arrow-right, .lucide-move-right, .lucide-arrow-big-right, .lucide-circle-arrow-right, .lucide-chevron-right, .lucide-chevrons-right,
    [data-lucide="arrow-right"], [data-lucide="move-right"], [data-lucide="arrow-big-right"], [data-lucide="chevron-right"], [data-lucide="chevrons-right"],
    [data-dir="r"]) { --vx-ax: 1; --vx-ay: 0; }

:is(.lucide-arrow-left, .lucide-move-left, .lucide-arrow-big-left, .lucide-circle-arrow-left, .lucide-chevron-left, .lucide-chevrons-left,
    [data-lucide="arrow-left"], [data-lucide="move-left"], [data-lucide="arrow-big-left"], [data-lucide="chevron-left"], [data-lucide="chevrons-left"],
    [data-dir="l"]) { --vx-ax: -1; --vx-ay: 0; }

:is(.lucide-arrow-up, .lucide-move-up, .lucide-arrow-big-up,
    [data-lucide="arrow-up"], [data-lucide="move-up"], [data-lucide="arrow-big-up"],
    [data-dir="u"]) { --vx-ax: 0; --vx-ay: -1; }

:is(.lucide-arrow-down, .lucide-move-down, .lucide-arrow-big-down, .lucide-arrow-down-to-line,
    [data-lucide="arrow-down"], [data-lucide="move-down"], [data-lucide="arrow-big-down"], [data-lucide="arrow-down-to-line"],
    [data-dir="d"]) { --vx-ax: 0; --vx-ay: 1; }

:is(.lucide-move-up-right, .lucide-arrow-up-right, .lucide-square-arrow-out-up-right, .lucide-external-link,
    [data-lucide="move-up-right"], [data-lucide="arrow-up-right"], [data-lucide="external-link"],
    [data-dir="ur"]) { --vx-ax: 1; --vx-ay: -1; }

:is(.lucide-move-up-left, .lucide-arrow-up-left,
    [data-lucide="move-up-left"], [data-lucide="arrow-up-left"],
    [data-dir="ul"]) { --vx-ax: -1; --vx-ay: -1; }

:is(.lucide-move-down-right, .lucide-arrow-down-right,
    [data-lucide="move-down-right"], [data-lucide="arrow-down-right"],
    [data-dir="dr"]) { --vx-ax: 1; --vx-ay: 1; }

:is(.lucide-move-down-left, .lucide-arrow-down-left,
    [data-lucide="move-down-left"], [data-lucide="arrow-down-left"],
    [data-dir="dl"]) { --vx-ax: -1; --vx-ay: 1; }

/* ---- 2. every arrow gets the same easing ---- */
:is(.lucide-arrow-right, .lucide-move-right, .lucide-arrow-big-right, .lucide-circle-arrow-right, .lucide-chevron-right, .lucide-chevrons-right,
    .lucide-arrow-left, .lucide-move-left, .lucide-arrow-big-left, .lucide-circle-arrow-left, .lucide-chevron-left, .lucide-chevrons-left,
    .lucide-arrow-up, .lucide-move-up, .lucide-arrow-big-up, .lucide-arrow-down, .lucide-move-down, .lucide-arrow-big-down, .lucide-arrow-down-to-line,
    .lucide-move-up-right, .lucide-arrow-up-right, .lucide-square-arrow-out-up-right, .lucide-external-link,
    .lucide-move-up-left, .lucide-arrow-up-left, .lucide-move-down-right, .lucide-arrow-down-right, .lucide-move-down-left, .lucide-arrow-down-left,
    [data-lucide="arrow-right"], [data-lucide="move-right"], [data-lucide="arrow-big-right"], [data-lucide="chevron-right"], [data-lucide="chevrons-right"],
    [data-lucide="arrow-left"], [data-lucide="move-left"], [data-lucide="arrow-big-left"], [data-lucide="chevron-left"], [data-lucide="chevrons-left"],
    [data-lucide="arrow-up"], [data-lucide="move-up"], [data-lucide="arrow-big-up"], [data-lucide="arrow-down"], [data-lucide="move-down"],
    [data-lucide="arrow-big-down"], [data-lucide="arrow-down-to-line"],
    [data-lucide="move-up-right"], [data-lucide="arrow-up-right"], [data-lucide="external-link"],
    [data-lucide="move-up-left"], [data-lucide="arrow-up-left"], [data-lucide="move-down-right"], [data-lucide="arrow-down-right"],
    [data-lucide="move-down-left"], [data-lucide="arrow-down-left"],
    [data-dir]) {
  translate: 0 0;
  transition: translate var(--vx-arr-dur) var(--vx-arr-ease);
  will-change: translate;
}

/* ---- 3. the move: when the control the arrow lives in is hovered / focused / pressed ---- */
@media (hover: hover) {
  :is(a, button, summary, [role="button"], [role="link"], [data-href], .vx-hov, .vx-rect):is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]):not([data-vx-pricing-locked="1"]):not([data-vx-locked="1"]):not(.cc-cal-disabled)
  :is(.lucide-arrow-right, .lucide-move-right, .lucide-arrow-big-right, .lucide-circle-arrow-right, .lucide-chevron-right, .lucide-chevrons-right,
      .lucide-arrow-left, .lucide-move-left, .lucide-arrow-big-left, .lucide-circle-arrow-left, .lucide-chevron-left, .lucide-chevrons-left,
      .lucide-arrow-up, .lucide-move-up, .lucide-arrow-big-up, .lucide-arrow-down, .lucide-move-down, .lucide-arrow-big-down, .lucide-arrow-down-to-line,
      .lucide-move-up-right, .lucide-arrow-up-right, .lucide-square-arrow-out-up-right, .lucide-external-link,
      .lucide-move-up-left, .lucide-arrow-up-left, .lucide-move-down-right, .lucide-arrow-down-right, .lucide-move-down-left, .lucide-arrow-down-left,
      [data-lucide="arrow-right"], [data-lucide="move-right"], [data-lucide="arrow-big-right"], [data-lucide="chevron-right"], [data-lucide="chevrons-right"],
      [data-lucide="arrow-left"], [data-lucide="move-left"], [data-lucide="arrow-big-left"], [data-lucide="chevron-left"], [data-lucide="chevrons-left"],
      [data-lucide="arrow-up"], [data-lucide="move-up"], [data-lucide="arrow-big-up"], [data-lucide="arrow-down"], [data-lucide="move-down"],
      [data-lucide="arrow-big-down"], [data-lucide="arrow-down-to-line"],
      [data-lucide="move-up-right"], [data-lucide="arrow-up-right"], [data-lucide="external-link"],
      [data-lucide="move-up-left"], [data-lucide="arrow-up-left"], [data-lucide="move-down-right"], [data-lucide="arrow-down-right"],
      [data-lucide="move-down-left"], [data-lucide="arrow-down-left"],
      [data-dir]) {
    translate: calc(var(--vx-ax) * var(--vx-arr-dist)) calc(var(--vx-ay) * var(--vx-arr-dist));
  }
}

/* touch screens have no hover: the same movement plays while the finger is down (and on keyboard focus above) */
:is(a, button, summary, [role="button"], [role="link"], [data-href], .vx-hov, .vx-rect):active:not(:disabled):not([aria-disabled="true"]):not([data-vx-pricing-locked="1"]):not([data-vx-locked="1"]):not(.cc-cal-disabled)
:is(.lucide-arrow-right, .lucide-move-right, .lucide-arrow-big-right, .lucide-circle-arrow-right, .lucide-chevron-right, .lucide-chevrons-right,
    .lucide-arrow-left, .lucide-move-left, .lucide-arrow-big-left, .lucide-circle-arrow-left, .lucide-chevron-left, .lucide-chevrons-left,
    .lucide-arrow-up, .lucide-move-up, .lucide-arrow-big-up, .lucide-arrow-down, .lucide-move-down, .lucide-arrow-big-down, .lucide-arrow-down-to-line,
    .lucide-move-up-right, .lucide-arrow-up-right, .lucide-square-arrow-out-up-right, .lucide-external-link,
    .lucide-move-up-left, .lucide-arrow-up-left, .lucide-move-down-right, .lucide-arrow-down-right, .lucide-move-down-left, .lucide-arrow-down-left,
    [data-lucide="arrow-right"], [data-lucide="move-right"], [data-lucide="arrow-big-right"], [data-lucide="chevron-right"], [data-lucide="chevrons-right"],
    [data-lucide="arrow-left"], [data-lucide="move-left"], [data-lucide="arrow-big-left"], [data-lucide="chevron-left"], [data-lucide="chevrons-left"],
    [data-lucide="arrow-up"], [data-lucide="move-up"], [data-lucide="arrow-big-up"], [data-lucide="arrow-down"], [data-lucide="move-down"],
    [data-lucide="arrow-big-down"], [data-lucide="arrow-down-to-line"],
    [data-lucide="move-up-right"], [data-lucide="arrow-up-right"], [data-lucide="external-link"],
    [data-lucide="move-up-left"], [data-lucide="arrow-up-left"], [data-lucide="move-down-right"], [data-lucide="arrow-down-right"],
    [data-lucide="move-down-left"], [data-lucide="arrow-down-left"],
    [data-dir]) {
  translate: calc(var(--vx-ax) * var(--vx-arr-dist)) calc(var(--vx-ay) * var(--vx-arr-dist));
}

@media (prefers-reduced-motion: reduce) {
  :is([class*="lucide-"], [data-lucide], [data-dir]) { transition: none !important; translate: 0 0 !important; }
}