/* This layer adds motion without owning the site's layout or content. */
.motion-stage{position:relative;isolation:isolate;overflow:hidden}
#flow-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
#living-mark{position:relative;z-index:1;overflow:visible}
#living-mark .mark-band{transform-box:fill-box;transform-origin:center;animation:tri-band-rhythm 9s cubic-bezier(.45,0,.2,1) infinite;will-change:translate}
#living-mark .mark-band[data-band="0"]{animation-delay:-1.8s;--band-shift:5px;--band-lift:-2px}
#living-mark .mark-band[data-band="1"]{animation-delay:-1s;--band-shift:-4px;--band-lift:0px}
#living-mark .mark-band[data-band="2"]{animation-delay:-.2s;--band-shift:3px;--band-lift:2px}
@keyframes tri-band-rhythm{0%,12%,82%,100%{translate:0 0}35%{translate:var(--band-shift) var(--band-lift)}59%{translate:calc(var(--band-shift) * -.45) 0}}

.reveal.motion-prepared{--reveal-rise:34px;clip-path:none}
/* A clipped pre-entry box has zero IO intersection and can never reveal itself. */
html[data-motion="running"] .reveal.motion-prepared:not(.is-revealed){opacity:0;translate:0 var(--reveal-rise);clip-path:none}
.reveal.motion-prepared.is-revealed{opacity:1;translate:0 0;clip-path:none}
html[data-motion="running"] .reveal.motion-entering{animation:tri-reveal-cut .85s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms) both}
html[data-motion="running"] .reveal.motion-entering.motion-interactive{animation-name:tri-reveal-surface}
@keyframes tri-reveal-cut{from{opacity:0;translate:0 var(--reveal-rise);clip-path:inset(0 0 100% 0)}to{opacity:1;translate:0 0;clip-path:inset(0)}}
@keyframes tri-reveal-surface{from{opacity:0;translate:0 var(--reveal-rise)}to{opacity:1;translate:0 0}}
.reveal.motion-prepared:focus-within{opacity:1!important;translate:0 0!important;clip-path:none!important;animation:none!important}

.project-preview{overflow:hidden}
.project-preview img{scale:var(--project-scale,1);transform-origin:50% 65%;will-change:scale}
.process-line,path.process-line{stroke-linecap:round}
#motion-toggle{touch-action:manipulation}
#motion-toggle:focus-visible{outline:3px solid #fb5607;outline-offset:6px}
#motion-toggle[aria-disabled="true"]{cursor:default}

html[data-motion="paused"] #living-mark .mark-band,
html[data-motion-visible="hidden"] #living-mark .mark-band,
.motion-offscreen #living-mark .mark-band{animation-play-state:paused}
html[data-motion="paused"] .reveal.motion-prepared{opacity:1;translate:0 0;clip-path:none;transition:none;animation:none}
html[data-motion="paused"] .project-preview img{scale:1;will-change:auto}
html[data-motion-reduced="true"] #living-mark .mark-band{animation:none;translate:0 0;will-change:auto}

@media(max-width:760px){
  #living-mark .mark-band[data-band="0"]{--band-shift:3px;--band-lift:-1px}
  #living-mark .mark-band[data-band="1"]{--band-shift:-2px}
  #living-mark .mark-band[data-band="2"]{--band-shift:2px;--band-lift:1px}
  .reveal.motion-prepared{--reveal-rise:22px}
}
@media(prefers-reduced-motion:reduce){
  #living-mark .mark-band{animation:none!important;translate:0 0!important;will-change:auto}
  .reveal.motion-prepared{opacity:1!important;translate:0 0!important;clip-path:none!important;transition:none!important;animation:none!important}
  .project-preview img{scale:1!important;will-change:auto}
}