/* Vector interpretation of the exhibited robot. Movement stays in this figure. */
.robot-character { width: min(100%,480px); margin: 0; justify-self: center; }
.robot-character-scene { position: relative; isolation: isolate; border-radius: 50%; background: radial-gradient(ellipse at 50% 57%,#8bd3d222,transparent 65%); }
.robot-character svg { display: block; width: 100%; height: min(55dvh,480px); overflow: visible; }
.robot-character figcaption { display: flex; justify-content: space-between; gap: 20px; margin-top: 8px; font-size: .8125rem; line-height: 1.6; color: #b9ced7; }
.robot-character figcaption a { color: #d1e9ec; text-underline-offset: 5px; }
.robot-character .bot-wave { transform-origin: 350px 245px; }
.robot-character .bot-eyes { transform-box: fill-box; transform-origin: center; }
.robot-character.is-playing .bot-travel { animation: bot-travel 5.5s ease-in-out infinite; }
.robot-character.is-playing .bot-wave { animation: bot-wave 9s ease-in-out infinite; }
.robot-character.is-playing .bot-eyes { animation: bot-blink 5.2s ease-in-out infinite; }
.robot-character.is-playing .bot-signal { animation: bot-signal 3s ease-in-out infinite; }
@keyframes bot-travel { 0%,14%,100% { transform: translateX(-12px); } 43%,66% { transform: translateX(14px); } }
@keyframes bot-wave { 0%,18%,63%,100% { transform: rotate(0); } 31%,45% { transform: rotate(-24deg); } 38%,52% { transform: rotate(-10deg); } }
@keyframes bot-blink { 0%,42%,46%,100% { transform: scaleY(1); } 44% { transform: scaleY(.13); } }
@keyframes bot-signal { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
@media (max-width:650px) { .robot-character { width: min(100%,380px); } .robot-character svg { height: auto; } .robot-character figcaption { flex-wrap: wrap; gap: 8px 18px; } }
@media (prefers-reduced-motion:reduce) { .robot-character * { animation: none !important; } }