/* This control occupies the existing gap in the footer. */
.motion-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; gap: 7px; min-width: 24px; min-height: 24px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; line-height: 1.4; cursor: pointer; }
.motion-toggle[hidden] { display: none; }
.motion-toggle-icon { width: 16px; height: 16px; flex: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.motion-toggle:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 4px; }
.motion-toggle:disabled { cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .motion-toggle:not(:disabled):hover { color: var(--paper); }
}
@media (max-width: 480px) {
  .motion-toggle-label { display: none; }
}

/* Pausing must never leave entrance animations hiding readable content. */
html.user-motion-paused *, html.user-motion-paused *::before, html.user-motion-paused *::after { animation-play-state: paused !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
html.user-motion-paused .reveal, html.user-motion-paused .title-letter, html.user-motion-paused .motion-word, html.user-motion-paused .site-header, html.user-motion-paused .site-footer > span { animation: none !important; opacity: 1 !important; translate: none !important; rotate: none !important; clip-path: none !important; }
html.user-motion-paused .project-scroll-scene { transform: none !important; clip-path: none !important; }
html.user-motion-paused .motion-magnetic { translate: none !important; }