@property --a{syntax:'<angle>';inherits:true;initial-value:0deg}
@property --p{syntax:'<number>';inherits:false;initial-value:0}
html.is-booting{overflow:hidden}
.boot{position:fixed;inset:0;z-index:200;display:grid;place-content:center;justify-items:center;gap:0;overflow:hidden;background:radial-gradient(ellipse 70% 55% at 50% 42%,#0a2a18 0%,#06180f 55%,#03100a 100%);color:#e6f2ea;transition:opacity .55s ease,visibility .55s ease,transform .55s cubic-bezier(.4,0,.2,1)}
.boot.out{opacity:0;visibility:hidden;pointer-events:none;transform:scale(1.06)}
.boot::before,.boot::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.boot::before{width:min(90vw,520px);height:min(90vw,520px);background:radial-gradient(circle,rgba(67,223,135,.18),transparent 68%);animation:boot-pulse 2.4s ease-in-out infinite}
.boot::after{inset:-20%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");opacity:.04;mix-blend-mode:overlay}
.boot-stage{position:relative;width:200px;height:200px;margin-bottom:28px}
.boot-ring{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(121,238,170,.28);animation:boot-orbit 12s linear infinite}
.boot-ring.b{inset:18px;border-style:solid;border-color:rgba(121,238,170,.14);animation-duration:7s;animation-direction:reverse}
.boot-ring::before{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#79eeaa;box-shadow:0 0 14px 3px rgba(67,223,135,.85)}
.boot-ring.b::before{width:6px;height:6px;margin-left:-3px;top:-3px;background:#43df87}
.boot-core{position:absolute;inset:42px;display:grid;place-items:center;border-radius:28px;background:linear-gradient(160deg,rgba(67,223,135,.22),rgba(3,20,10,.85));box-shadow:0 0 0 1px rgba(121,238,170,.35),0 0 40px rgba(0,176,78,.35),inset 0 1px rgba(255,255,255,.2);animation:boot-bob 2.8s ease-in-out infinite}
.boot-core::before{content:"";position:absolute;inset:-3px;border-radius:31px;padding:2px;background:conic-gradient(from var(--a),transparent 0 50%,#79eeaa 62%,#43df87 72%,transparent 82%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:boot-spin 1.4s linear infinite}
.boot-core img{width:52px;height:52px;filter:drop-shadow(0 4px 16px rgba(67,223,135,.45));animation:boot-logo 2.2s ease-in-out infinite}
.boot-dust{position:absolute;inset:0;pointer-events:none}
.boot-dust i{position:absolute;width:4px;height:4px;border-radius:50%;background:#79eeaa;box-shadow:0 0 8px 2px rgba(67,223,135,.7);opacity:0;animation:boot-dust 2.8s ease-in-out infinite}
.boot-dust i:nth-child(1){left:8%;top:22%;animation-delay:0s}
.boot-dust i:nth-child(2){left:88%;top:18%;animation-delay:.4s}
.boot-dust i:nth-child(3){left:12%;top:78%;animation-delay:.8s}
.boot-dust i:nth-child(4){left:84%;top:72%;animation-delay:1.2s}
.boot-dust i:nth-child(5){left:48%;top:4%;animation-delay:.2s}
.boot-dust i:nth-child(6){left:52%;top:92%;animation-delay:1s}
.boot-brand{display:flex;gap:.02em;font:700 clamp(2rem,6vw,2.6rem)/1 Outfit,sans-serif;letter-spacing:.08em}
.boot-brand em{display:inline-block;font-style:normal;opacity:0;transform:translateY(18px) scale(.85);animation:boot-letter .55s cubic-bezier(.2,.9,.2,1) forwards}
.boot-brand em:nth-child(1){animation-delay:.15s}
.boot-brand em:nth-child(2){animation-delay:.28s}
.boot-brand em:nth-child(3){animation-delay:.41s}
.boot-copy{margin-top:14px;color:rgba(230,242,234,.55);font:600 .78rem Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase;opacity:0;animation:boot-fade .5s ease .7s forwards}
.boot-meter{position:relative;width:min(200px,56vw);height:4px;margin-top:22px;overflow:hidden;border-radius:99px;background:rgba(121,238,170,.12);opacity:0;animation:boot-fade .4s ease .85s forwards}
.boot-meter i{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:linear-gradient(90deg,#007d38,#43df87,#c8fadc);box-shadow:0 0 16px rgba(67,223,135,.8);animation:boot-fill 1.6s cubic-bezier(.4,0,.2,1) .9s forwards}
.boot-meter::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-100%);animation:boot-shine 1.4s ease-in-out 1.2s infinite}
@keyframes boot-spin{to{--a:360deg}}
@keyframes boot-orbit{to{transform:rotate(360deg)}}
@keyframes boot-pulse{50%{transform:scale(1.12);opacity:.75}}
@keyframes boot-bob{50%{transform:translateY(-6px)}}
@keyframes boot-logo{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes boot-dust{0%,100%{opacity:0;transform:scale(.4)}40%,60%{opacity:1;transform:scale(1)}}
@keyframes boot-letter{to{opacity:1;transform:none}}
@keyframes boot-fade{to{opacity:1}}
@keyframes boot-fill{to{width:100%}}
@keyframes boot-shine{100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){
.boot::before,.boot-ring,.boot-ring.b,.boot-core,.boot-core::before,.boot-core img,.boot-dust i,.boot-brand em,.boot-copy,.boot-meter,.boot-meter i,.boot-meter::after{animation:none!important}
.boot-brand em,.boot-copy,.boot-meter{opacity:1;transform:none}
.boot-meter i{width:100%}
.boot,.boot.out{transition:none;transform:none}
}