/* Motion describes production. Idle machinery freezes in place, and every
   transform is confined to an illustrated component, never the whole card. */
.elyra-art { display:block; width:100%; height:100%; overflow:hidden; pointer-events:none; }
.elyra-art .art-motion { animation-play-state:paused; }
.machine.working:not(.off) .elyra-art .art-motion,
.blueprint:not(.locked):hover .elyra-art .art-motion,
.blueprint:not(.locked):focus-visible .elyra-art .art-motion { animation-play-state:running; }
.machine.off .elyra-art { filter:saturate(.48); }
.machine:not(.working) .elyra-art .art-fire,
.machine:not(.working) .elyra-art .art-arc { opacity:.3; }
.machine:not(.working) .elyra-art .art-steam,
.machine:not(.working) .elyra-art .art-chip,
.machine:not(.working) .elyra-art .art-rain,
.machine:not(.working) .elyra-art .art-drip { opacity:.12; }
.elyra-art .art-spin { transform-box:fill-box; transform-origin:center; animation:elyra-spin 6s linear infinite; animation-play-state:paused; }
.elyra-art .art-spin-reverse { transform-box:fill-box; transform-origin:center; animation:elyra-spin 4.5s linear infinite reverse; animation-play-state:paused; }
.elyra-art .art-spin-fast { transform-box:fill-box; transform-origin:center; animation:elyra-spin 1.6s linear infinite; animation-play-state:paused; }
.elyra-art .art-spin-slow { transform-box:fill-box; transform-origin:center; animation:elyra-spin 12s linear infinite; animation-play-state:paused; }
.elyra-art .art-orbit { animation:elyra-spin 22s linear infinite; animation-play-state:paused; }
.elyra-art .art-drill { animation:elyra-drill .35s ease-in-out infinite alternate; animation-play-state:paused; }
.elyra-art .art-shake { animation:elyra-shake .55s linear infinite; animation-play-state:paused; }
.elyra-art .art-piston { animation:elyra-piston 1.25s ease-in-out infinite; animation-play-state:paused; }
.elyra-art .art-hammer { animation:elyra-hammer 2s ease-in-out infinite; animation-play-state:paused; }
.elyra-art .art-press { animation:elyra-press 2.5s ease-in-out infinite; animation-play-state:paused; }
.elyra-art .art-belt { animation:elyra-belt 1s linear infinite; animation-play-state:paused; }
.elyra-art .art-fire { transform-box:fill-box; transform-origin:50% 100%; animation:elyra-fire .65s ease-in-out infinite alternate; animation-play-state:paused; }
.elyra-art .art-steam { animation:elyra-steam 2.8s ease-out infinite; animation-play-state:paused; }
.elyra-art .art-bubble { animation:elyra-bubble 2.4s ease-out infinite; animation-play-state:paused; }
.elyra-art .art-glow { animation:elyra-glow 2.6s ease-in-out infinite alternate; animation-play-state:paused; }
.elyra-art .art-leaf { transform-box:fill-box; transform-origin:100% 100%; animation:elyra-leaf 4.5s ease-in-out infinite alternate; animation-play-state:paused; }
.elyra-art .art-chip { animation:elyra-chip .9s ease-out infinite; animation-play-state:paused; }
.elyra-art .art-water { animation:elyra-water 2.5s linear infinite; animation-play-state:paused; }
.elyra-art .art-needle { animation:elyra-needle 2.8s ease-in-out infinite alternate; animation-play-state:paused; }
.elyra-art .art-rain { animation:elyra-rain 1s linear infinite; animation-play-state:paused; }
.elyra-art .art-hover { animation:elyra-hover 3.5s ease-in-out infinite alternate; animation-play-state:paused; }
.elyra-art .art-arc { animation:elyra-arc 1.8s steps(2,end) infinite; animation-play-state:paused; }
.elyra-art .art-spark { animation:elyra-glow 2s ease-in-out infinite alternate; animation-play-state:paused; }
.elyra-art .art-carriage { animation:elyra-carriage 4s ease-in-out infinite; animation-play-state:paused; }
.elyra-art .art-sift { animation:elyra-sift .24s linear infinite alternate; animation-play-state:paused; }
.elyra-art .art-glass-turn { animation:elyra-glass-turn 4s ease-in-out infinite alternate; animation-play-state:paused; }
.elyra-art .art-drip { animation:elyra-drip 1.7s ease-in infinite; animation-play-state:paused; }
.elyra-art .art-coil { animation:elyra-coil .75s ease-in-out infinite alternate; animation-play-state:paused; }
.elyra-art .art-telescope { animation:elyra-telescope 8s ease-in-out infinite alternate; animation-play-state:paused; }
.elyra-art .art-switch { transform-box:fill-box;transform-origin:left center;animation:elyra-switch 3s ease-in-out infinite;animation-play-state:paused; }
.elyra-art .art-delay { animation-delay:-1.25s; }
#app.paused .elyra-art .art-motion,
.paused .elyra-art .art-motion,
.machine.off .elyra-art .art-motion { animation-play-state:paused; }
.island-art { width:100%; height:100%; display:block; pointer-events:none; }

