/* A brief brand signature on the first arrival in this tab. */
.site-intro {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: var(--paper, #fcfaf6);
  pointer-events: none;
}

.site-intro[hidden] { display: none !important; }

.intro-mark {
  display: grid;
  justify-items: center;
  gap: 22px;
  transform: translateY(-8px);
}

.intro-mark img {
  display: block;
  width: 190px;
  height: auto;
}

.intro-rule {
  display: block;
  width: 62px;
  height: 1px;
  background: var(--gold, #827354);
  transform-origin: center;
}

.site-intro.is-visible {
  animation: parish-intro-veil 850ms cubic-bezier(.22, .61, .36, 1) both;
}

.site-intro.is-visible .intro-mark {
  animation: parish-intro-mark 850ms cubic-bezier(.22, .61, .36, 1) both;
}

.site-intro.is-visible .intro-rule {
  animation: parish-intro-rule 850ms cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes parish-intro-veil {
  0%, 42% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes parish-intro-mark {
  0% { opacity: 0; transform: translateY(-2px) scale(.98); }
  30%, 100% { opacity: 1; transform: translateY(-8px) scale(1); }
}

@keyframes parish-intro-rule {
  0%, 12% { opacity: 0; transform: scaleX(.35); }
  42%, 100% { opacity: .72; transform: scaleX(1); }
}

@media (max-width: 760px) {
  .intro-mark { gap: 18px; }
  .intro-mark img { width: 168px; }
  .intro-rule { width: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-intro { display: none !important; }
}