/* Veloxise Solutions - coming soon
   Palette: void #02060F, electric #0A6CFF, cyan #00D1FF, ice #EAF4FF
   Type: Unbounded (display), Manrope (body), JetBrains Mono (HUD) */
:root{
  --bg:#02060F; --ink:#EAF4FF; --mute:#8FA9CC; --dim:#5F7899;
  --blue:#0A6CFF; --cyan:#00D1FF; --line:rgba(0,209,255,.28);
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --mx:50vw; --my:50vh;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:Manrope,system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* background layers */
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.spot{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(0,150,255,.16),transparent 70%)}
.vig{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(65% 60% at 50% 46%,rgba(2,6,15,.15),rgba(2,6,15,.88) 100%)}
.flash{position:fixed;inset:0;z-index:9;pointer-events:none;background:radial-gradient(circle at 50% 55%,#fff,#7fe3ff 40%,transparent 75%);opacity:0}
.flash.go{animation:flash 1.1s ease-out}

/* HUD */
.hud{pointer-events:none;position:fixed;left:0;right:0;z-index:3;display:flex;justify-content:space-between;gap:16px;padding:18px clamp(14px,3vw,34px);font:400 .78rem var(--mono);color:var(--dim)}
.hud-top{top:env(safe-area-inset-top,0px)}
.hud-bottom{bottom:env(safe-area-inset-bottom,0px);align-items:flex-end}
.status{display:inline-flex;align-items:center;gap:8px;color:var(--cyan)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);animation:ping 1.8s infinite}
.boot{display:flex;flex-direction:column;gap:3px;margin-bottom:8px;min-height:4.8em}
.boot span{opacity:0;animation:in .4s forwards}
.boot b{color:var(--cyan);font-weight:400}
.right{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px 16px;font-family:Manrope,sans-serif;font-size:.85rem}
.right a{pointer-events:auto;color:var(--mute);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.right a:hover{color:var(--cyan);border-color:var(--cyan)}
.right a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
#social{display:inline-flex;gap:16px}
.copy{color:var(--dim)}

/* layout */
main{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:60px 20px 80px;text-align:center}
.stage{perspective:1000px;width:min(500px,80vw,56vh)}
.tilt{transform-style:preserve-3d;transition:transform .18s ease-out}
.logo{display:block;width:100%;height:auto;filter:drop-shadow(0 0 18px rgba(0,209,255,.45)) drop-shadow(0 0 60px rgba(10,108,255,.45));animation:boot 1.2s cubic-bezier(.2,.9,.2,1) both,float 7s 1.2s ease-in-out infinite}
h1{font-family:Unbounded,sans-serif;font-weight:700;font-size:clamp(1.4rem,4.6vw,2.6rem);line-height:1.14;letter-spacing:-.015em;margin:6px 0 0;max-width:19ch;animation:rise .9s .5s both,glitch 8s 2s infinite}
.sub{margin:0;color:var(--mute);font-size:clamp(1rem,1.7vw,1.12rem);line-height:1.6;max-width:46ch;animation:rise .9s .7s both}

/* reactor button */
.ign{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:6px;animation:rise .9s .9s both;transition:opacity .45s,transform .45s}
.ign.gone{opacity:0;transform:scale(1.4)}
.reactor{--c:0;position:relative;width:108px;height:108px;padding:0;border:0;border-radius:50%;cursor:pointer;color:var(--cyan);
  background:radial-gradient(circle,rgba(0,209,255,calc(.1 + var(--c)*.45)),rgba(4,14,34,.7) 72%);
  box-shadow:0 0 calc(18px + var(--c)*70px) rgba(0,209,255,calc(.25 + var(--c)*.6)),inset 0 0 22px rgba(0,209,255,.15);
  transform:scale(calc(1 + var(--c)*.09));touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.reactor:focus-visible{outline:2px solid #fff;outline-offset:6px}
.reactor svg:first-child{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.track,.ring{fill:none;stroke-width:3}
.track{stroke:rgba(0,209,255,.22)}
.ring{stroke:var(--cyan);stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:326.7;filter:drop-shadow(0 0 6px var(--cyan))}
.arrow{position:relative;width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:translate(calc(var(--c)*4px),calc(var(--c)*-4px))}
.cap{margin:0;font:400 .82rem var(--mono);color:var(--cyan)}
.skip{background:none;border:0;padding:4px 6px;color:var(--dim);font:400 .8rem Manrope,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.skip:hover{color:var(--ink)}
.skip:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* join form */
.join{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:460px}
.join[hidden]{display:none}
.join.in{animation:rise .8s both}
.ok{margin:0;font:400 .95rem var(--mono);color:var(--cyan)}
.row{display:flex;gap:8px;width:100%;padding:5px;border:1px solid var(--line);border-radius:4px;background:rgba(2,10,26,.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.row:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,209,255,.22),0 0 26px rgba(0,209,255,.3)}
input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;padding:0 14px}
input::placeholder{color:#6E88AD}
input:focus{outline:none}
#send{border:0;cursor:pointer;font:600 .95rem Manrope,sans-serif;color:#02101F;padding:13px 22px;border-radius:3px;background:linear-gradient(100deg,#00D1FF,#4DA3FF);transition:box-shadow .2s,transform .2s}
#send:hover{box-shadow:0 0 26px rgba(0,209,255,.7);transform:translateY(-1px)}
#send:focus-visible{outline:2px solid #fff;outline-offset:2px}
#send[disabled]{opacity:.6;cursor:wait}
.msg{min-height:1.4em;margin:0;font:400 .88rem var(--mono);color:var(--cyan)}
.msg.err{color:#FF8A8A}

@keyframes boot{from{opacity:0;transform:scale(.88);filter:blur(10px)}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes in{to{opacity:1}}
@keyframes float{50%{transform:translateY(-7px)}}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(0,209,255,0)}0%{box-shadow:0 0 0 0 rgba(0,209,255,.6)}}
@keyframes flash{0%{opacity:0}18%{opacity:.95}100%{opacity:0}}
@keyframes glitch{0%,95%,100%{text-shadow:none;transform:none}96%{text-shadow:3px 0 #00D1FF,-3px 0 #0A6CFF;transform:translateX(2px)}97%{text-shadow:-3px 0 #00D1FF,3px 0 #0A6CFF;transform:translateX(-2px)}98%{text-shadow:none}}

@media (max-width:640px){
  .boot,.coords{display:none}
  .hud-bottom{justify-content:center}
  .right{justify-content:center}
  .row{flex-direction:column;border-radius:6px}
  input{padding:12px 14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .boot span{opacity:1}
}