/* Optional motion layer for the five service homepages. */
.sx-motion-toggle{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 15px;margin-left:auto;color:var(--muted);border:1px solid var(--st-rule);font-size:11px;white-space:nowrap}
.sx-motion-toggle>span:first-child{font:17px/1 monospace}.sx-motion-toggle:hover{color:var(--ink);border-color:var(--ink)}
.sx-enter{transition:opacity .65s ease,translate .65s cubic-bezier(.2,.8,.2,1);transition-delay:var(--sx-enter-delay,0ms)}
.sx-awaiting{opacity:.08;translate:0 24px}.sx-entered{opacity:1;translate:0 0}
.sx-motion-page .sx-loop{animation-play-state:paused!important}.sx-motion-page .sx-motion-running .sx-loop{animation-play-state:running!important}
.sx-motion-page .structure-card,.sx-motion-page .rework-offer{isolation:isolate}
.sx-motion-page .structure-card:after,.sx-motion-page .rework-offer:after{content:'';pointer-events:none;position:absolute;inset:0;z-index:-1;background:radial-gradient(280px circle at var(--sx-x,50%) var(--sx-y,50%),color-mix(in srgb,var(--st-accent) 12%,transparent),transparent 80%);opacity:0;transition:opacity .35s}
.sx-motion-page .structure-card:is(:hover,:focus-within):after,.sx-motion-page .rework-offer:is(:hover,:focus-within):after{opacity:1}
.sx-motion-page .structure-card>h3,.sx-motion-page .structure-card>ul{transition:translate .35s}.sx-motion-page .structure-card:hover>h3{translate:4px 0}.sx-motion-page .structure-card:hover>ul{translate:4px 0;transition-delay:.06s}
.sx-motion-page .structure-detail li{transition:translate .3s,color .3s}.sx-motion-page .structure-detail li:hover{translate:7px 0;color:var(--st-accent)}
.sx-motion-page .archive-image{overflow:hidden}.sx-motion-page .archive-image img{transition:transform .75s cubic-bezier(.2,.8,.2,1),filter .75s}.sx-motion-page .archive-card:is(:hover,:focus-within) img{transform:scale(1.045)}
.sx-motion-page :is(.primary-cta,.sticky-inquiry,.structure-card-link,.sx-action)>span{transition:translate .3s}.sx-motion-page :is(.primary-cta,.sticky-inquiry,.structure-card-link,.sx-action):hover>span{translate:4px -4px}
.sx-motion-page .landing-faq details[open] p{animation:sx-answer-in .4s ease both}.sx-motion-page .landing-faq summary>span{transition:rotate .3s}.sx-motion-page .landing-faq details[open] summary>span{rotate:45deg}
@keyframes sx-answer-in{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}

