/* Puggbot's face, for a stream camera slot the bot sits in (see puggbot.js). The page
   sizes and places the slot; this only fills it. The mood class picks the body animation;
   blinking and the talking mouth run on their own elements so they layer on any mood. */
/* !important: every page styles its camera slots more specifically than this. */
.puggbot { background: radial-gradient(circle at 50% 38%, #2f3b46, #141a20 72%) !important; }
.puggbot svg { width: 58%; height: 58%; margin-top: 30px; overflow: visible;
  animation: bot-bob 2.4s ease-in-out infinite; }
.puggbot svg * { transform-box: fill-box; transform-origin: center; }
.puggbot .ant { transform-origin: 50% 100%; animation: bot-wiggle 3s ease-in-out infinite; }
.puggbot .eyes { animation: bot-blink 4s infinite; }
.puggbot .eye, .puggbot .mouth { transition: transform .15s; }
.puggbot.talking .mouth { animation: bot-talk .16s ease-in-out infinite alternate; }

.puggbot.dance svg { animation: bot-bop .5s ease-in-out infinite alternate; }
.puggbot.dance .arm.l { animation: bot-wave .5s ease-in-out infinite alternate; }
.puggbot.dance .arm.r { animation: bot-wave .5s ease-in-out infinite alternate-reverse; }
.puggbot.dance .ant { animation-duration: .5s; }
.puggbot.happy svg { animation: bot-hop .3s ease-out 2; }
.puggbot.happy .mouth { transform: scaleX(1.3); }
.puggbot.shock .eyes { animation: none; }
.puggbot.shock .eye { transform: scale(1.6); }
.puggbot.win svg { animation: bot-party .6s ease-in-out infinite; }
.puggbot.win .arm { animation: bot-wave .25s ease-in-out infinite alternate; }
.puggbot.win .mouth { transform: scaleX(1.4); }
.puggbot.sad svg { animation: none; transform: translateY(16px) rotate(-7deg); filter: saturate(.3); }
.puggbot.sad .eyes { animation: none; }
.puggbot.sad .eye { transform: scaleY(.3); }
.puggbot.sad .mouth { transform: scaleX(.6); }

.puggbot .tag { position: absolute; bottom: 12px; font-size: 16px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase; color: #9fb6c6; }
.puggbot .say { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 1;
  padding: 8px 10px; border-radius: 12px; background: #f4f7ee; color: #17200a;
  font-size: 20px; font-weight: 800; line-height: 1.1; text-align: center;
  opacity: 0; transform: translateY(-8px) scale(.9); transition: opacity .15s, transform .15s; }
.puggbot .say.on { opacity: 1; transform: none; }

@keyframes bot-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes bot-bop { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-10px) rotate(6deg); } }
@keyframes bot-hop { 50% { transform: translateY(-18px) scale(1.06); } }
@keyframes bot-party { 0% { transform: rotate(-12deg) translateY(0); } 50% { transform: rotate(12deg) translateY(-16px); }
  100% { transform: rotate(-12deg) translateY(0); } }
@keyframes bot-wave { from { transform: translateY(6px) rotate(15deg); } to { transform: translateY(-12px) rotate(-25deg); } }
@keyframes bot-wiggle { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
@keyframes bot-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes bot-talk { from { transform: scaleY(1); } to { transform: scaleY(2.6); } }