/* Default content is fully visible. Temporary guides belong to actual component bounds. */
.motion-build-pending { opacity: 0 !important; }
.motion-build-guide {
    position: absolute;
    z-index: 8;
    overflow: visible;
    pointer-events: none;
    color: #68776c;
}
.motion-build-guide rect {
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
    stroke-dasharray: 2 5;
    stroke-linecap: round;
}
.motion-reflow-copy {
    z-index: 9;
    pointer-events: none !important;
}
.site-motion-toggle {
    position: fixed;
    z-index: 40;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    padding: .62rem .82rem;
    border: 1px solid #b7beb4;
    border-radius: var(--radius-pill, 100px);
    background: #faf7f2;
    color: #344039;
    font: 600 .75rem/1 var(--font-body, 'Inter', sans-serif);
    cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease;
}
.site-motion-toggle:hover { background: #edf0e6; color: #202824; }
.site-motion-toggle:focus-visible { outline: 2px solid var(--accent, #a84c4c); outline-offset: 4px; }
.motion-dialog { transition: none; }
.motion-dialog[hidden] { display: none; }
.mobile-nav.motion-menu { transition: none; }

/* A consistent small acknowledgment for links with an existing arrow. */
:is(.text-link, .work-link, .blog-read-more, .case-study-link, .article-back, .back-link) {
    text-underline-offset: .22em;
    text-decoration-thickness: 1px;
}
:is(.text-link, .work-link, .blog-read-more, .case-study-link, .article-back, .back-link):is(:hover, :focus-visible) {
    text-decoration-line: underline;
}
:is(.text-link, .work-link, .blog-read-more, .case-study-link, .article-back, .back-link) :is(svg, .arrow) {
    transition: translate 180ms var(--ease-out, ease-out);
}
:is(.text-link, .work-link, .blog-read-more, .case-study-link, .article-back, .back-link):is(:hover, :focus-visible) :is(svg, .arrow) {
    translate: 3px 0;
}
.portfolio-home .work-link:is(:hover, :focus-visible) i,
.portfolio-home .principle-row:is(:hover, :focus-visible) .principle-link i { transform: translateX(3px); }
.blog-card-arrow i { display: inline-block; transition: translate 180ms var(--ease-out, ease-out); }
.blog-card:is(:hover, :focus-visible) .blog-card-arrow { gap: .375rem; text-decoration: underline; text-underline-offset: .22em; }
.blog-card:is(:hover, :focus-visible) .blog-card-arrow i { translate: 3px 0; }
:is(.post-back-link, .invoicer-back-link, .zebra-back-link, .veranex-back-link) i { transition: translate 180ms var(--ease-out, ease-out); }
:is(.post-back-link, .invoicer-back-link, .zebra-back-link, .veranex-back-link):is(:hover, :focus-visible) i { translate: -3px 0; }

@view-transition { navigation: auto; }
@supports (view-transition-name: portfolio-main) {
    ::view-transition { pointer-events: none; }
    main { view-transition-name: portfolio-main; }
    .site-header { view-transition-name: portfolio-header; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    ::view-transition-old(portfolio-header), ::view-transition-new(portfolio-header) { animation: none; }
    ::view-transition-old(portfolio-main) { animation: motion-page-out 150ms ease-out both; }
    ::view-transition-new(portfolio-main) { animation: motion-page-in 250ms cubic-bezier(.16, 1, .3, 1) both; }
    html:is(.motion-paused, .motion-reduced)::view-transition-group(*) { animation-duration: 0s; }
    html:is(.motion-paused, .motion-reduced)::view-transition-old(*),
    html:is(.motion-paused, .motion-reduced)::view-transition-new(*) { animation: none; }
}
html[data-motion-direction="back"] { --motion-route-enter: -8px; --motion-route-exit: 8px; }
@keyframes motion-page-out { to { opacity: 0; translate: var(--motion-route-exit, -8px) 0; } }
@keyframes motion-page-in { from { opacity: 0; translate: var(--motion-route-enter, 8px) 0; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
    .motion-build-guide { display: none; }
    :is(.text-link, .work-link, .blog-read-more, .case-study-link, .article-back, .back-link) :is(svg, .arrow) { transition: none; translate: none !important; }
    .portfolio-home .work-link i, .portfolio-home .principle-row .principle-link i,
    .blog-card-arrow i, :is(.post-back-link, .invoicer-back-link, .zebra-back-link, .veranex-back-link) i { transition: none !important; transform: none !important; translate: none !important; }
}
body.motion-paused :is(.text-link, .work-link, .blog-read-more, .case-study-link, .article-back, .back-link) :is(svg, .arrow) { transition: none; translate: none; }
body.motion-paused .work-link i, body.motion-paused .principle-row .principle-link i,
body.motion-paused .blog-card-arrow i, body.motion-paused :is(.post-back-link, .invoicer-back-link, .zebra-back-link, .veranex-back-link) i { transition: none !important; transform: none !important; translate: none !important; }