/*
 * Brand wave: a small decorative waving hand after the TallyHi logo text in
 * the site header (.brand). Waves twice on page load and again on hover/focus.
 *
 * The hand is a custom SVG in brand yellow (--mark #FFD84D) with an outline in
 * the ink color: navy (#14213D) in light mode, #ECEEF2 in dark mode so the
 * outline stays visible on the dark header. The smile stays navy in both,
 * because it sits on the yellow palm.
 *
 * It is a CSS background on an empty pseudo-element, so it is purely
 * decorative: nothing is announced to screen readers. The box has a fixed
 * size, so its space is reserved before the image loads (no layout shift).
 *
 * Each page loads it with <link rel="stylesheet" href="/css/brand-wave.css">
 * placed after its inline <style>, so this file only adds to .brand.
 */

.brand { white-space: nowrap; }

.brand::after {
  content: "";
  display: block;                 /* .brand is inline-flex; it centers this vertically */
  flex: none;                     /* never shrink or wrap inside the flex logo */
  width: 0.95em;
  height: 0.95em;
  margin-left: -4px;              /* .brand has a 10px flex gap; tuck the hand closer */
  background: url(/img/wave-hand-b.svg) center / contain no-repeat;
  transform-origin: 70% 80%;      /* pivot from the wrist */
  animation: brand-wave 1.6s ease-in-out 0.4s 1 both;
}

@media (prefers-color-scheme: dark) {
  .brand::after { background-image: url(/img/wave-hand-b-dark.svg); }
}

/* An identical keyframe under a second name lets hover restart the wave. */
.brand:hover::after,
.brand:focus-visible::after {
  animation: brand-wave-again 1.6s ease-in-out 0s 1 both;
}

@keyframes brand-wave {
  0%, 60%, 100% { transform: rotate(0deg); }
  10%, 30%      { transform: rotate(14deg); }
  20%           { transform: rotate(-8deg); }
  40%           { transform: rotate(-4deg); }
  50%           { transform: rotate(10deg); }
}

@keyframes brand-wave-again {
  0%, 60%, 100% { transform: rotate(0deg); }
  10%, 30%      { transform: rotate(14deg); }
  20%           { transform: rotate(-8deg); }
  40%           { transform: rotate(-4deg); }
  50%           { transform: rotate(10deg); }
}

@media (prefers-reduced-motion: reduce) {
  .brand::after,
  .brand:hover::after,
  .brand:focus-visible::after { animation: none; }
}