/* Restrained editorial motion. Mobile and reduced-motion views keep their original styles. */
@media (min-width:640px) and (prefers-reduced-motion:no-preference){
 .motion-active .motion-pending{opacity:0}
 .motion-active .motion-link{position:relative}
 .motion-active .motion-link::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .24s ease}
 .motion-active .motion-link:hover::after,.motion-active .motion-link:focus-visible::after{transform:scaleX(1)}
 .motion-active .navigation>.motion-link::after{content:none}
 .motion-active .navigation>.motion-link{text-decoration-line:underline;text-decoration-color:transparent;text-underline-offset:6px;text-decoration-thickness:1px;transition:text-decoration-color .24s ease}
 .motion-active .navigation>.motion-link:hover,.motion-active .navigation>.motion-link:focus-visible{text-decoration-color:currentColor}
 .motion-active .motion-arrow{display:inline-block;transition:transform .24s cubic-bezier(.2,.7,.2,1)}
 .motion-active .button>.motion-arrow{margin-inline-start:.4em}
 .motion-active a:hover .motion-arrow,.motion-active a:focus-visible .motion-arrow{transform:translate(3px,-3px)}
 .motion-active .architecture-node,.motion-active .client-node,.motion-active .client-line>path,.motion-active .client-junctions{transition:opacity .18s ease}
 .motion-active .motion-muted{opacity:.28}
 .motion-active .motion-node-active .architecture-label,.motion-active .motion-node-active .client-node-title{text-decoration:underline;text-decoration-color:var(--bronze);text-underline-offset:5px;text-decoration-thickness:1px}
 .motion-active .architecture-node:focus-visible,.motion-active .client-node:focus-visible{outline:1px solid var(--bronze);outline-offset:7px}
 .motion-active .motion-chain.motion-entered .architecture-node:not(:last-child)::before{transform-origin:left;animation:motion-rule .42s both;animation-delay:calc(.24s + var(--motion-order,0) * .14s)}
 .motion-active .motion-chain.motion-entered .architecture-node:not(:last-child)::after{animation:motion-opacity .2s both;animation-delay:calc(.56s + var(--motion-order,0) * .14s)}
 .motion-active .motion-transfer-point{position:absolute;display:block;width:4px;height:4px;margin-top:-2px;background:var(--bronze);pointer-events:none}
 .motion-active .portfolio-card .motion-photo{transition:scale .65s cubic-bezier(.2,.7,.2,1);scale:1}
 .motion-active .portfolio-card:focus-within .motion-photo{scale:1.025}
 .motion-active .portfolio-open-label{transition:translate .24s ease}
 .motion-active .portfolio-card:focus-within .portfolio-open-label{translate:3px -3px}
 .motion-active .project-dialog[open]{animation:motion-dialog .28s cubic-bezier(.2,.7,.2,1)}
 .motion-active .project-dialog[open]::backdrop{animation:motion-backdrop .28s ease}
 @media(hover:hover) and (pointer:fine){
  .motion-active .portfolio-card:hover .motion-photo{scale:1.025}
  .motion-active .portfolio-card:hover .portfolio-open-label{translate:3px -3px}
 }
}
@keyframes motion-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes motion-opacity{from{opacity:0}to{opacity:1}}
@keyframes motion-dialog{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes motion-backdrop{from{background-color:rgba(23,22,18,0)}to{background-color:rgba(23,22,18,.68)}}