/* Crew sprites: pixel-art characters made by ssg/lib/sprites.js (parts in data/sprites.yml).
 *
 * A character is one inline SVG "sheet": a row per clip (idle, wave, hop), four frames per row.
 * `.sprite` is a one-frame window; the sheet inside is four windows wide and slides left in four
 * steps, which is the whole animation (no JavaScript, and it only costs a transform).
 *
 *   --row   which clip is showing (top of the sheet is row 0). Matches the order in sprites.yml.
 *   --dur   how long one loop takes
 *   --delay negative, so the crew are not all in step
 *   --sprite-px  size of one art pixel; keep it a whole number of device pixels to stay crisp
 *
 * Put `.sprite-trigger` on anything that contains a sprite: hover or tap (or keyboard focus inside)
 * makes it wave, pressing makes it hop. Reduced motion holds the first frame of the clip.
 * Colours are the `.sp-*` rules below, each pointing at a `--sp-*` token in tokens.css.
 */
.sprite {
  --sprite-px: 0.375rem;
  --row: 0; --dur: 2.4s; --delay: 0s;
  position: relative; display: inline-block; flex: none; overflow: hidden; vertical-align: bottom;
  width: calc(var(--sprite-px) * 16); aspect-ratio: 16 / 30;     /* the frame size in sprites.yml */
}
.sprite::before {                                                   /* soft ground shadow */
  content: ""; position: absolute; left: 15%; right: 15%; bottom: 0; height: calc(var(--sprite-px) * 2);
  background: radial-gradient(closest-side, rgb(11 8 32 / 0.55), transparent);
}
.sprite__sheet {
  position: absolute; left: 0; top: calc(var(--row) * -100%);
  width: 400%; max-width: none; height: auto;                       /* four frames wide */
  animation: sprite-play var(--dur) steps(4) var(--delay) infinite;
}
@keyframes sprite-play { to { transform: translateX(-100%); } }

.sprite[data-clip="idle"] { --row: 0; --dur: 2.4s; }
.sprite[data-clip="wave"] { --row: 1; --dur: 0.9s; }
.sprite[data-clip="hop"] { --row: 2; --dur: 0.7s; }
.sprite-trigger:is(:hover, :focus-within) .sprite[data-clip] { --row: 1; --dur: 0.9s; }
.sprite-trigger:active .sprite[data-clip] { --row: 2; --dur: 0.7s; }

/* Out of step, so a row of characters breathes like a crowd */
.sprite--mom { --delay: 0s; }
.sprite--dad { --delay: -0.5s; }
.sprite--bean { --delay: -1.1s; }
.sprite--ben-ben { --delay: -0.3s; }
.sprite--teo { --delay: -1.7s; }
.sprite--eli { --delay: -0.8s; }

@media (prefers-reduced-motion: reduce) {
  .sprite__sheet { animation: none; }
}

/* Colours */
.sp-ink { fill: var(--sp-ink); }
.sp-skin { fill: var(--sp-skin); }
.sp-skin-shade { fill: var(--sp-skin-shade); }
.sp-blush { fill: var(--sp-blush); }
.sp-mouth { fill: var(--sp-mouth); }
.sp-hair-plum { fill: var(--sp-hair-plum); }
.sp-hair-plum-shade { fill: var(--sp-hair-plum-shade); }
.sp-hair-brown { fill: var(--sp-hair-brown); }
.sp-hair-brown-shade { fill: var(--sp-hair-brown-shade); }
.sp-hair-dark { fill: var(--sp-hair-dark); }
.sp-hair-dark-shade { fill: var(--sp-hair-dark-shade); }
.sp-hair-auburn { fill: var(--sp-hair-auburn); }
.sp-hair-auburn-shade { fill: var(--sp-hair-auburn-shade); }
.sp-hair-gold { fill: var(--sp-hair-gold); }
.sp-hair-gold-shade { fill: var(--sp-hair-gold-shade); }
.sp-rose { fill: var(--sp-rose); }
.sp-rose-shade { fill: var(--sp-rose-shade); }
.sp-teal { fill: var(--sp-teal); }
.sp-teal-shade { fill: var(--sp-teal-shade); }
.sp-mint { fill: var(--sp-mint); }
.sp-mint-shade { fill: var(--sp-mint-shade); }
.sp-amber { fill: var(--sp-amber); }
.sp-amber-shade { fill: var(--sp-amber-shade); }
.sp-violet { fill: var(--sp-violet); }
.sp-violet-shade { fill: var(--sp-violet-shade); }
.sp-coral { fill: var(--sp-coral); }
.sp-coral-shade { fill: var(--sp-coral-shade); }
.sp-sky { fill: var(--sp-sky); }
.sp-sky-shade { fill: var(--sp-sky-shade); }
.sp-denim { fill: var(--sp-denim); }
.sp-denim-shade { fill: var(--sp-denim-shade); }
.sp-khaki { fill: var(--sp-khaki); }
.sp-khaki-shade { fill: var(--sp-khaki-shade); }
.sp-slate { fill: var(--sp-slate); }
.sp-slate-shade { fill: var(--sp-slate-shade); }
.sp-shoe { fill: var(--sp-shoe); }
.sp-shoe-shade { fill: var(--sp-shoe-shade); }