.site-intro:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: #f6f1ea;
  color: #b81025;
  pointer-events: none;
  animation: site-intro-exit 1.35s ease both;
}

.site-intro-wordmark {
  display: grid;
  transform: translateY(-1vh);
  font: 800 clamp(27px, 6vw, 64px)/1.1 Manrope, Arial, sans-serif;
  letter-spacing: -.045em;
}

.site-intro-wordmark span {
  grid-area: 1 / 1;
  animation: .76s cubic-bezier(.22, .61, .36, 1) both;
}

.site-intro-wordmark span:nth-child(1) { animation-name: site-intro-top; }
.site-intro-wordmark span:nth-child(2) { animation-name: site-intro-middle; animation-delay: .1s; }
.site-intro-wordmark span:nth-child(3) { animation-name: site-intro-bottom; animation-delay: .18s; }

@keyframes site-intro-top {
  from { clip-path: inset(0 100% 66% 0); }
  to { clip-path: inset(0 0 66% 0); }
}

@keyframes site-intro-middle {
  from { clip-path: inset(33% 0 33% 100%); }
  to { clip-path: inset(33% 0 33% 0); }
}

@keyframes site-intro-bottom {
  from { clip-path: inset(66% 100% 0 0); }
  to { clip-path: inset(66% 0 0 0); }
}

@keyframes site-intro-exit {
  0%, 76% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .site-intro:not([hidden]) { display: none; }
}