/* Motion changes paint/compositing only; dimensions and document flow stay fixed. */
:root{--motion-ease:cubic-bezier(.22,.61,.36,1)}
.timeline{position:relative;--line-progress:1}
.timeline:before{content:'';position:absolute;left:-1px;top:0;bottom:0;width:1px;background:var(--color-accent);transform:scaleY(var(--line-progress));transform-origin:top;pointer-events:none}
.process-grid{--line-progress:1}
.step-number{position:relative}
.step-number:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--color-accent);transform:scaleX(var(--line-progress));transform-origin:left;pointer-events:none}
/* Each process segment fills in sequence across the existing grid. */
.process-grid article:nth-child(1){--step-progress:clamp(0,calc(var(--line-progress)*4),1)}
.process-grid article:nth-child(2){--step-progress:clamp(0,calc(var(--line-progress)*4 - 1),1)}
.process-grid article:nth-child(3){--step-progress:clamp(0,calc(var(--line-progress)*4 - 2),1)}
.process-grid article:nth-child(4){--step-progress:clamp(0,calc(var(--line-progress)*4 - 3),1)}
.process-grid .step-number:after{transform:scaleX(var(--step-progress,1))}
.button,.project-card,.service-card,.price-card,.blog-card,.hero-window-footer a,.text-link,.live-link{transition:background-color 150ms ease,border-color 150ms ease,color 150ms ease,translate 150ms var(--motion-ease)}
:is(.project-card,.service-card,.price-card,.blog-card):focus-within{border-color:var(--color-accent)}
.button:focus-visible,.hero-window-footer a:focus-visible{border-color:var(--color-accent)}
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-group(root){animation-duration:120ms}
  ::view-transition-old(root){animation:page-out 120ms ease both}
  ::view-transition-new(root){animation:page-in 120ms ease both}
  @keyframes page-out{to{opacity:0}}
  @keyframes page-in{from{opacity:0}to{opacity:1}}
  .headline-ready{animation:motion-reveal 360ms var(--motion-ease) backwards}
  .reveal-ready{animation:motion-reveal 320ms var(--motion-ease) backwards}
  @keyframes motion-reveal{from{opacity:.85;transform:translateY(8px)}to{opacity:1;transform:none}}
  .reveal-ready:focus-within,.headline-ready:focus-within{animation:none}
  @media(min-width:900px) and (hover:hover) and (pointer:fine){
    .parallax-surface{transform:translate3d(var(--parallax-x,0px),var(--parallax-y,0px),0);transition:transform 150ms var(--motion-ease)}
    .hero-visual:focus-within .parallax-surface,.project-image-link:focus-within .parallax-surface{transform:none}
    :is(.project-card,.service-card,.price-card,.blog-card):hover{border-color:#80659f;translate:0 -2px}
    .button:hover{translate:0 -1px}
    .button:active{translate:0 0}
    .text-link:hover{translate:2px 0}
  }
  @media(max-width:899px){
    .headline-ready,.reveal-ready{animation-duration:250ms}
    @keyframes motion-reveal{from{opacity:.92;transform:translateY(4px)}to{opacity:1;transform:none}}
  }
}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .timeline,.process-grid{--line-progress:1!important}
  .parallax-surface,.project-image-link img{transform:none!important}
}
@media print{
  @view-transition{navigation:none}
  *,*:before,*:after{animation:none!important;transition:none!important;transform:none!important;translate:none!important;opacity:1!important}
  .timeline,.process-grid{--line-progress:1!important}
}