/* stop "coffee": the mug sticker, a figure that shakes after each sip, and the meter on its own row. Scoped under #stop-coffee. */

/* the vibrating mug sits beside the meter, on its own row under the chips */
#stop-coffee .coffee-meterrow { flex: 0 0 100%; display: flex; align-items: center; gap: 0.75rem; }
#stop-coffee .coffee-sticker { position: relative; flex: none; width: 3.4rem; height: 3.4rem; transform: rotate(-6deg); filter: drop-shadow(2px 2px 0 var(--c-ink)); }
#stop-coffee .coffee-meterrow .hb-meter { flex: 1; width: auto; max-width: 14rem; }

/* wired jitter: translate at most 3px, 0.6s cycle (never faster than ~8 steps per second) */
#stop-coffee .stop__art.is-jitter img { animation: coffee-jitter 0.6s linear 4; }
#stop-coffee .stop__art.is-jitter.is-wiggle img { animation: coffee-jitter 0.6s linear 4, coffee-wiggle 0.6s ease-in-out 1; }
@keyframes coffee-jitter {
  0% { transform: translate(0, 0); }
  25% { transform: translate(2px, -1px); }
  50% { transform: translate(-3px, 1px); }
  75% { transform: translate(1px, -2px); }
  100% { transform: translate(0, 0); }
}
/* the wiggle for sips past the fourth: a small rotation, no translation */
@keyframes coffee-wiggle {
  0%, 100% { rotate: 0deg; }
  25% { rotate: -3deg; }
  50% { rotate: 2.5deg; }
  75% { rotate: -1.5deg; }
}

@media (prefers-reduced-motion: reduce) {
  #stop-coffee .stop__art img,
  #stop-coffee .coffee-sticker { animation: none !important; }
}

@media (max-width: 52rem) {
}

/* the sprite cell has blank space around the mug: pull it left so the mug lines up with the buttons above */
#stop-coffee .coffee-sticker { margin-left: -0.7rem; }