#site-loader{position:fixed;inset:0;z-index:99999;overflow:hidden;transition:opacity .7s ease,visibility .7s ease}
#site-loader.loaded{opacity:0;visibility:hidden;pointer-events:none}
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --bg:#06090f;
  --text:#f5f7fb;
  --muted:#657080;
  --line:rgba(66,111,161,.18);
  --blue:#0878ff;
  --cyan:#32e6ff;
}

*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;scrollbar-gutter:stable}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"DM Sans",sans-serif;
}

.loader{
  min-height:100svh;
  position:relative;
  display:grid;
  place-items:center;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 44%,rgba(0,119,255,.09),transparent 25%),
    radial-gradient(circle at 82% 18%,rgba(50,230,255,.045),transparent 25%),
    #06090f;
}

.grid{
  position:absolute;
  inset:-30%;
  z-index:-2;
  opacity:.45;
  background-image:
    linear-gradient(rgba(60,110,165,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(60,110,165,.075) 1px,transparent 1px);
  background-size:46px 46px;
  transform:perspective(700px) rotateX(63deg) translateY(18%);
  transform-origin:center bottom;
  mask-image:linear-gradient(to bottom,transparent 0%,black 38%,black 80%,transparent 100%);
}

.ambient{
  position:absolute;
  width:45vw;
  height:45vw;
  border-radius:50%;
  filter:blur(100px);
  pointer-events:none;
  z-index:-1;
}
.ambient-one{
  background:#006cff;
  opacity:.055;
  top:-25vw;
  right:-10vw;
}
.ambient-two{
  background:#00d9ff;
  opacity:.035;
  bottom:-30vw;
  left:-15vw;
}

.loader-stage{
  position:absolute;
  top:50%;
  left:50%;
  width:min(72vw,560px);
  aspect-ratio:1;
  transform:translate(-50%,-58%);
  display:grid;
  place-items:center;
}

.logo-wrap{
  position:relative;
  width:min(34vw,205px);
  min-width:125px;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  animation:logoFloat 3.8s ease-in-out infinite;
}

.logo-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
  position:relative;
  z-index:2;
  filter:drop-shadow(0 0 18px rgba(0,125,255,.25));
}

.logo-glow{
  position:absolute;
  inset:7%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,135,255,.42),rgba(0,135,255,.09) 43%,transparent 72%);
  filter:blur(13px);
  animation:glow 2.7s ease-in-out infinite;
}

.orbit{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(80,155,220,.18);
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.orbit-one{
  width:100%;
  height:31%;
  transform:translate(-50%,-50%) rotate(-26deg);
  animation:spinOne 13s linear infinite;
}
.orbit-two{
  width:65%;
  height:96%;
  transform:translate(-50%,-50%) rotate(37deg);
  border-color:rgba(0,126,255,.18);
  animation:spinTwo 17s linear infinite reverse;
}
.orbit-three{
  width:112%;
  height:53%;
  transform:translate(-50%,-50%) rotate(64deg);
  border-color:rgba(50,230,255,.12);
  animation:spinThree 21s linear infinite;
}

.node{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 14px rgba(50,230,255,.9);
}
.node-one{top:18%;right:8%}
.node-two{bottom:14%;left:8%;width:5px;height:5px;background:var(--blue)}
.node-three{top:66%;right:1%;width:5px;height:5px;background:#fff}

.loader-info{
  position:absolute;
  left:50%;
  bottom:8.5vh;
  transform:translateX(-50%);
  width:min(380px,calc(100% - 40px));
}

.brand-line{
  display:flex;
  align-items:baseline;
  gap:10px;
  justify-content:center;
  letter-spacing:2.4px;
}
.brand-name{
  font-size:14px;
  font-weight:700;
}
.brand-sub{
  color:var(--cyan);
  font:10px "Space Mono",monospace;
  letter-spacing:2.8px;
}

.loader-info p{
  margin:14px 0 10px;
  text-align:center;
  color:var(--muted);
  font:10px "Space Mono",monospace;
  letter-spacing:1.2px;
  text-transform:uppercase;
}

.progress{
  height:2px;
  width:100%;
  background:rgba(91,123,155,.15);
  overflow:hidden;
  border-radius:100px;
}
.progress span{
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  box-shadow:0 0 12px rgba(50,230,255,.7);
  transition:width .12s linear;
}

.loader-meta{
  margin-top:8px;
  display:flex;
  justify-content:space-between;
  color:#414b59;
  font:8px "Space Mono",monospace;
  letter-spacing:1px;
}
.loader-meta span:first-child{color:#6d7888}

@keyframes logoFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
@keyframes glow{
  0%,100%{transform:scale(.88);opacity:.65}
  50%{transform:scale(1.08);opacity:1}
}
@keyframes spinOne{to{transform:translate(-50%,-50%) rotate(334deg)}}
@keyframes spinTwo{to{transform:translate(-50%,-50%) rotate(-323deg)}}
@keyframes spinThree{to{transform:translate(-50%,-50%) rotate(424deg)}}

@media(max-width:640px){
  .loader-stage{width:88vw;transform:translate(-50%,-58%)}
  .logo-wrap{width:39vw;min-width:125px}
  .loader-info{bottom:7vh;width:calc(100% - 48px)}
  .brand-line{gap:8px}
  .brand-name{font-size:12px}
  .brand-sub{font-size:8px}
  .loader-info p{font-size:8px}
  .loader-meta{font-size:7px}
}

@media(prefers-reduced-motion:reduce){
  .logo-wrap,.logo-glow,.orbit{animation:none}
}