@keyframes elyra-spin { to { transform:rotate(360deg); } }
@keyframes elyra-drill { to { transform:translateX(-3px); } }
@keyframes elyra-shake { 0%,100%{transform:translateY(0)} 25%{transform:translateY(.4px)} 75%{transform:translateY(-.4px)} }
@keyframes elyra-piston { 0%,100%{transform:translateY(0)} 50%{transform:translateY(10px)} }
@keyframes elyra-hammer { 0%,15%,100%{transform:translateY(-5px)} 48%,62%{transform:translateY(8px)} }
@keyframes elyra-press { 0%,30%,100%{transform:translateY(0)} 48%,65%{transform:translateY(8px)} }
@keyframes elyra-belt { to { stroke-dashoffset:-22; } }
@keyframes elyra-fire { from{transform:scale(.93,.9);opacity:.8} to{transform:scale(1.05,1.1);opacity:1} }
@keyframes elyra-steam { 0%{transform:translateY(5px);opacity:0} 20%{opacity:.65} 100%{transform:translateY(-14px);opacity:0} }
@keyframes elyra-bubble { 0%{transform:translateY(3px);opacity:0} 20%{opacity:.8} 100%{transform:translateY(-17px);opacity:0} }
@keyframes elyra-glow { from{opacity:.5} to{opacity:1} }
@keyframes elyra-leaf { from{transform:rotate(-3deg) scale(.98)} to{transform:rotate(3deg) scale(1.03)} }
@keyframes elyra-chip { 0%{transform:translate(0,0);opacity:0} 15%{opacity:.8} 100%{transform:translate(-13px,8px);opacity:0} }
@keyframes elyra-water { to { stroke-dashoffset:-64; } }
@keyframes elyra-needle { from{transform:rotate(-14deg)} to{transform:rotate(18deg)} }
@keyframes elyra-rain { from{transform:translateY(-4px);opacity:.7} to{transform:translateY(8px);opacity:0} }
@keyframes elyra-hover { from{transform:translateY(-3px)} to{transform:translateY(3px)} }
@keyframes elyra-arc { 0%,40%,80%,100%{opacity:.12} 10%,30%,70%{opacity:.95} }
@keyframes elyra-carriage { 0%,10%,100%{transform:translateX(-20px)} 45%,60%{transform:translateX(21px)} }
@keyframes elyra-sift { from{transform:translate(-1px,0)} to{transform:translate(1px,.4px)} }
@keyframes elyra-glass-turn { from{transform:rotate(-4deg)} to{transform:rotate(5deg)} }
@keyframes elyra-drip { 0%,35%{transform:translateY(0);opacity:0} 40%{opacity:1} 100%{transform:translateY(10px);opacity:0} }
@keyframes elyra-coil { from{transform:translateY(-.6px)} to{transform:translateY(.6px)} }
@keyframes elyra-telescope { from{transform:translateX(-2px)} to{transform:translateX(3px)} }
@keyframes elyra-switch { 0%,70%,100%{transform:rotate(0)} 78%,90%{transform:rotate(8deg)} }
html[data-motion="calm"] .elyra-art .art-motion,html[data-motion-limited="true"] .elyra-art .art-motion{animation:none!important}
@media (prefers-reduced-motion:reduce) {
  .elyra-art .art-motion { animation:none!important; transform:none!important; }
  .elyra-art .art-arc,.elyra-art .art-glow,.elyra-art .art-fire { opacity:.8; }
  .elyra-art .art-steam,.elyra-art .art-rain,.elyra-art .art-drip { opacity:.35; }
}