/* Mochilita avatar animations. Every moving part has its own transform-origin (set inline in avatar.js). */
svg.av { overflow: visible; }
svg.av * { transform-box: view-box; }
svg.av .av-all, svg.av .av-arm, svg.av .av-head, svg.av .av-body, svg.av .av-gills, svg.av .av-eyes, svg.av .av-tail, svg.av .av-pet, svg.av .av-mouth { transform-box: view-box; }

/* idle: breathe, blink, gills and tail sway, pet bobs */
svg.av .av-body { animation: av-breathe 3.2s ease-in-out infinite; }
svg.av .av-head { animation: av-bob 3.2s ease-in-out infinite; }
svg.av .av-eyes { animation: av-blink 4.6s infinite; }
svg.av .av-gills-l { animation: av-gill-l 2.6s ease-in-out infinite; }
svg.av .av-gills-r { animation: av-gill-r 2.6s ease-in-out infinite; }
svg.av .av-tail { animation: av-tail 2.8s ease-in-out infinite; }
svg.av .av-pet { animation: av-pet 5s ease-in-out infinite; transform-origin: 262px 252px; }
@keyframes av-breathe { 50% { transform: scale(1.025, .985); } }
@keyframes av-bob { 50% { transform: translateY(1.6px) rotate(.6deg); } }
@keyframes av-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes av-gill-l { 50% { transform: rotate(-5deg); } }
@keyframes av-gill-r { 50% { transform: rotate(-5deg); } }
@keyframes av-tail { 50% { transform: rotate(6deg); } }
/* the pet: head-tilt, a happy wiggle, a little hop, then rests */
@keyframes av-pet { 0%, 12%, 100% { transform: none; } 6% { transform: rotate(-7deg); } 18% { transform: rotate(5deg); } 24% { transform: none; }
  40% { transform: scale(1.04, .96); } 46% { transform: translateY(-9px) scale(.97, 1.03); } 52% { transform: none; }
  70% { transform: rotate(3deg); } 73% { transform: rotate(-3deg); } 76% { transform: rotate(3deg); } 79% { transform: none; } }

/* effects */
svg.av .fx-twinkle path { animation: av-twinkle 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
svg.av .fx-rise > * { animation: av-rise 3s ease-in infinite; }
svg.av .fx-fall > * { animation: av-fall 4s linear infinite; }
svg.av .fx-pulse { animation: av-pulse 2.4s ease-in-out infinite; transform-origin: 120px 150px; }
svg.av .fx-orbit { animation: av-orbit 6s linear infinite; }
@keyframes av-twinkle { 50% { transform: scale(.4) rotate(45deg); opacity: .5; } }
@keyframes av-rise { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-80px); opacity: 0; } }
@keyframes av-fall { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(250px); opacity: 0; } }
@keyframes av-pulse { 50% { opacity: .55; transform: scale(1.04); } }
@keyframes av-orbit { to { transform: rotate(360deg); } }

