/* Motion supports the layout; scrolling and content always remain native. */
body{overflow-x:clip}
.hero-line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.hero-line-inner{display:block}
.work-media{overflow:hidden}
.project-image{transform-origin:50% 50%}
.section-rule{transform-origin:left center}

@media(prefers-reduced-motion:no-preference){
  .project-image{transition:transform .9s cubic-bezier(.16,1,.3,1)}
  .social-card{transition:translate .6s cubic-bezier(.16,1,.3,1),box-shadow .6s}
  .service-icon{transition:transform .4s cubic-bezier(.16,1,.3,1)}
  .client{transition:background .3s}
  .copy-email{transition:background .25s,color .25s,transform .25s}
  .copy-email:active{transform:scale(.98)}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .work-media:hover .project-image{transform:scale(1.025)}
  .social-card:hover{translate:0 -7px;box-shadow:0 20px 38px #0002}
  .service:hover .service-icon{transform:translateY(-3px)}
  .client:hover{background:#eeeee9}
}
@media(prefers-reduced-motion:reduce){
  .hero-line-inner,.project-image,.social-card,.service-icon{animation:none!important;transition:none!important}
  .social-card{translate:none!important}
}