/* Qubit micro-interactions. Everything animated is gated behind html.mx-on (set by micro.js
   only when motion is allowed), so reduced-motion and no-JS users get the plain site. */

/* ---------- particle overlay + contact field ---------- */
.mx-fx{position:fixed;left:0;top:0;z-index:60;pointer-events:none;display:block}
.mx-field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;display:block;border-radius:inherit}
.cta{position:relative;overflow:hidden;isolation:isolate}
.cta>*:not(.mx-field){position:relative;z-index:1}

/* ---------- text roll ---------- */
.mx-roll{display:inline-block;position:relative;overflow:hidden;vertical-align:top;white-space:nowrap;padding-block:.16em;margin-block:-.16em}
.mx-roll>i{display:block;font-style:normal;transition:translate .5s cubic-bezier(.65,0,.2,1)}
.mx-roll>i+i{position:absolute;left:0;top:calc(100% - .16em)}
a:hover>.mx-roll>i,a:focus-visible>.mx-roll>i{translate:0 -100%}
.mx-roll>i+i{translate:0 0}
a:hover>.mx-roll>i+i,a:focus-visible>.mx-roll>i+i{translate:0 -100%}

/* ---------- header: hide on scroll down, blur when scrolled ---------- */
html.mx-on .nav{transition:transform .45s cubic-bezier(.2,.8,.2,1),background .3s,box-shadow .3s,backdrop-filter .3s}
html.mx-on .nav.mx-scrolled{background:rgba(244,244,245,.72);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);box-shadow:0 8px 24px -16px rgba(9,9,11,.25)}
html.mx-on .nav.mx-hide{transform:translateY(-101%)}

/* ---------- headings: line-mask reveal ---------- */
.mx-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.mx-wi{display:inline-block;transition:transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*70ms)}
.mx-pre .mx-wi{transform:translateY(110%)}

/* ---------- project image inner parallax (headroom so edges never show) ---------- */
html.mx-on .shot img{height:calc(100% + 40px);margin-top:-20px;translate:0 var(--mx-py,0px);will-change:translate}
html.mx-on .shot img.alt{inset:auto;left:0;top:-20px;width:100%}

/* ---------- avatar tilt ---------- */
html.mx-on .avatar{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s;will-change:transform}
html.mx-on .avatar.mx-tilting{transition:transform .12s ease-out,box-shadow .4s;box-shadow:0 14px 24px -12px rgba(9,9,11,.3)}

/* ---------- paragraph links: underline draws in ---------- */
@media (prefers-reduced-motion:no-preference){
 p a:not(.btn):not(.dcta):not(.link),.proof a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s cubic-bezier(.2,.8,.2,1);padding-bottom:1px}
 p a:not(.btn):not(.dcta):not(.link):hover,.proof a:hover{background-size:100% 1px}
}

/* ---------- custom cursor ---------- */
html.mx-cursor-on,html.mx-cursor-on *{cursor:none!important}
.mx-dot,.mx-ringw{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;opacity:0;transition:opacity .25s}
.mx-dot{width:0;height:0}
.mx-dot i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#fff;mix-blend-mode:difference;transition:scale .2s cubic-bezier(.2,.8,.2,1)}
.mx-ringw{width:0;height:0}
.mx-ring{position:absolute;left:0;top:0;width:34px;height:34px;translate:-50% -50%;border-radius:50%;border:1.5px solid #fff;mix-blend-mode:difference;display:grid;place-items:center;
 transition:width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1),background .25s,border-color .25s,scale .2s cubic-bezier(.2,.8,.2,1)}
.mx-ring b{font:500 12px/1 var(--font,'DM Sans',sans-serif);letter-spacing:.01em;opacity:0;scale:.7;transition:opacity .2s,scale .3s cubic-bezier(.2,.8,.2,1);white-space:nowrap}
.mx-show .mx-dot,.mx-show .mx-ringw{opacity:1}
.mx-link .mx-ring{width:44px;height:44px;mix-blend-mode:normal;border-color:rgba(255,90,0,.55);background:transparent}
.mx-btnhov .mx-ring{width:10px;height:10px;border-color:transparent;background:transparent}
.mx-link .mx-dot i{scale:.6}
.mx-view .mx-ring,.mx-open .mx-ring{width:76px;height:76px;mix-blend-mode:normal;border-color:transparent;background:#09090b}
.mx-open .mx-ring{background:#fafafa}
.mx-view .mx-ring b,.mx-open .mx-ring b{opacity:1;scale:1;color:#fff}
.mx-open .mx-ring b{color:#09090b}
.mx-view .mx-dot i,.mx-open .mx-dot i{opacity:0}
.mx-down .mx-ring{scale:.82}
.mx-down .mx-dot i{scale:.5}

/* ---------- back to top ---------- */
.mx-top{position:fixed;right:24px;bottom:24px;z-index:55;width:48px;height:48px;border-radius:50%;border:0;padding:0;background:var(--ink,#09090b);color:#fff;display:grid;place-items:center;cursor:pointer;
 box-shadow:0 10px 24px -8px rgba(9,9,11,.45);opacity:0;visibility:hidden;translate:0 14px;scale:.9;transition:opacity .3s,translate .4s cubic-bezier(.2,.8,.2,1),scale .3s,visibility 0s .4s,box-shadow .25s;-webkit-tap-highlight-color:transparent}
.mx-top.on{opacity:1;visibility:visible;translate:0 0;scale:1;transition-delay:0s}
.mx-top:hover{box-shadow:0 14px 28px -8px rgba(9,9,11,.55)}
.mx-top:active{scale:.94}
.mx-top svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.mx-top .tr{fill:none;stroke:rgba(255,255,255,.18);stroke-width:2}
.mx-top .pg{fill:none;stroke:#FF5A00;stroke-width:2;stroke-linecap:round}
.mx-top .ar{position:relative;width:16px;height:16px;transition:translate .25s cubic-bezier(.2,.8,.2,1)}
.mx-top:hover .ar{translate:0 -2px}
@media (max-width:640px){.mx-top{right:16px;bottom:16px;width:44px;height:44px}}

/* ---------- footer wordmark ---------- */
.mx-wm{display:flex;justify-content:center;overflow:hidden;padding-top:28px;margin-top:8px;font-weight:700;font-size:min(22vw,270px);line-height:1;letter-spacing:-.035em;user-select:none;-webkit-user-select:none}
.mx-wm span{display:inline-block;color:#e4e4e7;translate:0 0;transition:color .25s;will-change:translate}
html.mx-on .mx-wm span.hot{color:#cfcfd4}
@media (max-width:640px){.mx-wm{padding-top:12px}}

@media print{.mx-fx,.mx-field,.mx-dot,.mx-ringw,.mx-top,.mx-wm{display:none!important}}
/* particles inside the Start-a-project buttons */
.mx-spark{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;pointer-events:none;z-index:0}
.mx-sparked>*:not(.mx-spark):not(.rip){position:relative;z-index:1}
.mx-sparked>.rip{z-index:1}