/* webxbunt motion engine — shared by every page. Pairs with motion.js.
   Pages provide: --acc (accent), --cur-bg (curtain colour), --ink (text). */

/* ---------- page curtain + intro ---------- */
.mx-curtain{position:fixed;inset:0;z-index:9999;background:var(--cur-bg,#0a0b0b);display:grid;place-items:center;transform:translateY(-101%);transition:transform .8s cubic-bezier(.76,0,.24,1);pointer-events:none;will-change:transform}
.mx-curtain span{font:800 clamp(28px,5vw,54px)/1 var(--disp,'Archivo Variable',Impact,sans-serif);letter-spacing:-.02em;text-transform:uppercase;color:var(--ink,#ece8dd);opacity:0;transform:translateY(14px);transition:opacity .4s .15s,transform .6s .15s cubic-bezier(.19,1,.22,1)}
.mx-curtain span b{color:var(--acc,#e2a93b);font-weight:inherit}
html.pre .mx-curtain,html.leaving .mx-curtain{transform:none}
html.leaving .mx-curtain span{opacity:1;transform:none}
html.leaving{pointer-events:none}
html.mx-frame .mx-curtain,html.mx-rm .mx-curtain{display:none}

.intro{position:fixed;inset:0;z-index:10000;color:var(--ink,#ece8dd);cursor:pointer}
.intro .half{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:var(--cur-bg,#0a0b0b);transition:transform 1.15s cubic-bezier(.76,0,.24,1);will-change:transform}
.intro .ht{top:0}.intro .hb{bottom:0}
.intro.open .top{transform:translateY(-101%)}.intro.open .bot{transform:translateY(101%)}
.intro .stg{position:absolute;left:0;right:0;height:200%;display:grid;place-items:center;overflow:hidden}
.intro .ht .stg{top:0}.intro .hb .stg{bottom:0}
.intro .stg::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 40% at 50% 50%,color-mix(in srgb,var(--acc) 16%,transparent),transparent 70%),linear-gradient(rgba(236,232,221,.05) 1px,transparent 1px) 0 0/100% 80px,linear-gradient(90deg,rgba(236,232,221,.05) 1px,transparent 1px) 0 0/80px 100%;-webkit-mask:radial-gradient(70% 60% at 50% 50%,#000,transparent);mask:radial-gradient(70% 60% at 50% 50%,#000,transparent);opacity:0;animation:iFade 1.2s .1s both}
.intro .wmk{position:relative;display:flex;font:800 clamp(40px,13.2vw,230px)/.9 var(--disp,'Archivo Variable',Impact,sans-serif);text-transform:uppercase;letter-spacing:-.045em;white-space:nowrap}
.intro .L{display:inline-block;overflow:hidden;padding:.1em 0 .14em;margin:-.1em 0 -.14em}
.intro .L i{display:inline-block;font-style:normal;transform:translateY(118%);font-stretch:62%;animation:iRise 1.15s cubic-bezier(.19,1,.22,1) both;animation-delay:calc(var(--i)*.075s + .2s)}
.intro .L.x{overflow:visible}
.intro .L.x i{color:var(--acc);transform:scale(0) rotate(-300deg);animation:iX 1.6s cubic-bezier(.19,1,.22,1) .75s both,iPulse 1.1s cubic-bezier(.76,0,.24,1) 2.05s both}
.intro .tagl{position:absolute;left:0;right:0;top:calc(50% + clamp(34px,8vw,120px));text-align:center;font:500 clamp(10px,1.3vw,13px)/1.4 var(--mono,monospace);letter-spacing:.3em;text-transform:uppercase;color:var(--mute,#8d968f);opacity:0;animation:iTag .9s 1.5s both}
.intro .tagl b{color:var(--acc);font-weight:500}
.intro .cn{position:absolute;bottom:clamp(18px,3vw,36px);font:500 11px var(--mono,monospace);letter-spacing:.18em;text-transform:uppercase;color:var(--dim,#59625c);opacity:0;animation:iTag .8s 1.9s both}
.intro .cn.l{left:clamp(18px,3vw,40px)}.intro .cn.r{right:clamp(18px,3vw,40px)}
.intro .cn.u{bottom:auto;top:clamp(18px,3vw,36px)}
.intro .seam{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--acc);z-index:3;transform:scaleX(0);box-shadow:0 0 24px var(--acc);animation:iSeam .7s cubic-bezier(.76,0,.24,1) 2.3s both}
.intro.open .seam{opacity:0;transition:opacity .4s .15s}
.intro:not(.play) *,.intro:not(.play) *::before{animation-play-state:paused!important}
@keyframes iRise{to{transform:none;font-stretch:100%}}
@keyframes iX{0%{transform:scale(0) rotate(-300deg)}60%{transform:scale(1.18) rotate(20deg)}100%{transform:scale(1) rotate(0)}}
@keyframes iPulse{0%{transform:scale(1) rotate(0)}50%{transform:scale(1.35) rotate(180deg)}100%{transform:scale(1) rotate(360deg)}}
@keyframes iTag{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes iSeam{to{transform:scaleX(1)}}
@keyframes iFade{to{opacity:1}}
html.mx-frame .intro,html.mx-rm .intro{display:none}

/* ---------- scroll bar ---------- */
.mx-bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:9000;background:var(--acc,#e2a93b);transform:scaleX(0);transform-origin:left;pointer-events:none}
html.mx-frame .mx-bar{display:none}

/* ---------- cursor ---------- */
.mx-dot,.mx-ring,.mx-lab{position:fixed;left:0;top:0;pointer-events:none;z-index:9500;opacity:0;will-change:transform}
.mx-dot{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;mix-blend-mode:difference}
.mx-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:1.5px solid #fff;mix-blend-mode:difference;transition:width .35s cubic-bezier(.19,1,.22,1),height .35s cubic-bezier(.19,1,.22,1),margin .35s cubic-bezier(.19,1,.22,1),background .3s}
.mx-ring.hot{width:64px;height:64px;margin:-32px 0 0 -32px;background:#fff}
.mx-ring.txt{width:0;height:0;margin:0;border-width:0}
.mx-lab{margin:-36px 0 0 -36px;width:72px;height:72px;border-radius:50%;background:var(--acc,#e2a93b);color:var(--on,#0a0b0b);display:grid;place-items:center;font:700 11px/1 var(--mono,monospace);letter-spacing:.08em;text-transform:uppercase;scale:0;transition:scale .4s cubic-bezier(.19,1,.22,1)}
.mx-lab.on{scale:1}
html.mx-cur-on .mx-dot,html.mx-cur-on .mx-ring{opacity:1}
html.mx-cur-on .mx-lab{opacity:1}
html.mx-cur-on,html.mx-cur-on a,html.mx-cur-on button,html.mx-cur-on label,html.mx-cur-on summary,html.mx-cur-on [role=button]{cursor:none}
html.mx-cur-on input,html.mx-cur-on textarea,html.mx-cur-on select{cursor:auto}
html.mx-cur-off .mx-dot,html.mx-cur-off .mx-ring,html.mx-cur-off .mx-lab{opacity:0}

/* ---------- split text ---------- */
.mx-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em 0 .16em;margin:-.1em 0 -.16em}
.mx-w>i,.mx-w .mx-c{display:inline-block;font-style:inherit;will-change:transform}
html.js [data-split]:not(.mx-go) .mx-w>i,html.js [data-split]:not(.mx-go) .mx-c{transform:translateY(118%)}
[data-split].mx-go .mx-w>i{transform:none;transition:transform 1.1s cubic-bezier(.19,1,.22,1);transition-delay:calc(var(--i)*60ms + var(--sd,0ms))}
[data-split].mx-go .mx-c{transform:none;transition:transform 1s cubic-bezier(.19,1,.22,1);transition-delay:calc(var(--i)*22ms + var(--sd,0ms))}
.mx-w[data-nosplit],.mx-w>i>[data-nosplit]{overflow:visible}

/* scroll-filled text */
[data-fill] .fw{opacity:.14;transition:opacity .35s,color .35s}
[data-fill] .fw.on{opacity:1}

/* ---------- reveal ---------- */
[data-reveal]{transition:opacity 1s cubic-bezier(.19,1,.22,1),transform 1.2s cubic-bezier(.19,1,.22,1),clip-path 1.3s cubic-bezier(.19,1,.22,1);transition-delay:var(--d,0ms)}
html.js [data-reveal]:not(.mx-go){opacity:0;transform:translateY(44px)}
html.js [data-reveal="left"]:not(.mx-go){transform:translateX(-56px)}
html.js [data-reveal="right"]:not(.mx-go){transform:translateX(56px)}
html.js [data-reveal="scale"]:not(.mx-go){transform:scale(.9)}
html.js [data-reveal="fade"]:not(.mx-go){transform:none}
html.js [data-reveal="clip"]:not(.mx-go){opacity:1;transform:none;clip-path:inset(100% 0 0 0)}
[data-reveal="clip"].mx-go{clip-path:inset(0)}

/* ---------- marquee ---------- */
[data-marquee]{overflow:hidden;white-space:nowrap}
[data-marquee] .mq-track{display:inline-flex;will-change:transform}
[data-marquee] .mq-track>*{flex:none}

/* ---------- spotlight ---------- */
[data-spot]{position:relative}
[data-spot]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--acc,#e2a93b) 14%,transparent),transparent 62%)}
[data-spot]:hover::after{opacity:1}

/* tilt */
[data-tilt]{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.19,1,.22,1);will-change:transform}

/* header auto-hide */
[data-hdr]{transition:transform .6s cubic-bezier(.19,1,.22,1)}
[data-hdr].mx-hdr-hide{transform:translateY(-150%)}

/* back pill on demo pages */
.mx-back{position:fixed;left:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:9200;display:inline-flex;align-items:center;gap:10px;padding:11px 18px 11px 14px;border-radius:99px;background:rgba(10,11,11,.82);color:#ece8dd;border:1px solid rgba(236,232,221,.2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font:600 13px/1 'Hanken Grotesk Variable',system-ui,sans-serif;letter-spacing:.01em;text-decoration:none;transition:transform .4s cubic-bezier(.19,1,.22,1),background .3s,color .3s}
.mx-back i{font-style:normal;display:inline-block;transition:transform .4s cubic-bezier(.19,1,.22,1)}
.mx-back:hover{background:#e2a93b;color:#0a0b0b}
.mx-back:hover i{transform:translateX(-4px)}
.mx-back b{font-weight:800;letter-spacing:-.01em}
.mx-back b em{font-style:normal;color:#e2a93b}
.mx-back:hover b em{color:#0a0b0b}
html.mx-frame .mx-back{display:none}

/* ---------- reduced motion ---------- */
html.mx-rm [data-reveal],html.mx-rm [data-split] .mx-w>i,html.mx-rm [data-split] .mx-c{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
html.mx-rm [data-fill] .fw{opacity:1}
html.mx-rm [data-tilt]{transform:none!important}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}
@media(hover:none),(pointer:coarse){.mx-dot,.mx-ring,.mx-lab{display:none}}
@media(max-width:600px){.mx-back{padding:9px 14px 9px 11px;font-size:12px;left:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));opacity:.92}}

/* smooth-scroll mode */
html.mx-smooth{scroll-behavior:auto!important}

/* shared helpers for the sample sites */
.mx-ferr{display:block;margin-top:2px;font:600 14px/1.35 var(--body,system-ui);color:var(--mx-err,#e0634a);letter-spacing:0;text-transform:none}
.mx-bad{border-color:var(--mx-err,#e0634a)!important;animation:mxshake .45s}
@keyframes mxshake{20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.mx-done{position:relative}
.mx-tick{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--acc,#e2a93b);color:var(--on,#0b0b0c);margin-bottom:14px}
.mx-tick svg{width:30px;height:30px}
.mx-tick path{stroke-dasharray:40;stroke-dashoffset:40;animation:mxdraw .7s .25s cubic-bezier(.19,1,.22,1) forwards}
@keyframes mxdraw{to{stroke-dashoffset:0}}
.mx-dt{display:block;font-family:var(--disp,inherit);font-weight:var(--mx-dw,700);text-transform:var(--mx-dtt,none);font-size:clamp(26px,3vw,40px);line-height:1.05;margin-bottom:8px}
.mx-dp{display:block;opacity:.9}
.mx-spark{position:absolute;left:46px;top:58px;width:8px;height:8px;border-radius:2px;pointer-events:none;z-index:3}
.mx-fab{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:90;display:none;align-items:center;gap:10px;padding:14px 24px;border-radius:99px;background:var(--acc,#e2a93b);color:var(--on,#0b0b0c);font:700 16px var(--body,system-ui);text-decoration:none;translate:0 170%;opacity:0;pointer-events:none;transition:translate .7s cubic-bezier(.19,1,.22,1),opacity .4s;box-shadow:0 18px 40px -12px rgba(0,0,0,.65)}
@media(max-width:860px){.mx-fab{display:inline-flex}.mx-fab.show{translate:0 0;opacity:1;pointer-events:auto}}