.site-intro {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: var(--color-bg);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.24s ease-out;
}

.site-intro--closing {
  opacity: 0;
}

.site-intro__logo {
  width: min(calc(100vw - 2rem), 23rem);
  --brand-animation-width: 23rem;
  --brand-animation-height: 7.1rem;
  --brand-animation-letter-width: 3.75rem;
  --brand-animation-scale: 0.88;
  --brand-animation-width-mobile: 16.8rem;
  --brand-animation-height-mobile: 5.3rem;
  --brand-animation-letter-width-mobile: 2.8rem;
  --brand-animation-scale-mobile: 0.68;
  --brand-animation-site-intro-duration: 1.05s;
  justify-self: center;
  align-self: center;
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.24s ease-out,
    transform 0.24s ease-out;
}

.site-intro--closing .site-intro__logo {
  opacity: 0;
  transform: scale(0.985);
}