/* One timing and easing for hero, case-study, navigation, and footer arrows. */
:root{--arrow-duration:500ms;--arrow-easing:cubic-bezier(.2,.7,.3,1)}
.reference-button .button-arrow svg,.reference-button .button-text>span{transition:transform var(--arrow-duration) var(--arrow-easing)}
.site-arrow .motion-arrow{display:inline-block;position:relative;overflow:hidden;flex-shrink:0;vertical-align:middle;box-sizing:border-box}
.site-arrow .motion-arrow>.motion-arrow-glyph{display:block;position:absolute;left:var(--arrow-inset,0px);top:var(--arrow-inset,0px);width:calc(100% - var(--arrow-inset,0px) - var(--arrow-inset,0px))!important;height:calc(100% - var(--arrow-inset,0px) - var(--arrow-inset,0px))!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:none!important;transform:translate(0,0)!important;transition:transform var(--arrow-duration) var(--arrow-easing)!important}
.site-arrow .motion-arrow>.motion-arrow-glyph+svg{transform:translate(var(--arrow-entry-x),var(--arrow-entry-y))!important}
.site-arrow:is(:hover,:focus-visible) .motion-arrow>.motion-arrow-glyph:first-child{transform:translate(var(--arrow-exit-x),var(--arrow-exit-y))!important}
.site-arrow:is(:hover,:focus-visible) .motion-arrow>.motion-arrow-glyph+svg{transform:translate(0,0)!important}
/* The case-study arrow badge stays in its original box; only its glyph moves. */
.work .selected-projects .project-caption .case-study-button:is(:hover,:focus-visible) .motion-arrow{transform:none}
html[data-motion-paused] .site-arrow .motion-arrow>.motion-arrow-glyph:first-child{transform:none!important;transition:none!important}
html[data-motion-paused] .site-arrow .motion-arrow>.motion-arrow-glyph+svg{display:none!important}
html[data-motion-paused] .reference-button .button-arrow svg:first-child{transform:none!important}
html[data-motion-paused] .reference-button .button-arrow svg+svg{display:none!important}
html[data-motion-paused] .reference-button .button-text>span{transform:none!important}
html[data-motion-paused] .reference-button .button-text>span+span{display:none!important}
@media(prefers-reduced-motion:reduce){.site-arrow .motion-arrow>.motion-arrow-glyph:first-child{transform:none!important;transition:none!important}.site-arrow .motion-arrow>.motion-arrow-glyph+svg{display:none!important}.reference-button .button-arrow svg,.reference-button .button-text>span{transition:none!important}}
.site-arrow .motion-arrow{margin:0!important}
@media(prefers-reduced-motion:reduce){.site-arrow:is(:hover,:focus-visible) .motion-arrow>.motion-arrow-glyph:first-child{transform:none!important;transition:none!important}}

/* Explicit responsive boxes prevent hidden-menu SVGs inheriting a 300px default. */
.site-arrow .motion-arrow{width:1em;height:1em;max-width:34px;max-height:34px;flex:0 0 auto}
.navigation .nav-contact .motion-arrow,.case-back .motion-arrow,.resume-link .motion-arrow{width:16px;height:16px}
#mobile-menu .motion-arrow{width:18px;height:18px}
.case-next .motion-arrow{width:18px;height:18px}
.footer-email .motion-arrow{width:23px;height:23px}
.project-open>span .motion-arrow{width:17px;height:17px}
.hero-feature-arrow .motion-arrow{width:15px;height:15px}
.work .selected-projects .project-caption .case-study-button .motion-arrow{width:34px;height:34px;--arrow-inset:8px}
@media(max-width:760px){.hero-project .hero-feature-arrow .motion-arrow{width:13px;height:13px}}