/* moves (added for a few seconds by MOCHI_AVATAR.play) */
svg.av.av-wave .av-arm-r { animation: av-wave 1.6s ease-in-out; }
@keyframes av-wave { 15% { transform: rotate(-125deg); } 30% { transform: rotate(-105deg); } 45% { transform: rotate(-130deg); } 60% { transform: rotate(-105deg); } 80% { transform: rotate(-125deg); } 100% { transform: rotate(0); } }
svg.av.av-jump .av-all { animation: av-jump 1s cubic-bezier(.3, 0, .3, 1); transform-origin: 120px 248px; }
@keyframes av-jump { 15% { transform: scale(1.08, .9); } 45% { transform: translateY(-34px) scale(.95, 1.06); } 75% { transform: scale(1.06, .94); } 100% { transform: none; } }
svg.av.av-cheer .av-all { animation: av-jump 1.4s cubic-bezier(.3, 0, .3, 1); transform-origin: 120px 248px; }
svg.av.av-cheer .av-arm-r { animation: av-up-r 1.4s ease-in-out; }
svg.av.av-cheer .av-arm-l { animation: av-up-l 1.4s ease-in-out; }
svg.av.av-cheer .av-eyes, svg.av.av-dance .av-eyes { animation: none; transform: scaleY(.55); }
@keyframes av-up-r { 20%, 80% { transform: rotate(-140deg); } }
@keyframes av-up-l { 20%, 80% { transform: rotate(140deg); } }
svg.av.av-dance .av-all { animation: av-sway 2.4s ease-in-out; transform-origin: 120px 248px; }
svg.av.av-dance .av-arm-r { animation: av-pump-r 0.6s ease-in-out 4; }
svg.av.av-dance .av-arm-l { animation: av-pump-l 0.6s ease-in-out 4; animation-delay: .3s; }
@keyframes av-sway { 12%, 37%, 62%, 87% { transform: rotate(-8deg) translateX(-4px); } 25%, 50%, 75% { transform: rotate(8deg) translateX(4px); } }
@keyframes av-pump-r { 50% { transform: rotate(-120deg); } }
@keyframes av-pump-l { 50% { transform: rotate(120deg); } }
svg.av.av-spin .av-all { animation: av-spin 1.2s ease-in-out; transform-origin: 120px 160px; }
@keyframes av-spin { 50% { transform: scaleX(-1) translateY(-8px); } }
svg.av.av-wiggle .av-gills-l { animation: av-gill-l .25s ease-in-out 6; }
svg.av.av-wiggle .av-gills-r { animation: av-gill-r .25s ease-in-out 6; }
svg.av.av-wiggle .av-head { animation: av-tilt .5s ease-in-out 3; }
@keyframes av-tilt { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
svg.av.av-hop .av-all { animation: av-hop .7s ease-in-out 2; transform-origin: 120px 248px; }
@keyframes av-hop { 50% { transform: translateY(-16px); } }
svg.av.av-salsa .av-all { animation: av-salsa 2.4s ease-in-out; transform-origin: 120px 248px; }
svg.av.av-salsa .av-arm-r { animation: av-pump-r .8s ease-in-out 3; }
@keyframes av-salsa { 0%, 100% { transform: none; } 25% { transform: translateX(-14px) rotate(-5deg); } 50% { transform: none; } 75% { transform: translateX(14px) rotate(5deg); } }
svg.av.av-robot .av-all { animation: av-robot 2.4s steps(1); transform-origin: 120px 248px; }
svg.av.av-robot .av-arm-r { animation: av-robot-arm 2.4s steps(1); }
svg.av.av-robot .av-arm-l { animation: av-robot-arm2 2.4s steps(1); }
@keyframes av-robot { 0% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } 100% { transform: none; } }
@keyframes av-robot-arm { 0% { transform: rotate(-90deg); } 33% { transform: rotate(0); } 66% { transform: rotate(-90deg); } 100% { transform: none; } }
@keyframes av-robot-arm2 { 0% { transform: rotate(0); } 33% { transform: rotate(90deg); } 66% { transform: rotate(0); } 100% { transform: none; } }
svg.av.av-flip .av-all { animation: av-flip 1.2s ease-in-out; transform-origin: 120px 160px; }
@keyframes av-flip { 30% { transform: translateY(-40px) rotate(0); } 70% { transform: translateY(-40px) rotate(360deg); } 100% { transform: rotate(360deg); } }
svg.av.av-stomp .av-all { animation: av-stomp .5s ease-in-out 4; transform-origin: 120px 248px; }
@keyframes av-stomp { 25% { transform: rotate(-4deg) translateY(-6px); } 50% { transform: scale(1.04, .96); } 75% { transform: rotate(4deg) translateY(-6px); } }
svg.av.av-twirl .av-all { animation: av-twirl 2s ease-in-out; transform-origin: 120px 160px; }
svg.av.av-twirl .av-arm-r { animation: av-up-r 2s ease-in-out; }
svg.av.av-twirl .av-arm-l { animation: av-up-l 2s ease-in-out; }
@keyframes av-twirl { 25% { transform: scaleX(-1); } 50% { transform: scaleX(1); } 75% { transform: scaleX(-1); } 100% { transform: none; } }
svg.av.av-shake .av-head { animation: av-shake .3s ease-in-out 4; }
@keyframes av-shake { 25% { transform: translateX(-5px) rotate(-3deg); } 75% { transform: translateX(5px) rotate(3deg); } }
svg.av.av-think .av-head { animation: av-think 2s ease-in-out; }
svg.av.av-think .av-arm-r { animation: av-chin 2s ease-in-out; }
@keyframes av-think { 20%, 80% { transform: rotate(-8deg); } }
@keyframes av-chin { 20%, 80% { transform: rotate(-70deg); } }
svg.av.av-sleep .av-eyes { animation: none; transform: scaleY(.12); }
svg.av.av-sleep .av-all { animation: av-breathe 1.5s ease-in-out 2; transform-origin: 120px 248px; }
svg.av.av-sad .av-head { animation: av-droop 1.6s ease-in-out; }
@keyframes av-droop { 30%, 70% { transform: rotate(4deg) translateY(4px); } }

/* the old .cheer class (used by the app) maps to a jump */
svg.av.cheer .av-all { animation: av-jump 1s cubic-bezier(.3, 0, .3, 1); transform-origin: 120px 248px; }

@media (prefers-reduced-motion: reduce) {
  svg.av *, svg.av { animation: none !important; }
}
.av-calm svg.av *, .av-calm svg.av { animation-iteration-count: 1 !important; }
.av-still svg.av *, .av-still svg.av { animation: none !important; }

/* when Lolo dances, the pet joins in */
svg.av.av-dance .av-pet, svg.av.av-salsa .av-pet, svg.av.av-cheer .av-pet, svg.av.av-jump .av-pet, svg.av.av-hop .av-pet { animation: av-hop .5s ease-in-out 3; }