: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);
}

#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;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

#globalLoader .title,
#globalLoader .sub{
  text-align:center;
  width:100%;
  max-width:520px;
  opacity:0;
  font-style:italic;
  transform:translateX(var(--loader-enter-x)) skewX(var(--loader-skew));
  will-change:transform, opacity, filter;
  line-height:1;
}

#globalLoader .title{
  font-weight:800;
  font-size:40px;
  letter-spacing:0em;
  text-transform:uppercase;
  font-stretch:200%;
  margin:0;
}

#globalLoader .sub{
  font-weight:800;
  margin:0;
  font-size:15px;
  opacity:0;
}

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

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

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

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

@keyframes loaderBullet{
  from{transform:translateX(var(--loader-center-x)) skewX(var(--loader-skew));filter:blur(0);}
  to{transform:translateX(var(--loader-settle-x)) skewX(var(--loader-skew));filter:blur(0);}
}

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