/* Motion follows the existing composition and leaves all content visible by default. */
.motion-magnet{translate:var(--motion-x,0) var(--motion-y,0);transition:translate .35s cubic-bezier(.22,1,.36,1),background .25s,color .25s,transform .35s}
.project-filters button,.service-billing button{transition:background .25s,color .25s,border-color .25s,transform .25s}
.official-nav nav a{transition:color .25s}
.official-nav nav a i{transition:background .3s,scale .3s}
.official-nav nav a:hover i,.official-nav nav a:focus-visible i{background:currentColor;scale:.75}
.portfolio-card figure img,.panel-image > img,.service-art > img,.service-catalog-item > img{transition:transform .85s cubic-bezier(.22,1,.36,1)}
.portfolio-card-copy h3,.catalog-link,.text-link{transition:color .25s,translate .35s}
.portfolio-card figure>span{transition:opacity .3s,transform .5s cubic-bezier(.22,1,.36,1)}
.service-tags span{transition:background .3s,border-color .3s}
.menu-dialog[open]{animation:motion-menu .45s cubic-bezier(.22,1,.36,1) both}
.menu-dialog[open] .menu-layout nav a{animation:motion-menu-link .55s cubic-bezier(.22,1,.36,1) both}
.menu-dialog[open] .menu-layout nav a:nth-child(2){animation-delay:.045s}
.menu-dialog[open] .menu-layout nav a:nth-child(3){animation-delay:.09s}
.menu-dialog[open] .menu-layout nav a:nth-child(4){animation-delay:.135s}
@keyframes motion-menu{from{opacity:0;translate:0 -16px}to{opacity:1;translate:0 0}}
@keyframes motion-menu-link{from{opacity:0;translate:0 25px}to{opacity:1;translate:0 0}}
@media(hover:hover) and (pointer:fine){
 .portfolio-card a:hover figure img,.portfolio-card a:focus-visible figure img,.project-panel:hover .panel-image>img,.service-panel:hover .service-art>img{transform:scale(1.045)}
 .portfolio-card a:hover h3{color:#3578d5}
 .service-catalog-item:hover>img{transform:scale(1.025)}
 .service-catalog-item:hover .catalog-link,.text-link:hover{translate:5px 0}
 .project-filters button:hover,.service-billing button:hover{transform:translateY(-2px)}
 .service-panel:hover .service-tags span{border-color:#4994ff}
}
@media(prefers-reduced-motion:reduce){
 .motion-magnet{translate:none!important}
 .portfolio-card a:hover figure img,.portfolio-card a:focus-visible figure img,.project-panel:hover .panel-image>img,.service-panel:hover .service-art>img,.service-catalog-item:hover>img{transform:none}
 .catalog-link,.text-link{translate:none!important}
}