/* Wiggle hover + redraw underline (Truus §10, rewritten).
   1) Wiggle: hovering a [data-wiggle] element shakes its [data-wiggle-target] child. The shake is a 2-step
      keyframe (steps(2, end)) from +deg towards -deg every 0.3s, so the target SNAPS between +deg and 0deg every
      150ms with no in-between frames: a hand-drawn jitter, not a smooth rock. (The -deg end of the keyframe is
      never shown: jump-end steps land on 0% and 50% only. That is the source's behaviour and the point of it.)
      The shake sits on a CHILD so the hovered box itself never rotates (a rotating hover area flickers at its edge).
   2) Redraw underline: see part.js ([data-redraw]).
   Knobs: data-wiggle="" | "1" 2deg, "2" 3.5deg, "3" 5deg, "4" 7deg (source levels); --wiggle-deg / --wiggle-dur
   override. Add .is-wiggling to shake without a hover (part.js does this for the API, and a mark that should
   jitter all the time, like Truus's transition logo, just keeps the class). */
[data-wiggle] { --wiggle-deg: 2deg; --wiggle-dur: .3s; }
[data-wiggle="2"] { --wiggle-deg: 3.5deg; }
[data-wiggle="3"] { --wiggle-deg: 5deg; }
[data-wiggle="4"] { --wiggle-deg: 7deg; }

/* a transform needs a box: inline targets become inline-block (zero specificity, easy to override) */
:where([data-wiggle-target]) { display: inline-block; }

@keyframes wiggle-hover {
  from { transform: rotate(var(--wiggle-deg)); }
  to   { transform: rotate(calc(var(--wiggle-deg) * -1)); }
}

/* real hover only where hover is real (fine pointer); touch taps don't leave things shaking */
@media (hover: hover) and (pointer: fine) {
  [data-wiggle]:hover [data-wiggle-target] { animation: wiggle-hover var(--wiggle-dur) steps(2, end) infinite; }
}
[data-wiggle].is-wiggling [data-wiggle-target] { animation: wiggle-hover var(--wiggle-dur) steps(2, end) infinite; }

/* one-shot modes (data-wiggle-mode="nudge" | "jiggle", heyjay.studio, folded 10-04): part.js plays a single rock on
   each hover-enter instead of the continuous jitter, so the jitter is switched off on those elements. The rock runs
   on the `rotate` property (it stacks with any transform the target already has). Target = the [data-wiggle-target]
   child, or the [data-wiggle] element itself when it has none. Knobs: see part.js. */
[data-wiggle][data-wiggle-mode] [data-wiggle-target] { animation: none; }

/* the underline: an absolutely placed svg under the label; part.js draws its paths with dashes */
[data-redraw] { position: relative; }
[data-redraw] svg[data-redraw-line] { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; overflow: visible; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  [data-wiggle] [data-wiggle-target] { animation: none !important; }
}