.site-loader{
  position:fixed;
  inset:0;
  z-index:99999;

  display:flex;
  justify-content:center;
  align-items:center;

  background:#030711;

  transition:
    opacity .8s ease,
    visibility .8s ease;
}

.site-loader.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.loader-mark{
  text-align:center;
}

.loader-logo{
  width:192px;
  height:auto;
  display:block;
  margin:0 auto;

  opacity:0;
  transform:translateY(10px);
  animation:logoReveal .8s ease forwards;
}

.loader-name{
  margin-top:1px;

  display:flex;
  flex-direction:column;
  align-items:center;

  opacity:0;
  animation:nameReveal .8s ease .8s forwards;
}

.brand{
  font-size:22px;
  font-weight:600;
  line-height:1;
  letter-spacing:-0.03em;

  color:#ffffff;
}

.studios{
  margin-top:6px;

  font-size:10px;
  font-weight:500;
  line-height:1;
  letter-spacing:.45em;
  text-transform:uppercase;

  color:rgba(255,255,255,.45);
}

@keyframes logoReveal{
  to{
    opacity:1;
    transform:none;
  }
}

@keyframes nameReveal{
  to{
    opacity:1;
  }
}