.bar-loading{
  position:fixed;inset:0;z-index:99999999;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(30,215,96,.10) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 80%, rgba(30,215,96,.04) 0%, transparent 60%),
    #050505;
  display:flex;align-items:center;justify-content:center;
  opacity:1;transition:opacity .45s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.bar-loading.hide{opacity:0;pointer-events:none}

.loader-content{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;width:280px;position:relative;
}

.splash-orbit{
  
  position:absolute;top:80px;left:50%;
  transform:translate(-50%, -50%);
  width:240px;height:240px;
  pointer-events:none;
}
.splash-glow{
  
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    transparent 0%,
    transparent 55%,
    rgba(30,215,96,.22) 70%,
    rgba(30,215,96,.10) 82%,
    transparent 100%);
  filter:blur(18px);
  animation:splash-glow-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events:none;
}
.splash-ring{
  position:absolute;inset:0;border-radius:50%;
  
  background:conic-gradient(from 0deg,
    rgba(30,215,96,0) 0%,
    rgba(30,215,96,.85) 18%,
    rgba(154,255,140,.95) 28%,
    rgba(30,215,96,0) 45%,
    rgba(30,215,96,0) 100%);
  -webkit-mask:radial-gradient(circle, transparent 47%, black 49%, black 50%, transparent 52%);
          mask:radial-gradient(circle, transparent 47%, black 49%, black 50%, transparent 52%);
  filter:drop-shadow(0 0 8px rgba(30,215,96,.45));
  opacity:0;
  animation:splash-ring-fadein .8s ease forwards .2s, splash-ring-spin 4s linear infinite .2s;
}
.splash-ring-inner{
  inset:30px;
  background:conic-gradient(from 180deg,
    rgba(30,215,96,0) 0%,
    rgba(30,215,96,.7) 22%,
    rgba(120,255,170,.9) 32%,
    rgba(30,215,96,0) 50%,
    rgba(30,215,96,0) 100%);
  -webkit-mask:radial-gradient(circle, transparent 44%, black 46%, black 48%, transparent 50%);
          mask:radial-gradient(circle, transparent 44%, black 46%, black 48%, transparent 50%);
  animation:splash-ring-fadein .8s ease forwards .35s, splash-ring-spin-rev 2.6s linear infinite .35s;
}

@keyframes splash-glow-pulse{
  0%,100%{opacity:.55;transform:scale(1)}
  50%{opacity:1;transform:scale(1.08)}
}
@keyframes splash-ring-fadein{
  to{opacity:1}
}
@keyframes splash-ring-spin{
  to{transform:rotate(360deg)}
}
@keyframes splash-ring-spin-rev{
  to{transform:rotate(-360deg)}
}

.bar-loading h1{
  margin:0;width:160px;height:160px;
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:2;
}
.splashLogo{
  width:140px;max-height:120px;
  display:flex;align-items:center;justify-content:center;
  opacity:0;
  animation:splash-logo-in .6s cubic-bezier(.4,0,.2,1) forwards .15s,
            splash-logo-breath 2.4s cubic-bezier(.4,0,.2,1) infinite .75s;
}
.splashLogo img{
  max-height:120px;max-width:100%;
  
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.55));
}
.bar-loading.ready .splashLogo{opacity:1}

@keyframes splash-logo-in{
  from{opacity:0;transform:scale(.85)}
  to  {opacity:1;transform:scale(1)}
}
@keyframes splash-logo-breath{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.045)}
}

.splash-wordmark{
  font-family:'Inter',system-ui,sans-serif;
  font-size:11px;font-weight:300;
  letter-spacing:.5em;color:rgba(255,255,255,.55);
  text-indent:.5em; 
  opacity:0;
  animation:splash-word-in .8s ease forwards 1.2s;
}
@keyframes splash-word-in{
  from{opacity:0;transform:translateY(4px)}
  to  {opacity:1;transform:translateY(0)}
}

.progress-container{
  position:relative;width:200px;height:3px;margin:0 auto;
  background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;
}
.progress-bar{
  position:absolute;left:0;top:0;height:100%;
  background:linear-gradient(90deg,#1ed760 0%,#9aff8c 100%);
  border-radius:2px;transition:width .25s cubic-bezier(.4,0,.2,1);
  width:0;
  box-shadow:0 0 12px rgba(30,215,96,.5);
}
.progress-gap,.unfilled-bar{display:none}

@media (max-width:880px){
  .loader-content{width:220px;gap:18px}
  .splash-orbit{width:200px;height:200px;top:65px;transform:translate(-50%, -50%)}
  .splash-ring-inner{inset:26px}
  .bar-loading h1{width:130px;height:130px}
  .splashLogo{width:110px;max-height:100px}
  .splashLogo img{max-height:100px}
  .progress-container{width:160px;height:3px}
}

@media (prefers-reduced-motion:reduce){
  .splash-ring,.splash-glow,.splashLogo{
    animation-duration:0s,0s !important;
    animation-iteration-count:1 !important;
  }
}