/* A small, shared motion vocabulary. Transform and opacity carry the movement. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
.button{position:relative;transition:background .24s,border-color .24s,transform .3s var(--motion-ease),box-shadow .3s var(--motion-ease)}
.button:active{transform:translateY(1px) scale(.985)}
.text-link{background:linear-gradient(var(--purple-dark),var(--purple-dark)) left bottom/0 1px no-repeat;transition:background-size .36s var(--motion-ease),color .25s,border-color .25s}
.text-link:hover{background-size:100% 1px}
.work-row{transition:padding .38s var(--motion-ease),background .3s}
.work-row .plus{display:inline-block;transition:transform .4s var(--motion-ease),color .3s}
.work-row:hover .plus{transform:translate(3px,-3px);color:var(--purple)}
.article-card h2{transition:color .25s}
.filterbar button,.process-nav button,.system-strip button{transition:background .28s,color .28s,border-color .28s}
.form-progress span{transition:background .35s}
.field input,.field select,.field textarea{transition:border-color .25s,box-shadow .25s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--purple);box-shadow:0 0 0 3px #7628f410}
.system-strip{position:relative}
.system-strip button:last-of-type{border-right:0}
.system-strip.has-motion-marker button[aria-pressed=true]:before{display:none}
.loop-marker{position:absolute;left:0;top:0;height:3px;pointer-events:none;background:var(--purple);transition:transform .5s var(--motion-ease),width .5s var(--motion-ease)}
.point{transition:background .4s,transform .45s var(--motion-ease),opacity .4s,box-shadow .4s}
.pcpl output,.calculation-results output{display:inline-block;font-variant-numeric:tabular-nums}
.calculation-results .result-main output{display:block}
@media(hover:hover) and (pointer:fine){
 .button:hover{box-shadow:0 5px 0 #210d3510}
 .button.light:hover{box-shadow:0 4px 0 #7628f40b}
 .brand-symbol{transition:transform .45s var(--motion-ease)}
 .brand:hover .brand-symbol{transform:translateX(2px) rotate(-5deg)}
 .system-strip button:hover{background:#f0eafa80}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation:none!important;transition:none!important}
 .button:hover,.button:active,.work-row:hover .plus,.brand:hover .brand-symbol{transform:none}
 .work-row:hover{padding-left:0}
}