/* ArtCraft-inspired interaction rhythm: crisp controls, soft media settling. */
:root{--micro-fast:120ms;--micro-ease:cubic-bezier(.16,1,.3,1)}
header nav a{height:100%;display:flex;align-items:center;background:transparent!important;color:var(--muted);padding:0 6px}
header nav a .nav-label{padding:5px 6px;transition:background-color var(--micro-fast) linear,color var(--micro-fast) linear}
header nav a.active{color:var(--muted)}
header nav a.active .nav-label,header nav a:focus-visible .nav-label{background:var(--ink);color:var(--inverse)}
.button,.button.secondary,.square-link,.theme,.motion-toggle{transition:background-color 120ms linear,color 120ms linear,border-color 120ms linear,opacity 150ms linear}
.button:not(.secondary):not(.blue-button):hover{background:var(--ink);border-color:var(--ink);color:var(--inverse);opacity:.8}
.button.secondary:focus-visible,.button.secondary:hover,.theme:focus-visible,.theme:hover{background:var(--ink);color:var(--inverse);border-color:var(--ink)}
.micro-arrow{display:inline-block;transition:translate 180ms var(--micro-ease);pointer-events:none}
.square-link:hover{translate:none}
.square-link:focus-visible .micro-arrow,.button:focus-visible .micro-arrow,.nav-cta:focus-visible .micro-arrow{translate:2px -2px}
.micro-text-link{position:relative}
.micro-text-link::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;scale:0 1;transform-origin:right;transition:scale 220ms var(--micro-ease)}
.micro-text-link:focus-visible::after{scale:1 1;transform-origin:left}
.project .square-link{transition:background-color 150ms linear,color 150ms linear,border-color 150ms linear}
.project .icebreaker-media img{transition:translate 700ms var(--micro-ease),scale 700ms var(--micro-ease)}
.project .diagram{transition:scale 700ms var(--micro-ease)}
.project:focus-within .square-link{background:var(--ink);color:var(--inverse);border-color:var(--ink)}
.project:focus-within .square-link .micro-arrow{translate:2px -2px}
@media(hover:hover) and (pointer:fine){
 header nav a:hover .nav-label{background:var(--ink);color:var(--inverse)}
 .micro-text-link:hover::after{scale:1 1;transform-origin:left}
 .button:hover .micro-arrow,.square-link:hover .micro-arrow,.nav-cta:hover .micro-arrow{translate:2px -2px}
 .button:hover .micro-arrow.down{translate:0 3px}
 .project:hover .square-link{background:var(--ink);color:var(--inverse);border-color:var(--ink)}
 .project:hover .square-link .micro-arrow{translate:2px -2px}
 .project:hover .icebreaker-media img{scale:1.02}
 .project:hover .diagram{scale:1.02}
}
.button:active,.square-link:active,.nav-cta:active{opacity:.7}
.micro-intro{animation:micro-arrive 500ms var(--micro-ease) both;animation-delay:var(--intro-delay,0ms)}
@keyframes micro-arrive{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}
/* Pausing removes interaction movement as well as ambient animation. */
.motion-paused .micro-intro,.reduced-motion .micro-intro{animation:none;opacity:1;translate:none}
.motion-paused .micro-arrow,.motion-paused .button>span,.motion-paused .nav-cta span,.motion-paused .icebreaker-media img,.motion-paused .diagram,.reduced-motion .micro-arrow,.reduced-motion .icebreaker-media img,.reduced-motion .diagram{translate:none!important;scale:1!important;transition:none!important}
.motion-paused .nav-label,.motion-paused .micro-text-link::after{transition:none}
@media(prefers-reduced-motion:reduce){.micro-intro{animation:none}.micro-arrow,.button>span,.nav-cta span,.icebreaker-media img,.diagram{translate:none!important;scale:1!important}}
@media(max-width:760px){header nav a{padding:0 2px}header nav a .nav-label{padding:5px 3px}}
/* Existing arrow wrappers stay still; only the glyph moves. */
.button:hover>span:has(.micro-arrow),.nav-cta:hover>span:has(.micro-arrow){translate:none}