/* Link nudges: three small answers for links and strips, all on DUNA's house ease cubic-bezier(.22, 1, .36, 1).
   Measured from duna.digital (text links + spark chip) and decimals.co (logo strip); rewritten.

     <a class="ln-gap" href="#">Read the story <svg class="ln-gap__arrow">...</svg></a>
         the space between the words and the arrow opens 10 -> 16px over 300ms (add .ln-gap--lg: 12 -> 20px,
         DUNA's big uppercase statement link). The arrow moves because the GAP grows: the words never move.
     <a class="ln-spin" data-ln-spin href="#">Start a project <span class="ln-spin__chip"><svg class="ln-spin__icon">...</svg></span></a>
         every pointer entry (and keyboard focus) turns the icon one more full turn forward, 360deg in 480ms;
         part.js counts the turns, so leaving never unwinds it and a quick re-entry spins on from where it is.
     <div class="ln-dim"> <a class="ln-dim__item">...</a> ... </div>
         while the strip is hovered every item recedes to .4 and the hovered one comes forward at full strength
         (and its own colours, if --ln-dim-rest-filter flattened them), 250ms. Works inside a moving strip
         (put the classes on logo-ticker's track and items) as on a still one.

   Knobs (on the element, a parent or :root; defaults = measured):
     --ln-ease cubic-bezier(.22,1,.36,1) · --ln-gap 10px · --ln-gap-to 16px · --ln-gap-dur .3s
     · --ln-gap-hold 1 (reserve the extra room as a right margin so a row of links never reflows; 0 = the link
       simply grows, as on the source, right for a link flush against a right edge)
     .ln-gap--lg: --ln-gap 12px · --ln-gap-to 20px
     --ln-spin-dur .48s · --ln-chip 34px (chip size) · --ln-chip-bg / --ln-chip-fg (currentColor-based defaults)
     --ln-dim-rest 0.92 (items at rest) · --ln-dim-to 0.4 (the others while one is hovered) · --ln-dim-dur .25s
     · --ln-dim-ease ease · --ln-dim-rest-filter none (e.g. grayscale(1): logos flat until pointed at)
   Add .ln-on to a .ln-gap / .ln-dim__item to force its hover state (a parent's hover, a demo tour). */

.ln-gap {
  display: inline-flex; align-items: center;
  gap: var(--ln-gap, 10px);
  /* the room the arrow will need is held as a right margin and handed over as the gap opens, so the link's
     outer width never changes and neighbours in a row don't get shoved (--ln-gap-hold: 0 = let the link grow) */
  margin-inline-end: calc((var(--ln-gap-to, 16px) - var(--ln-gap, 10px)) * var(--ln-gap-hold, 1));
  transition: gap var(--ln-gap-dur, .3s) var(--ln-ease, cubic-bezier(.22, 1, .36, 1)),
              margin var(--ln-gap-dur, .3s) var(--ln-ease, cubic-bezier(.22, 1, .36, 1));
}
.ln-gap--lg { --ln-gap: 12px; --ln-gap-to: 20px; }
.ln-gap__arrow { flex: none; }
.ln-gap:focus-visible, .ln-gap.ln-on { gap: var(--ln-gap-to, 16px); margin-inline-end: 0; }
@media (hover: hover) { .ln-gap:hover { gap: var(--ln-gap-to, 16px); margin-inline-end: 0; } }

.ln-spin { display: inline-flex; align-items: center; gap: 12px; }
.ln-spin__chip {
  display: inline-grid; place-items: center; flex: none;
  width: var(--ln-chip, 34px); height: var(--ln-chip, 34px); border-radius: 50%;
  background: var(--ln-chip-bg, currentColor);
}
.ln-spin__icon {
  display: block;
  color: var(--ln-chip-fg, Canvas);
  transform: rotate(calc(var(--ln-turns, 0) * 360deg));
  transition: transform var(--ln-spin-dur, .48s) var(--ln-ease, cubic-bezier(.22, 1, .36, 1));
}

.ln-dim__item {
  opacity: var(--ln-dim-rest, .92);
  filter: var(--ln-dim-rest-filter, none);
  transition: opacity var(--ln-dim-dur, .25s) var(--ln-dim-ease, ease), filter var(--ln-dim-dur, .25s) var(--ln-dim-ease, ease);
}
@media (hover: hover) {
  .ln-dim:hover .ln-dim__item { opacity: var(--ln-dim-to, .4); }
  .ln-dim:hover .ln-dim__item:hover { opacity: 1; filter: none; }
}
.ln-dim:has(.ln-on) .ln-dim__item, .ln-dim:has(:focus-visible) .ln-dim__item { opacity: var(--ln-dim-to, .4); }
.ln-dim .ln-dim__item.ln-on, .ln-dim .ln-dim__item:focus-visible { opacity: 1; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .ln-gap, .ln-spin__icon, .ln-dim__item { transition-duration: 0s !important; }
}