/* Site motion: entrances on every page, plus scroll-linked morphs and parallax on the home page. Driven by assets/js/motion.js. */
.motion-ribbon{overflow:hidden;padding:0 0 110px;font-family:var(--display);font-size:clamp(3.2rem,9vw,9.5rem);line-height:1.02;letter-spacing:-.055em;user-select:none}
.ribbon-row{display:flex;width:max-content;white-space:nowrap}
.ribbon-row span{display:inline-flex;align-items:center}
.ribbon-row span:after{content:'+';color:var(--red);font-size:.45em;margin:0 .7em;letter-spacing:0}
.ribbon-outline{color:transparent;-webkit-text-stroke:1px #97a19c}
.ribbon-outline span:after{-webkit-text-stroke:0;color:#ee8b77}
.split-text .split-wrap,.split-text .word,.split-text .word-inner{color:inherit}
.split-text .word,.split-text .word-inner{display:inline-block}
.scroll-progress{display:none}

@media screen and (prefers-reduced-motion:no-preference){
.scroll-progress{display:block;position:fixed;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--red),var(--red-light));transform-origin:0 50%;scale:var(--page,0) 1;z-index:100;pointer-events:none}

/* One-shot entrances. */
.motion .reveal{opacity:0;translate:0 36px;filter:blur(8px);transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms),translate 1.1s cubic-bezier(.16,1,.3,1) var(--d,0ms),filter .9s ease var(--d,0ms),color .2s,border-color .2s}
.motion .reveal.is-in{opacity:1;translate:0 0;filter:none}
.motion .eyebrow.reveal:before{display:inline-block;rotate:-180deg;scale:.2;transition:rotate 1.2s cubic-bezier(.16,1,.3,1) calc(var(--d,0ms) + 150ms),scale 1.2s cubic-bezier(.16,1,.3,1) calc(var(--d,0ms) + 150ms)}
.motion .eyebrow.reveal.is-in:before{rotate:0deg;scale:1}
.motion .split-rise .word{clip-path:inset(-.25em -.3em -.22em -.3em)}
.motion .split-rise .word-inner{translate:0 125%;rotate:5deg;transform-origin:0 100%;transition:translate 1.2s cubic-bezier(.16,1,.3,1),rotate 1.2s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--d,0ms) + var(--i,0) * 55ms)}
.motion .split-rise.is-in .word-inner{translate:0 0;rotate:0deg}
.motion .split-scrub .word{opacity:clamp(.14,calc((var(--enter,1) * (var(--n,1) + 3) - var(--i,0)) / 3),1)}

