/* The glass shard used as an arrow (on the About page, by the three kinds of work), the same as the one on the home page
   that leads down: two facets, a ridge down its length, a glint and two small splinters.
   Markup: <svg class="sh-arrow sh-right"> with the shard drawn in a 72 x 40 box, its long tip pointing right (a transform
   inside can turn it for sh-left / sh-up); the gradients and the glint's clip are in one hidden SVG at the top of the page
   (#shU, #shD, #shG, #shC).
   Pointed at (the link or button it sits in), it moves on in its direction, glows, a glint runs along it and the splinters
   follow a beat behind. With .sh-live it also drifts, glints now and then and turns its splinters by itself. */
.sh-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.sh-arrow {
  --mx: 1; --my: 0; --step: 7px;
  display: inline-block; flex: none; vertical-align: middle; overflow: visible;
  width: var(--sh-w, 32px); height: auto; aspect-ratio: 72 / 40;
  filter: drop-shadow(0 0 7px rgba(200, 194, 245, 0.42));
  transition: transform .95s cubic-bezier(.25, .6, .3, 1), filter .4s ease;
}
svg.sh-left { --mx: -1; }
svg.sh-up { --mx: 0; --my: -1; width: auto; height: var(--sh-h, 24px); aspect-ratio: 40 / 72; }
svg.sh-arrow polygon, svg.sh-arrow rect { stroke: none; }
svg.sh-arrow .sh-ridge { fill: none; stroke: rgba(255, 255, 255, 0.75); stroke-width: 0.6; }
svg.sh-arrow .sh-bit {
  fill: rgba(214, 210, 240, 0.5); transform-box: fill-box; transform-origin: center;
  transition: translate 1.3s cubic-bezier(.25, .6, .3, 1);
}
svg.sh-arrow .sh-bit3 { fill: rgba(214, 210, 240, 0.35); }

/* living ones: they drift, glint now and then (--gd staggers them) and turn their splinters */
.sh-live .sh-drift { animation: sh-drift 3.6s ease-in-out var(--dd, 0s) infinite; }
.sh-live .sh-glint { animation: sh-glint 5.4s cubic-bezier(.5, 0, .3, 1) var(--gd, 0.8s) infinite; }
.sh-live .sh-bit { animation: sh-bit 5.5s ease-in-out infinite alternate; }
.sh-live .sh-bit2 { animation-direction: alternate-reverse; animation-duration: 6.5s; }
.sh-live .sh-bit3 { animation-duration: 7.5s; }
@keyframes sh-drift { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(3px); } }
@keyframes sh-glint { 0% { transform: translateX(0); } 34%, 100% { transform: translateX(100px); } }
@keyframes sh-glint-once { from { transform: translateX(0); } to { transform: translateX(100px); } }
@keyframes sh-bit { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(2.5px, -1.5px) rotate(-12deg); } }

/* pointed at, reached with the keyboard, or lit (a card the home page has just led to) */
:is(a, button):focus-visible svg.sh-arrow, .is-lit svg.sh-arrow {
  transform: translate(calc(var(--mx) * var(--step)), calc(var(--my) * var(--step)));
  filter: drop-shadow(0 0 12px rgba(225, 220, 255, 0.85));
}
:is(a, button):focus-visible svg.sh-arrow .sh-glint, .is-lit svg.sh-arrow .sh-glint { animation: sh-glint-once .9s cubic-bezier(.5, 0, .3, 1) .1s both; }
:is(a, button):focus-visible svg.sh-arrow .sh-bit, .is-lit svg.sh-arrow .sh-bit { translate: -6px 0; }   /* a beat behind */
@media (hover: hover) {
  :is(a, button):hover svg.sh-arrow {
    transform: translate(calc(var(--mx) * var(--step)), calc(var(--my) * var(--step)));
    filter: drop-shadow(0 0 12px rgba(225, 220, 255, 0.85));
  }
  :is(a, button):hover svg.sh-arrow .sh-glint { animation: sh-glint-once .9s cubic-bezier(.5, 0, .3, 1) .1s both; }
  :is(a, button):hover svg.sh-arrow .sh-bit { translate: -6px 0; }
}
@media (prefers-reduced-motion: reduce) {
  svg.sh-arrow, svg.sh-arrow .sh-bit { transition: none; }
  svg.sh-arrow .sh-drift, svg.sh-arrow .sh-glint, svg.sh-arrow .sh-bit { animation: none !important; }
}