/* Fixed masks and media planes; animated values are transform and opacity only. */
html.motion-engine { scroll-behavior: auto; }
.motion-engine *, .motion-engine *::before, .motion-engine *::after { transition-property: transform, opacity, translate, rotate, scale !important; }
.js.motion-engine [data-reveal].motion-managed.reveal { opacity: 1 !important; translate: none; clip-path: none !important; animation: none !important; transition: none !important; }
.motion-engine .motion-heading .motion-word { display: inline-block; opacity: 1; animation: none !important; transition: none !important; }
.js.motion-engine [data-motion-owner] .motion-heading .motion-word { opacity: 1 !important; transform: none; }
.motion-word-mask { display: inline-block; overflow: hidden; vertical-align: top; padding: .13em .06em; margin: -.13em -.06em; }
.hero-glyph, .hero-glyph-mask, .display-glyph, .display-glyph-mask { display: inline-block; position: relative; }
.display-glyph-mask { padding: .13em .06em; margin: -.13em -.06em; vertical-align: top; }
.hero-copy-line-mask { display: block; padding-block: .06em; margin-block: -.06em; }
.motion-engine .archive-title-lead, .motion-engine .archive-title-main { animation: none !important; }
.motion-engine .connection-signal, .motion-engine .hero-route-signal, .motion-engine .hero-route-head { animation: none !important; }
.motion-engine .connection-signal, .motion-engine .connection-emphasis { opacity: 0 !important; }
.motion-engine .connection-head { transition: none !important; }
.motion-engine .project-scroll-scene { transform: none; clip-path: none !important; }
.motion-engine .project-cover { scale: 1 !important; transition-property: opacity; }
.motion-media-plane { position: absolute; inset: 0; transform-origin: center; pointer-events: none; }
.motion-media-plane .project-cover, .motion-media-plane .project-hover-video { width: 100%; height: 100%; }
.motion-engine .project-card:hover .motion-word, .motion-engine .project-card:focus-within .motion-word { animation: none !important; }
.motion-engine .site-header, .motion-engine .site-header.is-scrolled { height: var(--header-height); padding-inline: var(--page-gutter); background: transparent; border: 0; pointer-events: none; transition: none; animation: none; }
.motion-engine .site-header::before { content: ''; position: absolute; z-index: -1; inset: 0; background: var(--ink); border-bottom: 1px solid var(--line); transform-origin: top; transform: scaleY(1); transition: transform .55s var(--ease); }
.motion-engine .site-header.is-scrolled::before { transform: scaleY(.7111); }
.motion-engine .site-header > * { pointer-events: auto; }
.motion-engine .wordmark-mark, .motion-engine .is-scrolled .wordmark-mark { width: 46px; height: 46px; animation: none; transition: none; }
.motion-engine .wordmark-name, .motion-engine .is-scrolled .wordmark-name { font-size: 19px; transition: none; }
.motion-engine .header-top, .motion-engine .header-top.is-visible { width: 42px; margin-left: 0; visibility: visible; border-color: var(--line); transition: opacity .35s, transform .35s var(--ease); }
.motion-engine .header-top:not(.is-visible) { opacity: 0; transform: scale(.65); pointer-events: none; }
.motion-engine .header-top.is-visible { opacity: 1; transform: scale(1); }
@media (max-width: 760px) {
  .motion-engine .wordmark-mark, .motion-engine .is-scrolled .wordmark-mark { width: 38px; height: 38px; }
  .motion-engine .wordmark-name, .motion-engine .is-scrolled .wordmark-name { font-size: 17px; }
  .motion-engine .header-top, .motion-engine .header-top.is-visible { width: 32px; height: 34px; margin-left: 0; }
  .motion-engine .site-header.is-scrolled::before { transform: scaleY(.77); }
  .motion-engine .site-header.menu-open::before { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .motion-engine .site-header::before, .motion-engine .header-top { transition: none; }
}