/* A brief brand entrance. CSS dismisses it even if JavaScript is unavailable. */
.site-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 8% 105%, rgb(115 36 66 / .085), transparent 52%),
    radial-gradient(ellipse at 95% 0%, rgb(191 151 163 / .12), transparent 48%),
    #faf8f5;
  animation: site-intro-leave .55s cubic-bezier(.4, 0, .2, 1) 2s both;
}

.site-intro::before,
.site-intro::after {
  content: '';
  position: absolute;
  width: 90vmax;
  height: 54vmax;
  border: 1px solid rgb(115 36 66 / .07);
  border-radius: 50%;
  pointer-events: none;
  transform: rotate(-32deg);
}

.site-intro::before { right: 55%; top: 48%; box-shadow: 0 0 0 24px rgb(115 36 66 / .016); }
.site-intro::after { left: 61%; bottom: 53%; box-shadow: 0 0 0 38px rgb(115 36 66 / .012); }
.site-intro__brand { position: relative; display: grid; justify-items: center; gap: 38px; }

.site-intro__logo {
  display: block;
  width: min(70vw, 440px);
  height: auto;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 12px 12px rgb(115 36 66 / .06));
  animation: site-intro-pulse 1.5s ease-in-out 2 both;
}

.site-intro__line { width: 88px; height: 2px; overflow: hidden; border-radius: 2px; background: rgb(115 36 66 / .1); }
.site-intro__line::after {
  content: '';
  display: block;
  width: 50%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #a46a81, #732442);
  animation: site-intro-trace 1.15s cubic-bezier(.4, 0, .2, 1) 3 both;
}

@keyframes site-intro-pulse {
  0%, 100% { opacity: .6; transform: scale(.98); }
  50% { opacity: 1; transform: scale(1.035); }
}

@keyframes site-intro-trace {
  from { transform: translateX(-110%); }
  to { transform: translateX(310%); }
}

@keyframes site-intro-leave {
  from { opacity: 1; visibility: visible; transform: translateY(0); }
  to { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-22px); }
}

@media (prefers-reduced-motion: reduce) {
  .site-intro { animation: none; visibility: hidden; pointer-events: none; }
  .site-intro__logo, .site-intro__line::after { animation: none; }
}