/* Motion is additive. Core content and navigation never depend on it. */
.motion-toggle{display:inline-flex;align-items:center;gap:12px;border:0;padding:6px 0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;line-height:inherit;white-space:nowrap;cursor:pointer;transition:color .25s}
.motion-toggle[hidden]{display:none}.motion-toggle:hover{color:var(--accent)}.motion-toggle span{color:var(--accent);font-size:12px}.footer-bottom .motion-toggle{padding:0;margin-left:auto;margin-right:20px}
.curve-fallback{position:absolute;inset:15%;width:70%;height:70%;object-fit:contain}
.system-panel,.brand-card,.config-panel,.plan-panel{transition:border-color .4s,box-shadow .5s}
.system-panel,.product-window,.brand-card{position:relative;isolation:isolate}
.system-panel:after,.product-window:after,.brand-card:after{content:'';pointer-events:none;position:absolute;inset:-1px;border:1px solid var(--accent);opacity:0;clip-path:polygon(0 0,0 0,0 100%,0 100%)}
.motion-arrived.system-panel:after,.motion-arrived.product-window:after,.motion-arrived.brand-card:after{animation:container-trace 1.7s .1s ease-out both}
.diagram-connector{position:relative;overflow:hidden}.diagram-connector:after{content:'';position:absolute;inset:0;background:var(--accent);transform:translateY(-110%);animation:signal-travel 3.6s 1s ease-in-out infinite;animation-play-state:paused}
.motion-in-view .diagram-connector:after{animation-play-state:running}
.diagram-branches>span:before{transform-origin:top}.motion-in-view .diagram-branches>span:before{animation:branch-arrive 1.1s ease-out both}.motion-in-view .diagram-branches>span:nth-child(2):before{animation-delay:.12s}.motion-in-view .diagram-branches>span:nth-child(3):before{animation-delay:.24s}
.workspace-path i{position:relative;overflow:hidden}.workspace-path i:after{content:'';position:absolute;inset:0;background:var(--accent);transform:translateX(-110%);animation:route-travel 4.8s ease-in-out infinite;animation-play-state:paused}.workspace-path i:nth-of-type(2):after{animation-delay:.4s}.motion-in-view .workspace-path i:after{animation-play-state:running}
.roadmap-grid article.current:before{transform-origin:left}.roadmap-grid.motion-in-view article.current:before{animation:rule-draw 1.3s cubic-bezier(.22,.8,.15,1) both}
.principle-strip .mini-symbol{display:inline-block;transition:transform .6s cubic-bezier(.2,.7,.15,1),color .3s}.principle-strip>div:hover .mini-symbol{transform:rotate(-12deg) translateY(-2px);color:var(--accent)}
.text-link span,.button span,.header-cta span{display:inline-block;transition:transform .3s}.text-link:hover span,.button:hover span,.header-cta:hover span{transform:translate(3px,-3px)}
@media(hover:hover) and (pointer:fine){.system-panel:hover,.brand-card:hover,.config-panel:hover,.plan-panel:hover{border-color:#ed543879;box-shadow:0 12px 40px #00000012}.brand-card:hover:after{animation:container-trace 1.5s ease-out both}}
@keyframes container-trace{0%{opacity:0;clip-path:polygon(0 0,0 0,0 100%,0 100%)}20%{opacity:.65}75%{opacity:.55;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}100%{opacity:0;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}
@keyframes signal-travel{0%,45%{transform:translateY(-110%);opacity:0}50%{opacity:1}78%{transform:translateY(110%);opacity:1}100%{transform:translateY(110%);opacity:0}}
@keyframes route-travel{0%,30%{transform:translateX(-110%);opacity:0}40%{opacity:.85}75%,100%{transform:translateX(110%);opacity:0}}
@keyframes branch-arrive{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes rule-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.motion-paused .motion-container,.motion-paused .motion-container *,.motion-paused .motion-container:after,.motion-paused .motion-container :before,.motion-paused .motion-container :after,.motion-paused .roadmap-grid article:before{animation:none!important;transition:none!important}
.motion-hidden-tab *,.motion-hidden-tab :before,.motion-hidden-tab :after{animation-play-state:paused!important}
@media(max-width:640px){.hero-bottom .motion-toggle{display:inline-flex}.hero-bottom>span:first-child{max-width:100px;font-size:7px}.hero-bottom{gap:10px}.hero-bottom .motion-toggle{font-size:8px;gap:5px}.hero-bottom .motion-toggle[hidden]{display:none}.footer-bottom .motion-toggle{margin:0 0 0 auto}.footer-bottom>a{margin-left:0}}
@media(prefers-reduced-motion:reduce){.motion-container,.motion-container *,.motion-container:after,.motion-container :before,.motion-container :after{animation:none!important;transition:none!important}.text-link:hover span,.button:hover span,.header-cta:hover span,.principle-strip>div:hover .mini-symbol{transform:none}.motion-toggle{display:none!important}}