/* Home hero: the artwork settles on load, then the hero folds into a rounded card as it scrolls away. */
.motion .hero{--fold:min(1,calc(var(--exit,0) * 1.8));clip-path:inset(0 calc(var(--fold) * 2.5vw) 0 round 0 0 calc(var(--fold) * 48px) calc(var(--fold) * 48px))}
.motion .hero:before{content:'';position:absolute;inset:0;background:#05090c;opacity:calc(var(--exit,0) * .75);z-index:-1;pointer-events:none}
.motion .hero-art{scale:1.14;transform:translateY(calc(var(--exit,0) * 28%)) scale(calc(1 + var(--exit,0) * .12));transition:scale 2.4s cubic-bezier(.16,1,.3,1)}
.motion .hero.is-in .hero-art{scale:1}
.motion .hero-copy{translate:0 calc(var(--exit,0) * -22vh);opacity:calc(1 - var(--exit,0) * 1.7)}
.motion .scroll-link .arrow{animation:motion-nudge 1.8s ease-in-out infinite}
@keyframes motion-nudge{0%,100%{translate:0 0}50%{translate:0 6px}}

/* Connected systems artwork: the signal draws itself and each system lights up as the line reaches it. */
.motion .home-systems-art{--draw:calc(var(--enter,1) * 1.2)}
.motion .hs-signal{stroke-dasharray:1 1;stroke-dashoffset:max(0,calc(1 - var(--draw)))}
.motion .hs-node,.motion .hs-dot{--k:clamp(0,calc((var(--draw) - var(--t)) * 6),1);opacity:var(--k);transform-box:fill-box}
.motion .hs-node{transform-origin:50% 100%;transform:translateY(calc((1 - var(--k)) * 18px)) scale(calc(.88 + var(--k) * .12))}
.motion .hs-dot{transform-origin:50% 50%;transform:scale(var(--k))}
.motion .hs-lines{stroke-dasharray:1 1;stroke-dashoffset:calc(1 - clamp(0,calc((var(--draw) - var(--t) - .06) * 5),1))}

/* Home service rows: the divider draws across while each column slides in at its own pace. */
.motion #what-we-do .service-row{position:relative;border-bottom-color:transparent}
.motion #what-we-do .service-row:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--line);transform-origin:0 50%;scale:var(--enter,1) 1}
.motion #what-we-do .service-row>*{opacity:clamp(0,calc(var(--enter,1) * 1.6 - .25 - var(--c,0) * .08),1);translate:calc((1 - var(--enter,1)) * (40px + var(--c,0) * 26px)) 0}
.motion #what-we-do .service-row>:nth-child(2){--c:1}
.motion #what-we-do .service-row>:nth-child(3){--c:2}
.motion #what-we-do .service-row>:nth-child(4){--c:3}
.motion #what-we-do .service-row>:nth-child(5){--c:4}

/* Type ribbon: two rows travel in opposite directions with the scroll. */
.motion .ribbon-row{translate:calc(var(--progress,.5) * -18%) 0;will-change:translate}
.motion .ribbon-outline{translate:calc(-24% + var(--progress,.5) * 18%) 0}

/* POSibility: the product stage swings up from a tilted screen and flattens into place. */
.motion .product-stage{transform:perspective(1400px) rotateX(calc((1 - var(--enter,1)) * 22deg)) rotateY(calc((1 - var(--enter,1)) * 9deg)) scale(calc(.88 + var(--enter,1) * .12));transform-origin:50% 90%}
.motion .product-stage img{translate:0 calc((1 - var(--enter,1)) * 48px)}
.motion .product-caption,.motion .stage-label{opacity:clamp(0,calc(var(--enter,1) * 2 - 1),1)}

/* Industries: the dark section grows from an inset card to full width, then folds back as it leaves. */
.motion .dark-section{--morph:max(calc(1 - var(--enter,1)),var(--leave,0));clip-path:inset(0 calc(var(--morph) * 3.5vw) round calc(var(--morph) * 44px))}
.motion .industry-panel>img{clip-path:inset(calc((1 - var(--enter,1)) * 14%) calc((1 - var(--enter,1)) * 22%) round calc((1 - var(--enter,1)) * 200px + 2px));scale:calc(1.12 - var(--enter,1) * .12)}

/* Client stories: images drift inside their frames; on the home page the middle card travels at its own speed. */
.motion .case-card figure img{scale:1.16;translate:0 calc((var(--progress,.5) - .5) * -12%)}
.motion .section .case-card:nth-child(2){transform:translateY(calc((.5 - var(--progress,.5)) * 90px))}

/* Footer invitation: the round link spins into its resting direction. */
.motion .footer-cta .round-link{rotate:calc((1 - var(--enter,1)) * -135deg);scale:calc(.7 + var(--enter,1) * .3)}

/* Inner pages: light touches only. */
.motion .support-hero-art{scale:1.1;transition:scale 2.4s cubic-bezier(.16,1,.3,1)}
.motion .support-hero.is-in .support-hero-art{scale:1}
.motion .tech-list .reveal{translate:0 18px;filter:none}
.motion .contact-art.reveal{opacity:1;translate:none;filter:none;clip-path:inset(8% 10% round 48px);transition:clip-path 1.4s cubic-bezier(.16,1,.3,1) var(--d,0ms)}
.motion .contact-art.reveal.is-in{clip-path:inset(0 round 2px)}
.motion .contact-art img{scale:1.12;transition:scale 2s cubic-bezier(.16,1,.3,1)}
.motion .contact-art.is-in img{scale:1}
}

@media screen and (prefers-reduced-motion:no-preference) and (max-width:540px){
.motion .section .case-card:nth-child(2){transform:none}
.motion .hero{clip-path:inset(0 calc(var(--fold) * 3vw) 0 round 0 0 calc(var(--fold) * 28px) calc(var(--fold) * 28px))}
.motion .product-stage{transform:perspective(900px) rotateX(calc((1 - var(--enter,1)) * 16deg)) scale(calc(.92 + var(--enter,1) * .08))}
}

@media(max-width:540px){.motion-ribbon{padding-bottom:68px}
}