/* SI: typed ideas, flowing packets, connected development / refinement / operation. */
.sx-code-stream{border-left:2px solid #6279a8;background:#12203899;padding:14px 16px;margin-top:22px;min-height:117px;font:11px/1.9 monospace;color:#dce5f9}
.sx-code-stream>span{display:block;font-size:8px;letter-spacing:.13em;color:#8eabd7;margin-bottom:6px}
.sx-code-stream code{display:block;white-space:nowrap;overflow:hidden;clip-path:inset(0);animation:sx-type-loop 12s steps(32,end) infinite}.sx-code-stream code:nth-of-type(2){animation-delay:1s}.sx-code-stream code:nth-of-type(3){animation-delay:2s}
.sx-code-stream b{font-weight:400;color:#a0b6ff}.sx-code-stream em{font-style:normal;color:#8ba3c7}.sx-code-stream i{display:inline-block;width:5px;height:10px;margin-left:4px;background:#d7ff00}
.sx-si-flow li{animation:sx-flow-step 12s ease-in-out infinite}.sx-si-flow li:nth-child(2){animation-delay:3s}.sx-si-flow li:nth-child(3){animation-delay:6s}.sx-si-flow li:nth-child(4){animation-delay:9s}
.sx-si-flow li:after{content:'';position:absolute;top:-1px;left:0;right:0;height:2px;background:currentColor;opacity:.65}
.sx-motion-page .rework-offer-top b{display:block;animation:sx-symbol-turn 12s ease-in-out infinite}.sx-motion-page .offer-remake .rework-offer-top b{animation-name:sx-arrow-lift}
.sx-system-map{border:1px solid #45536d;background:#122038;margin-bottom:20px;overflow:hidden}
.sx-system-caption{display:flex;justify-content:space-between;gap:15px;padding:16px 22px;border-bottom:1px solid #34455f;font:9px/1.6 monospace;color:#a3b5d7}
.sx-system-network{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:24px 8px}
.sx-system-network>svg{position:absolute;inset:24px 0 auto;width:100%;height:90px;overflow:visible;fill:none;stroke:#526588;stroke-width:1.5}
.sx-network-signal{stroke:#d7ff00;stroke-width:2.5;stroke-dasharray:8 42;animation:sx-packet 7s linear infinite}
.sx-system-node{position:relative;z-index:1;display:flex;align-items:center;flex-direction:column;gap:20px;padding:0 12px 8px}
.sx-system-symbol{display:grid;place-items:center;width:90px;height:90px;background:#192a45;border:1px solid #526588;transition:border-color .3s,background .3s,scale .3s}
.sx-system-name{display:flex;flex-direction:column;gap:9px;align-items:center}.sx-system-name small{font:9px monospace;color:#a9bdff;letter-spacing:.09em}.sx-system-name strong{font-size:17px;font-weight:500;line-height:1.5}
.sx-system-node[aria-pressed=true] .sx-system-symbol{border-color:#d7ff00;background:#2b3a39;scale:1.06}.sx-system-node[aria-pressed=true] .sx-system-name strong{color:#d7ff00}
.sx-system-symbol i{position:relative;display:block;width:40px;height:34px;font-style:normal;color:#d7ff00}
.sx-code-icon span{display:block;height:3px;margin:6px 0;background:#91aaff;animation:sx-code-bar 8s ease-in-out infinite;transform-origin:left}.sx-code-icon span:nth-child(2){width:70%;background:#d7ff00;animation-delay:.6s}.sx-code-icon span:nth-child(3){width:85%;animation-delay:1.2s}
.sx-window-icon span{position:absolute;width:30px;height:25px;border:1px solid #a9bdff;background:#192a45;left:0;top:0}.sx-window-icon span:after{content:'';position:absolute;top:5px;left:0;right:0;border-top:1px solid #a9bdff}.sx-window-icon span:last-child{top:8px;left:10px;border-color:#d7ff00;animation:sx-window-shift 9s ease-in-out infinite}
.sx-system-symbol .sx-orbit-icon{border:1px dashed #8ba5d4;border-radius:50%;width:38px;height:38px;animation:sx-orbit 16s linear infinite}.sx-orbit-icon span{position:absolute;width:8px;height:8px;background:#d7ff00;border:2px solid #192a45;left:50%;top:-4px}.sx-orbit-icon span:last-child{top:auto;bottom:-4px;left:25%;background:#a9bdff}
.sx-motion-page #scope .sx-system-selected{border-color:#a3bd5e;background:#273950}.sx-motion-page #scope .sx-system-selected>.mono{color:#d7ff00}
@keyframes sx-type-loop{0%,5%,100%{clip-path:inset(0 100% 0 0)}32%,84%{clip-path:inset(0 0 0 0)}}
@keyframes sx-flow-step{0%,25%,100%{color:#c3cfe6}5%,20%{color:#d7ff00}}
@keyframes sx-packet{to{stroke-dashoffset:-100}}
@keyframes sx-code-bar{0%,100%{scale:.35 1}35%,70%{scale:1 1}}
@keyframes sx-window-shift{0%,100%{translate:0 0}45%,65%{translate:4px -5px}}
@keyframes sx-orbit{to{rotate:360deg}}
@keyframes sx-symbol-turn{0%,70%,100%{rotate:0deg}40%{rotate:360deg}}
@keyframes sx-arrow-lift{0%,65%,100%{translate:0 0}35%,45%{translate:5px -5px}}

/* Community: a softly breathing greeting and a connected conversation. */
.sx-motion-page .sx-community-hero h1{animation:sx-bubble-breathe 10s ease-in-out infinite;transform-origin:20% 100%;translate:var(--sx-dx,0px) var(--sx-dy,0px);transition:translate .5s}
.sx-motion-page .sticker-brand b{animation:sx-star-sway 14s ease-in-out infinite}.sx-motion-page .sticker-people i{animation:sx-greeting 7s ease-in-out infinite}.sx-motion-page .sticker-people i:nth-child(2){animation-delay:.7s}.sx-motion-page .sticker-people i:nth-child(3){animation-delay:1.4s}
.sx-motion-page .sx-feed-avatar{animation:sx-avatar-nod 9s ease-in-out infinite}.sx-motion-page .sx-community-feed li:nth-child(2) .sx-feed-avatar{animation-delay:3s}.sx-motion-page .sx-community-feed li:nth-child(3) .sx-feed-avatar{animation-delay:6s}.sx-motion-page .sx-feed-end i{animation:sx-arrow-lift 10s ease-in-out infinite}
.sx-motion-page .sx-community-feed li>div{transition:translate .3s,background .3s}.sx-motion-page .sx-community-feed li:hover>div{translate:4px -3px;background:#f2d4d8}
.sx-motion-page .sx-community-feed li:nth-child(even):hover>div{translate:-4px -3px}
@keyframes sx-bubble-breathe{0%,100%{rotate:-.5deg}50%{rotate:.5deg}}
@keyframes sx-star-sway{0%,100%{rotate:-12deg}50%{rotate:28deg}}
@keyframes sx-greeting{0%,25%,100%{translate:0 0;rotate:0deg}12%{translate:0 -9px;rotate:8deg}}
@keyframes sx-avatar-nod{0%,25%,100%{scale:1;rotate:0deg}10%{scale:1.12;rotate:18deg}}

/* Goods: the package rises, print appears and a stamp settles onto the sample. */
.sx-motion-page .sx-goods-object .st-art-scene{translate:var(--sx-dx,0px) var(--sx-dy,0px);transition:translate .65s}
.sx-motion-page .sx-goods-object .st-art-scene .st-package{animation:sx-object-assemble 14s ease-in-out infinite!important}
.sx-motion-page .sx-goods-object .st-art-scene .st-package>b{animation:sx-print-pass 14s ease-in-out infinite!important}
.sx-motion-page .sx-goods-object .st-art-scene .st-hangtag{animation:sx-tag-assemble 14s ease-in-out infinite!important}
.sx-motion-page .sx-goods-object .st-art-scene .st-goods-stamp{animation:sx-stamp-press 14s ease-in-out infinite!important}
.sx-motion-page .sx-goods-object .st-art-scene .st-swatches i{animation:sx-swatch-lift 14s ease-in-out infinite!important}.sx-motion-page .sx-goods-object .st-art-scene .st-swatches i:nth-child(2){animation-delay:.5s!important}.sx-motion-page .sx-goods-object .st-art-scene .st-swatches i:nth-child(3){animation-delay:1s!important}
@keyframes sx-object-assemble{0%,100%{translate:0 12px;rotate:1deg}22%,80%{translate:0 -4px;rotate:0deg}}
@keyframes sx-tag-assemble{0%,100%{translate:8px -13px;rotate:-4deg}32%,78%{translate:0 0;rotate:1deg}}
@keyframes sx-print-pass{0%,15%,100%{clip-path:inset(0 0 100% 0)}38%,88%{clip-path:inset(0)}}
@keyframes sx-stamp-press{0%,25%,100%{translate:7px -20px;scale:1.08}42%{translate:0 2px;scale:.94}48%,80%{translate:0 0;scale:1}}
@keyframes sx-swatch-lift{0%,65%,100%{translate:0 0}40%,50%{translate:0 -5px}}

/* ZEP: floating terrain, a moving route, portal light and ambient pixels. */
.sx-motion-page .sx-zep-world .st-art-scene{translate:var(--sx-dx,0px) var(--sx-dy,0px);transition:translate .7s}
.sx-motion-page .sx-zep-world .st-art-scene .st-zep-block{animation:sx-island-float 12s ease-in-out infinite!important}.sx-motion-page .sx-zep-world .st-art-scene .st-zep-block-two{animation-delay:-6s!important}
.sx-motion-page .sx-zep-world .st-art-scene .st-avatar{animation:sx-avatar-step 3s ease-in-out infinite!important}
.sx-motion-page .sx-zep-world .st-art-scene .st-zep-route{animation:sx-route-flow 9s linear infinite!important}
.sx-motion-page .sx-zep-world .st-art-scene .st-zep-portal path:last-child{animation:sx-portal-light 7s ease-in-out infinite!important}
.sx-world-particles{fill:#c6ff81;pointer-events:none}.sx-motion-page .sx-zep-world .st-art-scene .sx-world-particles path{animation:sx-pixel-rise 9s ease-in-out infinite!important}.sx-motion-page .sx-zep-world .st-art-scene .sx-world-particles path:nth-child(2){animation-delay:-3s!important}.sx-motion-page .sx-zep-world .st-art-scene .sx-world-particles path:nth-child(3){animation-delay:-6s!important}
@keyframes sx-island-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes sx-avatar-step{0%,40%,100%{translate:0 0}20%{translate:0 -4px}}
@keyframes sx-route-flow{to{stroke-dashoffset:-80}}
@keyframes sx-portal-light{0%,100%{opacity:.4}50%{opacity:1;stroke-dashoffset:32}}
@keyframes sx-pixel-rise{0%,100%{translate:0 8px;opacity:.15}50%{translate:0 -17px;opacity:.8}}

/* Pop-up: tracing a plan, a sign lighting up and people advancing toward the door. */
.sx-motion-page .sx-popup-drawing .st-art-scene{translate:var(--sx-dx,0px) var(--sx-dy,0px);transition:translate .7s}
.sx-plan-trace{fill:none;stroke:#bd3e26;stroke-width:1.3;stroke-dasharray:100;stroke-dashoffset:0;opacity:.45;pointer-events:none}
.sx-motion-page .sx-popup-drawing .st-art-scene .sx-plan-trace{animation:sx-plan-draw 12s ease-in-out infinite!important}
.sx-motion-page .sx-popup-planner[data-phase="3"] .st-art-scene .st-visitor{animation:st-queue-step 14s ease-in-out infinite!important;animation-delay:calc(var(--visitor)*-2.8s)!important}
.sx-motion-page .sx-popup-planner[data-phase="3"] .st-art-scene .st-popup-door{animation:st-door-light 14s ease-in-out infinite!important}
.sx-motion-page .sx-popup-planner:is([data-phase="2"],[data-phase="3"]) .st-art-scene .st-billboard text{animation:sx-sign-on 11s ease-in-out infinite!important}
.sx-motion-page .sx-popup-drawing .st-art-scene .st-visitor-route{animation:sx-route-flow 10s linear infinite!important}
@keyframes sx-plan-draw{0%,100%{stroke-dashoffset:100;opacity:0}10%{opacity:.7}65%,82%{stroke-dashoffset:0;opacity:.7}93%{stroke-dashoffset:0;opacity:0}}
@keyframes sx-sign-on{0%,100%{opacity:.45}30%,75%{opacity:1}}

/* Process rhythm and focus feedback carry motion into the body of each page. */
.sx-motion-page .structure-steps li{animation:sx-process-light 16s ease-in-out infinite}
.sx-motion-page .structure-steps li:nth-child(2){animation-delay:4s}.sx-motion-page .structure-steps li:nth-child(3){animation-delay:8s}.sx-motion-page .structure-steps li:nth-child(4){animation-delay:12s}
.sx-motion-page .structure-steps li:after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:currentColor;opacity:.35}
.sx-motion-page .structure-steps li:hover{background:color-mix(in srgb,var(--st-accent) 9%,transparent)}
@keyframes sx-process-light{0%,25%,100%{color:var(--ink)}4%,20%{color:var(--st-accent)}}

@media(max-width:760px){
 .sx-motion-page .landing-sticky{gap:8px}.sx-motion-page .landing-sticky>span{font-size:10px;max-width:45%}.sx-motion-toggle{padding:7px;min-width:37px;min-height:39px}.sx-motion-toggle>span:last-child{display:none}.sx-motion-page .sticky-inquiry{min-width:95px;font-size:11px;padding:10px}
 .sx-code-stream{font-size:9px;padding:12px 10px;min-height:102px}.sx-code-stream>span{font-size:7px}
 .sx-system-caption{padding:14px;font-size:8px;flex-direction:column;gap:6px}.sx-system-network{padding:22px 5px}.sx-system-network>svg{height:57px;top:22px}
 .sx-system-node{padding:0 4px 3px;gap:15px}.sx-system-symbol{width:52px;height:52px}.sx-system-symbol i{scale:.7}.sx-system-name{gap:6px}.sx-system-name small{font-size:7px;letter-spacing:0}.sx-system-name strong{font-size:11px;word-break:keep-all;line-height:1.5}
 .sx-motion-page .structure-card:hover>h3,.sx-motion-page .structure-card:hover>ul{translate:0 0}
}
/* Override both the old art shorthand and its play-state rule at one boundary. */
html body.sx-motion-page .sx-motion-zone .sx-loop[class]{animation-play-state:paused!important}
html body.sx-motion-page .sx-motion-zone.sx-motion-running .sx-loop[class]{animation-play-state:running!important}
html body.sx-motion-page .sx-motion-zone [hidden] .sx-loop[class]{animation-play-state:paused!important}
/* Manual pause and OS reduced motion keep every label, link and chosen diagram visible. */
html body.sx-motion-page[data-motion-enabled="false"] .sx-motion-zone .sx-loop[class]{animation-play-state:paused!important}
html body.sx-motion-page[data-motion-enabled="false"] *{transition:none!important}
html body.sx-motion-page[data-motion-enabled="false"] .sx-enter{opacity:1;translate:0 0}
html body.sx-motion-page[data-motion-enabled="false"] :is([data-si-panel],[data-goods-panel],[data-zep-panel],[data-popup-panel],.sx-community-feed li,.landing-faq details[open] p){animation:none!important}
@media(prefers-reduced-motion:reduce){
 html body.sx-motion-page .sx-motion-zone .sx-loop[class]{animation:none!important;translate:0 0;rotate:0deg;scale:1}
 html body.sx-motion-page .sx-code-stream code,html body.sx-motion-page .st-package>b{clip-path:none}
 html body.sx-motion-page *{transition:none!important;scroll-behavior:auto!important}
 .sx-awaiting{opacity:1;translate:0 0}.sx-motion-page .sx-pointer-surface{--sx-dx:0px;--sx-dy:0px}
}