/* micro-animations: transform/opacity only, all disabled under prefers-reduced-motion */
:root{--ease:cubic-bezier(.22,.7,.2,1);--spring:cubic-bezier(.3,1.4,.5,1)}
@keyframes rv{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes rvs{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ping{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.8);opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rip{from{transform:translate(-50%,-50%) scale(0);opacity:.45}to{transform:translate(-50%,-50%) scale(1);opacity:0}}
@keyframes blink{0%,100%{opacity:.35}50%{opacity:1}}
.rv{animation:rv .5s var(--ease) both;animation-delay:calc(var(--i,0)*45ms)}
.rvs{animation:rvs .5s var(--ease) both;animation-delay:calc(var(--i,0)*60ms)}
tr.rv{animation-duration:.4s;animation-delay:calc(var(--i,0)*28ms)}
.bars i{transform-origin:bottom;animation:grow .7s var(--ease) both;animation-delay:calc(var(--i,0)*28ms);transition:opacity .2s,filter .2s}
.bars:hover i{opacity:.55}.bars i:hover{opacity:1;filter:brightness(1.15)}
.meter i{transform-origin:left;animation:growx .9s var(--ease) both .15s}
/* nav: sliding pill */
.nav,.sub,.tabs{position:relative}
.nav a,.sub a,.tabs a{position:relative;z-index:1;transition:color .2s,background .2s,transform .15s}
.nav a.on,.sub a.on{background:none!important}
.nav .pill{position:absolute;z-index:0;top:4px;bottom:4px;left:0;border-radius:999px;background:linear-gradient(180deg,#fff,#b9bfd6);box-shadow:0 4px 14px rgba(150,140,255,.28);transition:transform .38s var(--ease),width .38s var(--ease);will-change:transform}
.sub .pill{position:absolute;z-index:0;top:0;height:100%;left:0;border-radius:9px;background:rgba(255,255,255,.08);transition:transform .35s var(--ease),width .35s var(--ease)}
.sub{align-items:center}
.nav a:not(.on):hover{transform:translateY(-1px)}.nav a:active{transform:scale(.95)}
.sub a:hover,.tabs a:hover{color:#fff}.tabs a:active,.sub a:active{transform:scale(.95)}
.bar{transition:box-shadow .25s,background .25s}.bar.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.45)}
.logo .orb{transition:transform .7s var(--ease)}.logo:hover .orb{transform:rotate(180deg) scale(1.08)}
.me button,.me a{transition:color .2s}
/* buttons */
.btn{position:relative;overflow:hidden;transition:transform .15s var(--ease),filter .2s,background .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.07)}.btn:active{transform:translateY(0) scale(.96);filter:brightness(.95)}
.btn.g:hover,.btn.d:hover{filter:none}.btn.d:hover{background:rgba(255,120,140,.15)}
.btn .rip{position:absolute;width:140px;height:140px;border-radius:50%;background:rgba(150,140,255,.5);pointer-events:none;animation:rip .6s ease-out forwards}
.btn.g .rip{background:rgba(255,255,255,.3)}
.btn.ok{animation:pop .3s var(--spring)}
/* panels, stats, rows */
.pan{transition:box-shadow .25s,transform .25s var(--ease)}
.stat,.strip div,.glass{transition:transform .25s var(--ease),box-shadow .25s}
.stat:hover,.strip div:hover{transform:translateY(-3px)}
tbody tr{transition:background .18s}tbody tr:hover{background:rgba(255,255,255,.035)}
tbody tr td:first-child{transition:padding-left .2s var(--ease)}tbody tr:hover td:first-child{padding-left:12px}
.chip{transition:transform .2s var(--spring),background .2s}.chip:hover{transform:scale(1.06)}
.code{transition:box-shadow .2s}.code:hover{box-shadow:inset 0 0 0 1px rgba(169,164,255,.3)}
input,select,textarea{transition:box-shadow .2s,background .2s}input:focus,select:focus,textarea:focus{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(169,164,255,.6),0 0 0 4px rgba(169,164,255,.12)}
summary{transition:color .2s,padding-left .2s var(--ease)}summary:hover{padding-left:4px}details[open]>*:not(summary){animation:rv .35s var(--ease) both}
.sw{transition:background .25s}.sw:after{transition:transform .25s var(--spring),left .25s var(--spring)}.sw:active:after{width:20px}
/* overlays */
.modal{animation:fade .2s ease both}.modal .pan{animation:pop .32s var(--spring) both}
.toast{transform:translate(-50%,16px) scale(.96);opacity:0;transition:opacity .25s,transform .35s var(--spring)}
.toast.show{transform:translate(-50%,0) scale(1);opacity:1}
.msg{animation:rv .35s var(--ease) both}.chat>*{animation:rv .3s var(--ease) both}
/* hero + status */
.dot{position:relative}.dot:after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 2.4s ease-out infinite}
.dock a{transition:transform .25s var(--spring),color .2s,background .2s}.dock a:hover{transform:translateY(-4px) scale(1.07);background:rgba(255,255,255,.08)}.dock a:active{transform:scale(.94)}
.htop{animation:fade 1s ease both .1s}.htag{animation:rv .7s var(--ease) both .35s}
.strip div{animation:rvs .6s var(--ease) both;animation-delay:calc(.5s + var(--i,0)*80ms)}
.dock{animation:rv .7s var(--ease) both .85s}
.login{animation:pop .6s var(--spring) both .3s}
.empty{animation:blink 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}