.motion-field{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:.65;mask-image:linear-gradient(90deg,#000, #0008 45%,#000)}
.motion-field svg{display:block;width:100%;height:100%}
.motion-guide{fill:none;stroke:#75cee8;stroke-width:.7;opacity:.065}
.motion-trace{fill:none;stroke:#7ce0ed;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:38 962;animation:signal-travel 23s linear infinite;opacity:.65}
.motion-trace:nth-of-type(2){animation-duration:29s;animation-delay:-11s;stroke:#b5cee7;opacity:.45}
.motion-trace:nth-of-type(3){animation-duration:32s;animation-delay:-22s;opacity:.5}
.motion-trace:nth-of-type(4){animation-duration:27s;animation-delay:-6s;opacity:.4}
@keyframes signal-travel{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
.motion-node{fill:#8bdeeb;animation:node-breathe 7s ease-in-out infinite;opacity:.15}
.motion-node:nth-of-type(2){animation-delay:-3s}
@keyframes node-breathe{0%,100%{opacity:.13}50%{opacity:.42}}
.motion-enabled .motion-reveal{transition:opacity .7s ease,translate .7s cubic-bezier(.22,.61,.36,1);transition-delay:var(--reveal-delay,0ms)}
.motion-enabled .motion-reveal[data-reveal-state="pending"]{opacity:.75;translate:0 12px}
.motion-enabled .motion-reveal[data-reveal-state="shown"]{opacity:1;translate:0 0}
.motion-enabled .motion-reveal:focus-within{opacity:1;translate:0 0;transition-delay:0ms}
.project{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 20%,#ffffff28 48%,transparent 76%);transform:translateX(-125%);transition:transform .65s ease}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(125%)}
.topbar::after{content:'';position:absolute;bottom:0;inset-inline:0;height:1px;background:linear-gradient(90deg,#4388ff,#82e7ed);transform:scaleX(var(--page-progress,0));transform-origin:left;opacity:.8;pointer-events:none}
dialog[open] .modal-body,.project-pane:not([hidden]){animation:pane-appear .38s ease both}
.image-lightbox[open]{animation:pane-appear .25s ease both}
@keyframes pane-appear{from{opacity:0}to{opacity:1}}
body.motion-paused .motion-trace,body.motion-paused .motion-node,body:has(dialog[open]) .motion-trace,body:has(dialog[open]) .motion-node{animation-play-state:paused}
@media(max-width:760px){.motion-field{opacity:.45}.motion-trace:nth-of-type(3),.motion-trace:nth-of-type(4){display:none}.motion-enabled .motion-reveal[data-reveal-state="pending"]{translate:0 12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.motion-field{display:none}.motion-enabled .motion-reveal{opacity:1!important;translate:none!important;transition:none!important}.project,.project img,.gallery-tile img,.btn{transition:none!important}.project:hover,.btn:hover,.project:hover img,.gallery-image-button:hover img{transform:none!important}.btn::after{display:none}dialog[open] .modal-body,.project-pane:not([hidden]),.image-lightbox[open]{animation:none!important}}