/* Sibling dim links
   A column of links (footer, sitemap, index list): pointing at one link fades every OTHER link in the same column to
   32% ink while the pointed one stays full; leaving the link brings them all back. Keyboard focus does the same.
   Rewritten from the Forerunner footer (~/Dev/forerunner-recreate/PARTS.md "Footer links"). CSS only.

   Markup: put .sdl on each column (ul, nav, div). The items are its links, or any element with .sdl__item.
     <ul class="sdl"><li><a href="#">Overview</a></li><li><a href="#">Pricing</a></li></ul>
   Pointing anywhere between links counts as leaving, as in the source; the 80 ms restore delay just bridges the gaps.
   Columns are independent: pointing at a link in one column never dims another column.
   Driving it from script (scroll-spy, a demo autopilot): put .is-sdl-on on one item; the rest of its column dims.

   Measured on the live template: the colour that moves is the link's own CSS transition (color .4s
   cubic-bezier(.44,0,.56,1)), 0.32 reached ~370 ms after the hover. Framer's 1.4 s / bounce 0 variant spring only
   drives a paragraph colour the link paints over, so it never shows; .sdl--spring opts into that slower curve. */
.sdl {
  --sdl-ink: #181e25;                         /* resting link colour */
  --sdl-dim: rgba(24, 30, 37, 0.32);          /* the siblings' colour while one link is pointed at (32% ink) */
  --sdl-dur: 0.4s;
  --sdl-ease: cubic-bezier(0.44, 0, 0.56, 1); /* symmetric ease-in-out: slow start, slow landing */
  --sdl-restore-delay: 80ms;                  /* our addition (source: 0): siblings wait this long before coming
                                                 back, so crossing the gap between two links never flashes them */
}
.sdl :is(a, .sdl__item) {
  color: var(--sdl-ink);
  transition: color var(--sdl-dur) var(--sdl-ease) var(--sdl-restore-delay);
}
/* the link being pointed at lights up at once (a transition takes the delay of the state it is going TO) */
.sdl :is(a, .sdl__item):is(.is-sdl-on, :focus-visible) { transition-delay: 0s; }
@media (hover: hover) { .sdl :is(a, .sdl__item):hover { transition-delay: 0s; } }

/* one item is "on" -> every other item in this column dims */
.sdl:has(.is-sdl-on) :is(a, .sdl__item):not(.is-sdl-on),
.sdl:has(:is(a, .sdl__item):focus-visible) :is(a, .sdl__item):not(:focus-visible) {
  color: var(--sdl-dim);
  transition-delay: 0s;                       /* dimming starts at once */
}
/* hover only on real hover devices, so a tap on a phone never leaves a column stuck dimmed */
@media (hover: hover) {
  .sdl:has(:is(a, .sdl__item):hover) :is(a, .sdl__item):not(:hover) { color: var(--sdl-dim); transition-delay: 0s; }
}

/* opt-in: the template's own variant spring (1.4 s / bounce 0, baked with spring-to-linear: 50% at 340 ms, 90% at
   690 ms), a slower, heavier fade than the shipped .4 s */
.sdl--spring {
  --sdl-dur: 1.4s;
  --sdl-ease: linear(0, 0.0028, 0.0107, 0.0229, 0.0387, 0.0575, 0.0788, 0.1021, 0.1271, 0.1532, 0.1803, 0.208, 0.2361, 0.2643, 0.2926, 0.3208, 0.3486, 0.376, 0.403, 0.4294, 0.4551, 0.4802, 0.5045, 0.5281, 0.5509, 0.5729, 0.5941, 0.6146, 0.6342, 0.653, 0.6711, 0.6883, 0.7049, 0.7207, 0.7357, 0.7501, 0.7638, 0.7768, 0.7892, 0.801, 0.8122, 0.8228, 0.8329, 0.8425, 0.8515, 0.8601, 0.8682, 0.8759, 0.8832, 0.8901, 0.8966, 0.9027, 0.9085, 0.914, 0.9191, 0.924, 0.9286, 0.9329, 0.937, 0.9409, 0.9445, 0.9479, 0.9511, 0.9541, 0.957, 0.9596, 0.9621, 0.9645, 0.9667, 0.9688, 0.9708, 0.9726, 0.9743, 0.9759, 0.9775, 0.9789, 0.9802, 0.9815, 0.9827, 0.9838, 0.9848, 0.9858, 0.9867, 0.9876, 0.9884, 0.9891, 0.9898, 0.9905, 0.9911, 0.9917, 0.9922, 0.9927, 0.9932, 0.9936, 0.9941, 0.9944, 0.9948, 0.9951, 0.9955, 0.9958, 0.996, 0.9963, 0.9965, 0.9968, 0.997, 0.9972, 0.9974, 0.9975, 0.9977, 0.9979, 0.998, 0.9981, 0.9983, 0.9984, 0.9985, 0.9986, 0.9987, 0.9988, 0.9989, 0.9989, 1);
}
@supports not (transition-timing-function: linear(0, 1)) {
  .sdl--spring { --sdl-ease: cubic-bezier(0.22, 1, 0.36, 1); }
}