/* motion */
.bar{position:fixed;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--ac),var(--ac2));transform-origin:0 50%;transform:scaleX(0);z-index:20}
.glow{translate:calc(var(--gx,0)*1px) calc(var(--pg,0)*-12vh + var(--gy,0)*1px);filter:hue-rotate(calc(var(--pg,0)*70deg));transition:translate .3s ease-out}
.cur{position:fixed;left:0;top:0;width:340px;height:340px;border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(circle,color-mix(in srgb,var(--ac2) 20%,transparent),transparent 65%);transition:translate .25s ease-out}
@media(pointer:coarse){.cur{display:none}}
.rv{opacity:0}.rv.in{opacity:1;animation:var(--rva,rvup) .85s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*90ms)}

section h2::after{content:"";display:block;height:3px;width:0;margin-top:.8rem;border-radius:3px;background:linear-gradient(90deg,var(--ac),var(--ac2));transition:width .9s .35s cubic-bezier(.2,.7,.2,1)}
section h2.in::after{width:64px}
.hero h1 span{display:inline-block;animation:ch .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--k)*45ms + .25s);transition:color .2s,translate .2s}
.hero h1 span:hover{color:var(--ac2);translate:0 -8px}
@keyframes ch{from{opacity:0;translate:0 60%;rotate:6deg;filter:blur(8px)}}
.av{cursor:pointer}.av.spin{animation:flip .9s cubic-bezier(.3,1.4,.5,1)}
@keyframes flip{from{transform:rotate(-360deg) scale(.7)}}
.btn,.pill,nav a,.up{position:relative;overflow:hidden}
.btn{transition:translate .2s,scale .15s,box-shadow .2s}.btn:hover{box-shadow:0 8px 28px color-mix(in srgb,var(--ac) 45%,transparent)}.btn:active{scale:.95}
.rip{position:absolute;border-radius:50%;background:currentColor;opacity:.28;transform:scale(0);animation:rip .7s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(1);opacity:0}}
.pt{position:fixed;width:7px;height:7px;margin:-3px;border-radius:50%;pointer-events:none;z-index:99;animation:pt .9s ease-out forwards}
@keyframes pt{to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
.card{position:relative;overflow:hidden;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .15s ease-out,border-color .2s}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--ac) 24%,transparent),transparent)}
.card:hover::before{opacity:1}.card:hover{border-color:var(--ac)}.card:active{scale:.985}
.tag{transition:background .2s,color .2s,translate .2s}.tag:hover{background:var(--ac);color:#fff;translate:0 -2px}
.rv.in .tag{animation:pop .55s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--k,0)*60ms + .3s)}
@keyframes pop{from{opacity:0;scale:.5}}
.tl{position:relative}.tl::after{content:"";position:absolute;left:-1px;top:0;width:2px;height:100%;background:linear-gradient(var(--ac),var(--ac2));transform-origin:top;transform:scaleY(var(--fill,0))}
.tl>div::before{scale:0;transition:scale .5s .25s cubic-bezier(.3,1.6,.5,1)}.tl>div.in::before{scale:1}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1.5rem;width:100%;margin-top:3.5rem}
.stat{border-left:2px solid var(--line);padding-left:1rem}.stat b{display:block;font:700 clamp(2rem,5vw,3rem)/1 var(--h)}.stat span{color:var(--mut);font-size:.92rem}
.marq{overflow:hidden;border-block:1px solid var(--line);padding:1.1rem 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.track{display:flex;width:max-content;will-change:transform}
.track span{font:500 1.35rem var(--h);color:var(--mut);white-space:nowrap;padding-right:2.8rem;transition:color .2s}.track span:hover{color:var(--ac2)}

.up{position:fixed;right:1.2rem;bottom:1.2rem;z-index:9;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;display:grid;place-items:center;opacity:0;translate:0 20px;pointer-events:none;transition:opacity .3s,translate .3s,scale .15s}
.up.show{opacity:1;translate:0;pointer-events:auto}.up:active{scale:.88}.up svg{width:20px;height:20px}

/* more scroll effects */
[data-rv=up]{--rva:rvup}[data-rv=zoom]{--rva:rvzoom}[data-rv=blur]{--rva:rvblur}[data-rv=flip]{--rva:rvflip}
[data-rv=side] .rv:nth-child(odd){--rva:rvl}[data-rv=side] .rv:nth-child(even){--rva:rvr}
@keyframes rvup{from{opacity:0;translate:0 44px;scale:.96}}@keyframes rvl{from{opacity:0;translate:-90px 0}}@keyframes rvr{from{opacity:0;translate:90px 0}}
@keyframes rvzoom{from{opacity:0;scale:.6}}@keyframes rvblur{from{opacity:0;filter:blur(18px);scale:1.06}}@keyframes rvflip{from{opacity:0;transform:perspective(800px) rotateX(-70deg) translateY(30px)}}
.hx .m{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em}
.hx .m>span{display:inline-block;translate:0 115%;transition:translate .85s cubic-bezier(.2,.7,.2,1) calc(var(--k)*90ms)}.hx.in .m>span{translate:0}
.lead .w2{opacity:.16;transition:opacity .3s}.lead .w2.lit{opacity:1}
section{position:relative}
section::before{content:attr(data-t);position:absolute;top:.5rem;left:0;z-index:-1;font:700 clamp(5rem,17vw,14rem)/1 var(--h);color:transparent;-webkit-text-stroke:1px var(--line);white-space:nowrap;pointer-events:none;translate:calc((var(--sp,.5) - .5)*-34vw) 0}
html{overflow-x:clip}
.hero{translate:0 calc(var(--hp,0)*70px);opacity:calc(1 - var(--hp,0)*1.15)}
.hero h1{scale:calc(1 - var(--hp,0)*.1);transform-origin:left center}.av{translate:0 calc(var(--hp,0)*-50px)}
.orb{position:fixed;border-radius:50%;pointer-events:none;z-index:-1}
.o1{width:42vw;height:42vw;right:-12vw;top:8vh;border:1px solid var(--line);translate:0 calc(var(--pg,0)*-50vh);rotate:calc(var(--pg,0)*360deg)}
.o2{width:18vw;height:18vw;left:6vw;bottom:-4vw;background:conic-gradient(from 90deg,var(--ac),var(--ac2),var(--ac));opacity:.2;filter:blur(34px);translate:0 calc(var(--pg,0)*-80vh)}
.o3{width:12vw;height:12vw;left:42vw;top:40vh;border:1px dashed var(--line);translate:0 calc(var(--pg,0)*40vh);rotate:calc(var(--pg,0)*-540deg)}
nav{transition:translate .45s cubic-bezier(.2,.7,.2,1)}nav.hid{translate:0 -160%}
.tl>div.act::before{box-shadow:0 0 0 7px color-mix(in srgb,var(--ac) 28%,transparent),0 0 22px var(--ac)}.tl>div.act h3{color:var(--ac2)}.tl h3{transition:color .3s}
.up .rg{position:absolute;inset:0;width:100%;height:100%;rotate:-90deg}.rg circle{fill:none;stroke:var(--ac2);stroke-width:2;stroke-dasharray:138.2;stroke-dashoffset:calc(138.2*(1 - var(--pr,0)))}
.mail{background:linear-gradient(100deg,var(--fg) 42%,var(--ac2) 50%,var(--fg) 58%) 100%/260% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.card.in .mail{animation:sh 1.8s .5s both}@keyframes sh{from{background-position:100%}to{background-position:0}}
.dk{position:fixed;left:1rem;bottom:1rem;z-index:30}
.dkb{position:relative;overflow:hidden;padding:.75rem 1.3rem;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--fg);font:500 .95rem var(--b);cursor:pointer}
.dkp{position:absolute;left:0;bottom:3.6rem;width:min(320px,calc(100vw - 2rem));max-height:70svh;overflow:auto;padding:1rem;border-radius:18px;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(16px);border:1px solid var(--line);display:grid;gap:.7rem}
.dkp[hidden]{display:none}.dkp label{display:grid;gap:.25rem;font-size:.85rem;color:var(--mut)}
.dkp select,.dkp input{font:inherit;padding:.5rem;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--fg);width:100%}.dkp input[type=color]{height:42px;padding:2px}
.dkp button{padding:.6rem;border-radius:10px;border:1px solid var(--line);background:var(--glass);color:var(--fg);cursor:pointer;font:inherit}
/* motion levels */
[data-motion=off] *,[data-motion=off] *::before,[data-motion=off] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
[data-motion=off] .rv{opacity:1}[data-motion=off] .hx .m>span{translate:none}[data-motion=off] .tl::after{transform:scaleY(1)}[data-motion=off] .tl>div::before{scale:1}
[data-motion=off] .w2{opacity:1}[data-motion=off] h2::after{width:64px}[data-motion=off] .hero{opacity:1;translate:none}
[data-motion=off] .orb,[data-motion=off] .cur,[data-motion=off] section::before,[data-motion=subtle] .orb,[data-motion=subtle] .cur,[data-motion=subtle] section::before{display:none}