:root{
  --loader-glass-bg:rgba(10,14,20,.55);
  --loader-glass-tint:rgba(255,255,255,.06);
  --loader-accent:#3b82f6;
  --loader-skew:-12deg;

  --loader-enter-x:-110vw;
  --loader-center-x:-8vw;
  --loader-settle-x:14px;
  --loader-exit-x:110vw;

  --loader-in-dur:.30s;
  --loader-in-ease:cubic-bezier(.12,1,.18,1);

  --loader-title-bg:#22c55e;
  --loader-title-bg-skew:-16deg;
  --loader-title-pad-y:.18em;
  --loader-title-pad-x:.70em;
}

#globalLoader{
  position:fixed;
  inset:0;
  z-index:10001;
  display:none;
  place-items:center;
  background:transparent;
  opacity:0;
  transition:opacity .22s ease;
  pointer-events:none;
}

#globalLoader.active{
  display:grid;
  opacity:1;
  pointer-events:auto;
}

#globalLoader .loader-card{
  position:absolute;
  inset:0;
  width:100vw;
  height:100vh;
  background:
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.45)),
    var(--loader-glass-bg);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  box-shadow:inset 0 0 0 1px var(--loader-glass-tint);
  border:none;
  padding:0;
  color:#e6edf3;
}

#globalLoader .title{
  position:absolute;
  top:50%;
  left:50%;
  transform:translateX(var(--loader-enter-x)) translate(-50%, -50%) skewX(var(--loader-skew));
  opacity:0;
  font-style:italic;
  font-weight:800;
  font-size:40px;
  letter-spacing:0em;
  text-transform:uppercase;
  font-stretch:200%;
  margin:0;
  padding:var(--loader-title-pad-y) var(--loader-title-pad-x);
  will-change:transform, opacity, filter;
  line-height:1;
}

#globalLoader .title::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--loader-title-bg);
  transform:skewX(var(--loader-title-bg-skew));
  z-index:-1;
}

#globalLoader .sub{
  position:absolute;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  font-style:italic;
  font-weight:800;
  font-size:15px;
  opacity:.9;
  margin:0;
  white-space:nowrap;
}

#globalLoader.active .title{
  animation:
    loaderTextIn var(--loader-in-dur) var(--loader-in-ease) both,
    loaderBullet 6.2s linear var(--loader-in-dur) both;
}

#globalLoader.exiting .title{
  animation:loaderTextOutRight .32s cubic-bezier(.2,.9,.2,1) forwards;
}

@keyframes loaderTextIn{
  from{
    transform:translateX(var(--loader-enter-x)) translate(-50%, -50%) skewX(var(--loader-skew));
    opacity:0;
  }
  to{
    transform:translateX(var(--loader-center-x)) translate(-50%, -50%) skewX(var(--loader-skew));
    opacity:1;
  }
}

@keyframes loaderBullet{
  from{
    transform:translateX(var(--loader-center-x)) translate(-50%, -50%) skewX(var(--loader-skew));
  }
  to{
    transform:translateX(var(--loader-settle-x)) translate(-50%, -50%) skewX(var(--loader-skew));
  }
}

@keyframes loaderTextOutRight{
  from{
    transform:translateX(var(--loader-settle-x)) translate(-50%, -50%) skewX(var(--loader-skew));
    opacity:1;
  }
  to{
    transform:translateX(var(--loader-exit-x)) translate(-50%, -50%) skewX(var(--loader-skew));
    opacity:0;
  }
}