/* Scroll presentation enhances the saved Professional site without hiding content by default. */
.focus-scene{position:relative}
.focus-description{max-width:550px;margin:0 auto;color:var(--muted);font-size:18px;line-height:1.7;text-wrap:pretty}
.scroll-motion-ready .hero-copy{transform:translate3d(0,var(--hero-copy-y,0px),0)}
.scroll-motion-ready .portrait-frame img{transform:scale(var(--portrait-zoom,1));transform-origin:50% 42%}
.scroll-motion-ready .portrait-orbit{translate:0 var(--orbit-shift,0px)}
.scroll-motion-ready .focus-word{color:var(--ink);opacity:calc(.5 + var(--word-emphasis,1)*.5);transition:opacity .15s linear}
.scroll-motion-ready .section-heading{position:relative}
.scroll-motion-ready .section-heading:after{content:"";position:absolute;left:0;right:0;bottom:-20px;height:1px;background:var(--line);transform:scaleX(var(--section-reveal,1));transform-origin:left}
.scroll-motion-ready .project-art :is(.banking-project-illustration,.api-rings,.aml-art>svg,.cheque-paper){translate:0 var(--art-drift,0px);scale:var(--art-zoom,1)}
.scroll-motion-ready .contact-section h2{transform:translate3d(0,var(--contact-lift,0px),0)}
/* One entrance per block, with a restrained offset between neighbouring cards. */
.scroll-motion-ready.motion-ready .reveal{transform:translate3d(0,36px,0);transition:opacity .95s var(--ease) var(--reveal-delay,0ms),transform .95s var(--ease) var(--reveal-delay,0ms),box-shadow .4s var(--ease)}
.scroll-motion-ready.motion-ready .reveal.visible,.scroll-motion-ready.motion-ready .reveal:focus-within{opacity:1;transform:none}
@media(hover:hover){.scroll-motion-ready.motion-ready .project-card.reveal.visible:hover{transform:translateY(-7px)}}
@media(prefers-reduced-motion:no-preference){
 body.scroll-motion-ready:not(.reduce-motion) .hero-copy>:is(.eyebrow,h1,.hero-intro,#hero-link){animation:hero-arrive .9s var(--ease) both}
 body.scroll-motion-ready:not(.reduce-motion) .hero-copy h1{animation-delay:90ms}
 body.scroll-motion-ready:not(.reduce-motion) .hero-copy .hero-intro{animation-delay:180ms}
 body.scroll-motion-ready:not(.reduce-motion) .hero-copy #hero-link{animation-delay:270ms}
}
@keyframes hero-arrive{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
/* A short desktop hold gives the technical story time to unfold as it gains emphasis. */
@media(min-width:1001px) and (min-height:750px){
 body.scroll-motion-ready:not(.reduce-motion) .statement{min-height:118svh;padding-top:120px;padding-bottom:120px}
 body.scroll-motion-ready:not(.reduce-motion) .focus-scene{position:sticky;top:max(120px,calc(50svh - 175px))}
}
@media(max-width:700px){
 .focus-description{font-size:16px}
 .scroll-motion-ready.motion-ready .reveal{transform:translate3d(0,20px,0);transition-duration:.75s,.75s,.3s;transition-delay:0ms}
 .scroll-motion-ready.motion-ready .reveal.visible,.scroll-motion-ready.motion-ready .reveal:focus-within{transform:none}
 .scroll-motion-ready .section-heading:after{bottom:-15px}
}
/* Native and site-wide reduced motion both leave a complete static reading experience. */
body.reduce-motion :is(.hero-copy,.portrait-frame img,.contact-section h2){transform:none!important}
body.reduce-motion .portrait-orbit,body.reduce-motion .project-art :is(.banking-project-illustration,.api-rings,.aml-art>svg,.cheque-paper){translate:none!important;scale:none!important}
body.reduce-motion .focus-word{opacity:1;transition:none}
body.reduce-motion .section-heading:after{transform:none}
body.reduce-motion.motion-ready .reveal{opacity:1;transform:none;transition:none}
@media(prefers-reduced-motion:reduce){
 .scroll-motion-ready :is(.hero-copy,.portrait-frame img,.contact-section h2){transform:none!important;animation:none!important}
 .scroll-motion-ready .portrait-orbit,.scroll-motion-ready .project-art :is(.banking-project-illustration,.api-rings,.aml-art>svg,.cheque-paper){translate:none!important;scale:none!important}
 .scroll-motion-ready .focus-word{opacity:1;transition:none}
 .scroll-motion-ready .section-heading:after{transform:none}
 .scroll-motion-ready.motion-ready .reveal{opacity:1;transform:none;transition:none}
 body.scroll-motion-ready .statement{min-height:0!important}
 body.scroll-motion-ready .focus-scene{position:relative!important;top:auto!important}
}