/* Short, optional motion. Every element has a complete static state. */
.tool-motion-demo{position:relative;overflow:hidden;border:1px solid var(--accent);border-radius:10px;background:#100a25;min-height:120px;color:var(--sw-text)}
.tool-demo-top{display:flex;justify-content:space-between;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.12);font:700 9px/1 var(--font-tech);letter-spacing:.13em;color:var(--sw-dim)}
.tool-demo-screen{padding:12px 15px;transform-origin:65% 60%}.tool-demo-screen small{display:block;font:700 9px var(--font-tech);letter-spacing:.16em;color:var(--accent)}.tool-demo-screen b{display:block;margin:6px 0;font-size:15px;color:#fff}.demo-line{display:inline-block;vertical-align:middle;width:30%;height:3px;background:var(--accent);opacity:.6}.demo-status{display:inline-block;vertical-align:middle;margin-left:8px;padding:4px 6px;border:1px solid var(--accent);border-radius:4px;color:var(--accent);font:700 9px var(--font-tech)}.demo-cursor{position:absolute;right:19%;bottom:13px;color:#fff;text-shadow:0 1px 4px #000;font-size:20px;opacity:0}
.motion-workflow li{position:relative}.motion-workflow li:not(:last-child):after{content:'→';position:absolute;right:-16px;top:42%;z-index:1;color:var(--sw-cyan);font-size:20px}
.motion-marker{position:relative}.motion-marker:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--sw-magenta),var(--sw-cyan));transform-origin:left}
@media(prefers-reduced-motion:no-preference){
 html.motion-enabled .synth-home main .sw-card:hover{animation:card-handheld .48s ease-out 1}
 html.motion-enabled .motion-workflow.is-motion-visible li{animation:workflow-in .65s both}
 html.motion-enabled .motion-workflow.is-motion-visible li:nth-child(2){animation-delay:.18s}html.motion-enabled .motion-workflow.is-motion-visible li:nth-child(3){animation-delay:.36s}
 html.motion-enabled .tool-motion-demo.is-motion-visible .tool-demo-screen{animation:demo-focus 2.8s ease-in-out 1}
 html.motion-enabled .tool-motion-demo.is-motion-visible .demo-cursor{animation:demo-cursor 2.8s ease-in-out 1}
 html.motion-enabled .sw-ladder.is-motion-visible .sw-rung{animation:offer-in .65s both}
 html.motion-enabled .sw-ladder.is-motion-visible .sw-rung:nth-child(2){animation-delay:.08s}html.motion-enabled .sw-ladder.is-motion-visible .sw-rung:nth-child(3){animation-delay:.16s}html.motion-enabled .sw-ladder.is-motion-visible .sw-rung:nth-child(4){animation-delay:.24s}html.motion-enabled .sw-ladder.is-motion-visible .sw-rung:nth-child(5){animation-delay:.32s}
 html.motion-enabled .motion-marker.is-motion-visible:after{animation:marker-in 1s ease-out both}
}
@keyframes card-handheld{0%,100%{transform:translate(0,0) rotate(0)}20%{transform:translate(-2px,1px) rotate(-.3deg)}45%{transform:translate(2px,-1px) rotate(.25deg)}70%{transform:translate(-1px,0) rotate(-.12deg)}}
@keyframes workflow-in{from{opacity:.35;transform:translateY(15px)}to{opacity:1;transform:none}}
@keyframes offer-in{from{opacity:.35;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes demo-focus{0%,100%{transform:scale(1)}45%,75%{transform:scale(1.08)}}
@keyframes demo-cursor{0%{opacity:0;transform:translate(-55px,20px)}20%{opacity:1}65%{opacity:1;transform:translate(0,0)}90%,100%{opacity:0}}
@keyframes marker-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:700px){.motion-workflow li:not(:last-child):after{content:'↓';top:auto;bottom:-21px;right:22px}.tool-motion-demo{min-height:115px}}