/* ============================================================================
   FOOTER  -  the sitemap link's hover
   ----------------------------------------------------------------------------
   The design draft moves a hovered footer link along ONE axis and eases it:

     transition: color .2s ease, transform .25s ease;
     :hover     { color: #4DAA93; transform: translateX(4px); }

   Two reasons this is CSS rather than Tailwind utilities:

   1. `translate-x-*` compiles to the two-value form
      `translate: var(--tw-translate-x) var(--tw-translate-y)`, so whatever Y
      translate happens to be in scope rides along and the link drifts
      diagonally. `translate: 4px 0` pins the second axis at zero.
   2. The movement has to be in the transition list. A `transition-[color]`
      utility animates the colour and snaps the offset.

   The direction is physical because `translate` has no logical form, so the
   RTL rule mirrors it - the link always moves toward the reading edge.
   ========================================================================= */

@layer theme, base, components, utilities;

@layer components {
  .sh-footer-link {
    transition:
      color var(--motion-duration-fast) var(--motion-ease-standard),
      translate var(--motion-duration-base) var(--motion-ease-standard);
  }

  @media (hover: hover) {
    .sh-footer-link:hover {
      translate: 4px 0;
    }

    [dir="rtl"] .sh-footer-link:hover {
      translate: -4px 0;
    }
  }
}