/* The homepage animations: role marker, portrait orbits and sketch underline. */
.home-motion {
  --motion-green: #437b30;
  --motion-paper: #f5f5ed;
  --motion-orange: #ae4a27;
}
#content .home-intro .home-current-role { background: linear-gradient(transparent 57%, #dce9d3 57%) left / 0% 100% no-repeat; animation: motion-marker 1.5s .9s cubic-bezier(.4,0,.2,1) forwards; }
#content .motion-avatar { position: relative; }
.motion-portrait-orbits { position: absolute; inset: -32px; width: calc(100% + 64px); height: calc(100% + 64px); overflow: visible; pointer-events: none; color: var(--motion-green); }
.motion-portrait-orbits .motion-orbit-path { fill: none; stroke: currentColor; stroke-width: .8; stroke-dasharray: 3 8; opacity: .45; }
.motion-orbit-dot { fill: var(--motion-orange); offset-path: path('M 210 12 C 320 12 408 125 408 250 C 408 375 320 488 210 488 C 100 488 12 375 12 250 C 12 125 100 12 210 12 Z'); animation: motion-orbit 28s linear infinite; }
.motion-orbit-dot:nth-of-type(2) { animation-delay: -14s; fill: var(--motion-green); }
.motion-sketch { position: relative; display: inline; background: linear-gradient(transparent 64%, #e2eaae 64%); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.motion-sketch svg { position: absolute; left: -3%; bottom: -8px; width: 106%; height: 18px; overflow: visible; pointer-events: none; }
.motion-sketch path { stroke-dasharray: 350; stroke-dashoffset: 350; }
.motion-sketch.is-drawn path { animation: motion-draw 2s ease forwards; }
.home-motion #people { text-decoration: line-through; text-decoration-color: var(--motion-orange); text-decoration-thickness: 1px; }
@keyframes motion-draw { to { stroke-dashoffset: 0; } }
@keyframes motion-marker { to { background-size: 100% 100%; } }
@keyframes motion-orbit { to { offset-distance: 100%; } }
@media (max-width: 650px) {
  #content .home-intro .motion-avatar { width: min(270px,80%); margin-block: 45px 40px; }
  .motion-portrait-orbits { inset: -22px; width: calc(100% + 44px); height: calc(100% + 44px); }
  .motion-backtop { right: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-motion *, .home-motion *::before, .home-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .home-motion .motion-sketch path { stroke-dashoffset: 0; }
  .home-motion #content .home-intro .home-current-role { background-size: 100% 100%; }
}

.motion-backtop { position: fixed; right: 22px; bottom: 22px; z-index: 30; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #cbd7c7; border-radius: 50%; color: var(--motion-green); background: var(--motion-paper); font: inherit; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.motion-backtop.is-visible { opacity: 1; visibility: visible; }
.motion-backtop svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.motion-backtop:hover { border-color: var(--motion-green); }
.motion-backtop:focus-visible { outline: 2px solid var(--motion-orange); outline-offset: 4px; }