/* Nudge hovers: three small hover answers that share one timing, plus a footer-link arrow.
   Measured from the Lord Burger template (IX2 a-4..a-9: 400ms outSine in, 200ms outSine out) and the Rayleighs
   footer links (IX2 a-52 / a-53); rewritten as CSS only.

     <a class="nh-nudge" href="#"><span class="nh__t">Our store</span></a>      label slides 8px right
     <a class="nh-pop"   href="#"><span class="nh__t">Call us</span></a>        label grows to 1.1
     <a class="nh-tilt"  href="#"><svg class="nh__t">...</svg></a>              icon tips -30deg
     <a class="nh-arrow" href="#">Instagram <svg class="nh__arrow">...</svg></a> arrow slides in from (-4, 4)px

   The move is always on the CHILD (.nh__t / .nh__arrow), never the link itself, so the hit area holds still and the
   pointer can't fall off the edge mid-move. Hover answers only on devices that hover; keyboard focus (:focus-visible)
   gives the same answer everywhere; add .nh-on to force the hover state (a parent's hover, a demo, a tour).
   Knobs (set on the link, a parent or :root; defaults are the measured values):
     --nh-x 8px · --nh-scale 1.1 · --nh-tilt -30deg · --nh-in .4s · --nh-out .2s · --nh-ease cubic-bezier(.61,1,.88,1) (outSine)
     arrow: --nh-ax -4px · --nh-ay 4px · --nh-arrow-dur .3s · --nh-arrow-ease cubic-bezier(.5,1,.89,1) (outQuad)
            · --nh-arrow-fade ease */
.nh-nudge .nh__t, .nh-pop .nh__t, .nh-tilt .nh__t {
  display: inline-block;
  transition: transform var(--nh-out, .2s) var(--nh-ease, cubic-bezier(.61, 1, .88, 1));
}
.nh-pop .nh__t, .nh-tilt .nh__t { transform-origin: 50% 50%; }

.nh-nudge:focus-visible .nh__t, .nh-nudge.nh-on .nh__t { transform: translateX(var(--nh-x, 8px)); transition-duration: var(--nh-in, .4s); }
.nh-pop:focus-visible .nh__t, .nh-pop.nh-on .nh__t { transform: scale(var(--nh-scale, 1.1)); transition-duration: var(--nh-in, .4s); }
.nh-tilt:focus-visible .nh__t, .nh-tilt.nh-on .nh__t { transform: rotate(var(--nh-tilt, -30deg)); transition-duration: var(--nh-in, .4s); }
@media (hover: hover) {
  .nh-nudge:hover .nh__t { transform: translateX(var(--nh-x, 8px)); transition-duration: var(--nh-in, .4s); }
  .nh-pop:hover .nh__t { transform: scale(var(--nh-scale, 1.1)); transition-duration: var(--nh-in, .4s); }
  .nh-tilt:hover .nh__t { transform: rotate(var(--nh-tilt, -30deg)); transition-duration: var(--nh-in, .4s); }
}

/* footer-link arrow (Rayleighs): hidden 4px down-left of its spot, slides up-right into place while fading in,
   300ms both ways. Where nothing hovers (phones, tablets) it simply stays shown, as the source did. */
.nh-arrow { display: inline-flex; align-items: center; gap: 2px; }
.nh-arrow .nh__arrow {
  display: inline-block; flex: none;
  transition: transform var(--nh-arrow-dur, .3s) var(--nh-arrow-ease, cubic-bezier(.5, 1, .89, 1)),
              opacity var(--nh-arrow-dur, .3s) var(--nh-arrow-fade, ease);
}
@media (hover: hover) {
  .nh-arrow .nh__arrow { opacity: 0; transform: translate(var(--nh-ax, -4px), var(--nh-ay, 4px)); }
  .nh-arrow:hover .nh__arrow { opacity: 1; transform: none; }
}
.nh-arrow:focus-visible .nh__arrow, .nh-arrow.nh-on .nh__arrow { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .nh-nudge .nh__t, .nh-pop .nh__t, .nh-tilt .nh__t, .nh-arrow .nh__arrow { transition-duration: 0s !important; }
}