/* Anvol's mark and its four states. It moves only when it has something to
   say: idle blinks, listening nods with the spark lit, working flickers the
   spark and taps, needs-you carries a rust dot and hops now and then.
   Source of the shape and the states: research/anvol-repositioning-2026-09-22/design/v5.html */
.anvol-mark { display: block; color: var(--ink, #191713); --eye: #f3f1ec; flex-shrink: 0; }
.anvol-mark.inverse { color: var(--bone, #f3f1ec); --eye: #191713; }
.anvol-mark .eye { fill: var(--eye); }
.anvol-mark .eyes { transform-origin: 50% 30%; animation: anvol-blink 4.4s infinite; }
.anvol-mark .spark, .anvol-mark .dot { fill: #c75b22; opacity: 0; }
.anvol-mark.listening { animation: anvol-nod 1s ease-in-out infinite alternate; transform-origin: 50% 90%; }
.anvol-mark.listening .spark { opacity: 1; animation: anvol-spark 1.1s infinite; }
.anvol-mark.working { animation: anvol-tap 0.5s ease-in-out infinite; transform-origin: 50% 100%; }
.anvol-mark.working .spark { opacity: 1; animation: anvol-flicker 0.5s steps(2) infinite; }
.anvol-mark.needs { animation: anvol-hop 6s ease-in-out infinite; transform-origin: 50% 100%; }
.anvol-mark.needs .dot { opacity: 1; }
@keyframes anvol-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes anvol-spark { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.9; } 50% { transform: translate(1px, -2px) scale(1.3); opacity: 1; } }
@keyframes anvol-flicker { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0.4; transform: translate(1px, -1px); } }
@keyframes anvol-tap { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes anvol-nod { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes anvol-hop { 0%, 90%, 100% { transform: translateY(0); } 93% { transform: translateY(-5px); } 97% { transform: translateY(0); } }
/* Reduced motion keeps the state (spark, dot), not the movement. */
@media (prefers-reduced-motion: reduce) { .anvol-mark, .anvol-mark * { animation: none; } }