/* Single-page motion: machinery revealed across its working width, then functional details. */
@keyframes ss-copy-enter{from{opacity:.15;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes ss-machine-open{from{clip-path:inset(0 70% 0 0);opacity:.6}to{clip-path:inset(0);opacity:1}}
@keyframes ss-machine-settle{from{transform:scale(1.055)}to{transform:scale(1)}}
@keyframes ss-detail-enter{from{opacity:.2;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes ss-panel-enter{from{opacity:.25;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes ss-spec-enter{from{opacity:.35;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ss-feed{from{transform:translateX(-16px);opacity:.3}to{transform:none;opacity:1}}
@keyframes ss-cut-trace{from{stroke-dasharray:130;stroke-dashoffset:130}to{stroke-dasharray:130;stroke-dashoffset:0}}
@keyframes ss-crease-enter{from{opacity:0}to{opacity:1}}
.ss-page{--ss-motion-ease:cubic-bezier(.16,1,.3,1)}
.ss-page figure>a{overflow:hidden}.ss-enlarge{z-index:1}
@media(prefers-reduced-motion:no-preference){
 .ss-motion-play[data-ss-effect=hero] h1{animation:ss-copy-enter .75s var(--ss-motion-ease) both}
 .ss-motion-play[data-ss-effect=hero] .ss-hero-copy>div{animation:ss-copy-enter .75s .12s var(--ss-motion-ease) both}
 .ss-motion-play[data-ss-effect=hero] figure>a{animation:ss-machine-open 1.05s .12s var(--ss-motion-ease) both}
 .ss-motion-play[data-ss-effect=hero] figure img{animation:ss-machine-settle 1.2s var(--ss-motion-ease) both}
 .ss-motion-play[data-ss-effect=overview-image]{animation:ss-machine-open .85s var(--ss-motion-ease) both}
 .ss-motion-play[data-ss-effect=overview-copy]{animation:ss-copy-enter .65s .1s var(--ss-motion-ease) both}
 .ss-motion-play[data-ss-effect=models] .ss-tabs{animation:ss-copy-enter .6s var(--ss-motion-ease) both}
 .ss-motion-play[data-ss-effect=model-lead]{animation:ss-copy-enter .8s .12s var(--ss-motion-ease) both}
 .ss-motion-play[data-ss-effect=components] .ss-section-head{animation:ss-copy-enter .7s var(--ss-motion-ease) both}
 .ss-motion-play[data-ss-effect=component-main] figure>a{animation:ss-machine-open 1s var(--ss-motion-ease) both}
 .ss-motion-play[data-ss-effect=component-thumbnails] figure{animation:ss-detail-enter .65s .15s var(--ss-motion-ease) both}
 .ss-motion-play[data-ss-effect=component-thumbnails] figure:nth-child(2){animation-delay:.25s}
 .ss-motion-play[data-ss-effect=component-thumbnails] figure:nth-child(3){animation-delay:.35s}
 .ss-motion-play[data-ss-effect=component-thumbnails] figure:nth-child(4){animation-delay:.45s}
 .ss-motion-play[data-ss-effect=variant] .ss-variant-lead figure{animation:ss-panel-enter .42s var(--ss-motion-ease) both}
 .ss-motion-play[data-ss-effect=variant] .ss-variant-lead>div{animation:ss-copy-enter .4s .06s var(--ss-motion-ease) both}
 .ss-motion-play[data-ss-effect=variant] .ss-table-scroll{animation:ss-spec-enter .45s .1s var(--ss-motion-ease) both}
 .ss-motion-play[data-ss-effect=process] .ss-section-head{animation:ss-copy-enter .7s var(--ss-motion-ease) both}
 .ss-motion-play[data-ss-effect=process-drawing] svg>g:first-of-type{animation:ss-feed .5s var(--ss-motion-ease) both}
 .ss-motion-play[data-ss-effect=process-drawing] .ss-cuts path{animation:ss-cut-trace .65s .25s var(--ss-motion-ease) both}
 .ss-motion-play[data-ss-effect=process-drawing] .ss-scores{animation:ss-crease-enter .45s .8s linear both}
 .ss-motion-play[data-ss-effect=reasons] .ss-section-head{animation:ss-copy-enter .7s var(--ss-motion-ease) both}
 .ss-motion-play[data-ss-effect=application-card]{animation:ss-detail-enter .65s var(--ss-motion-ease) both}
 .ss-motion-play[data-ss-effect=application-card]:nth-child(2){animation-delay:.12s}
 .ss-motion-play[data-ss-effect=application-card]:nth-child(3){animation-delay:.24s}
 .ss-page figure img{transition:transform .55s var(--ss-motion-ease)}
 .ss-page figure>a:hover img{transform:scale(1.025)}
 .ss-page .button svg,.ss-tabs svg{transition:transform .25s var(--ss-motion-ease)}
 .ss-page .button:hover svg{transform:translateX(5px)}
 .ss-tabs button[aria-selected=true] svg{transform:rotate(90deg)}
}
@media(max-width:600px) and (prefers-reduced-motion:no-preference){
 .ss-motion-play[data-ss-effect=hero] figure>a{animation-duration:.8s}
 .ss-motion-play[data-ss-effect=component-thumbnails] figure{animation-delay:.08s}
 .ss-motion-play[data-ss-effect=component-thumbnails] figure:nth-child(2){animation-delay:.16s}
 .ss-motion-play[data-ss-effect=component-thumbnails] figure:nth-child(3){animation-delay:.24s}
 .ss-motion-play[data-ss-effect=component-thumbnails] figure:nth-child(4){animation-delay:.32s}
}
@media(prefers-reduced-motion:reduce){.ss-motion-play,.ss-motion-play *{animation:none!important;transition:none!important}.ss-page figure img{transform:none}.ss-tabs button[aria-selected=true]{border-bottom-color:#ec5700}}

