/* Animated actors on the orchestration figure: robots in the agent boxes, researchers in the research-team boxes, courier bots on the arrows. Drawn in the figure's own ink / grey / lime palette on its white card. */ .figstack svg.actors { position: absolute; left: 12px; top: 12px; width: calc(100% - 24px); height: calc(100% - 24px); overflow: visible; pointer-events: none; } .figstack.has-couriers .pulse { display: none; } .actors * { transform-box: fill-box; } /* idle */ @keyframes act-blink { 0%, 86%, 100% { opacity: 1; } 90%, 95% { opacity: .15; } } @keyframes act-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.8px); } } @keyframes act-scan { 0%, 38%, 100% { transform: translateX(0); } 48%, 78% { transform: translateX(1.3px); } } @keyframes act-sway { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } } @keyframes act-rotor { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.12); } } .actors.live .robot .bulb { animation: act-blink 3.4s infinite; } .actors.live .robot .torso { animation: act-bob 2.9s ease-in-out infinite; } .actors.live .robot .eyes { animation: act-scan 5.2s ease-in-out infinite; } .actors.live .robot[data-id="b-gateway"] .torso { animation-delay: -1.1s; } .actors.live .robot[data-id="b-eval"] .torso { animation-delay: -2s; } .actors.live .researcher .figure { transform-origin: 50% 100%; animation: act-sway 3.8s ease-in-out infinite; } .actors.live .researcher[data-id="r-gateway"] .figure { animation-delay: -1.3s; } .actors.live .researcher[data-id="r-results"] .figure { animation-delay: -2.4s; } .actors.live .researcher[data-id="r-eval"] .figure { animation-delay: -.7s; } .actors.live .courier .rotor { transform-origin: 50% 50%; animation: act-rotor .2s linear infinite; } /* reactions (classes toggled from factory-actors.js) */ .robot .arm.right, .researcher .arm.right { transform-origin: 0 0; transition: transform .28s ease; } .robot .arm.left, .researcher .arm.left { transform-origin: 100% 0; transition: transform .28s ease; } .robot.wave .arm.right { transform: rotate(-120deg); } .researcher.raise .arm.right { transform: rotate(-125deg); } @keyframes act-type-r { from { transform: rotate(-10deg); } to { transform: rotate(12deg); } } @keyframes act-type-l { from { transform: rotate(12deg); } to { transform: rotate(-10deg); } } .robot.typing .arm.right { animation: act-type-r .16s ease-in-out alternate infinite; } .robot.typing .arm.left { animation: act-type-l .16s ease-in-out alternate infinite; } @keyframes act-catch { 0% { transform: translateY(0) scaleY(1); } 35% { transform: translateY(1.6px) scaleY(.93); } 70% { transform: translateY(-1.2px) scaleY(1.02); } 100% { transform: translateY(0) scaleY(1); } } .robot.catch .torso { transform-origin: 50% 100%; animation: act-catch .55s ease-out; } @keyframes act-alert { 0%, 100% { opacity: 1; } 50% { opacity: .2; } } .robot.alert .bulb { animation: act-alert .32s linear infinite; fill: #819827; } .ignite { fill: #fff; opacity: 0; } @keyframes act-ignite { 0% { opacity: .4; } 100% { opacity: 0; } } .ignite.on { animation: act-ignite .7s ease-out; } .tablet .bar { transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.2, .8, .2, 1); } .bubble, .paper { transition: opacity .18s linear; } /* ?embed=1 shows the figure alone (side-by-side previews) */ body.actors-embed .topbar, body.actors-embed .site-footer, body.actors-embed main.prose > :not(figure.orchestration) { display: none; } body.actors-embed .page { padding: 10px; max-width: none; } body.actors-embed .factory .authored-figure { margin: 0; max-width: none; } @media (max-width: 640px) { .factory .figstack svg.actors { left: 6px; top: 6px; width: calc(100% - 12px); height: calc(100% - 12px); } }