html.intro-active .site-intro[hidden] {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid !important;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, #28493d, #122b22 72%);
  color: #e2c494;
  animation: intro-safety 1ms 1500ms forwards;
}

.site-intro__center {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 26px;
}

.site-intro__badge {
  position: relative;
  width: clamp(128px, 38vmin, 190px);
  aspect-ratio: 1;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #dfc698;
  border-radius: 28%;
  background: #fff9ef;
  box-shadow: 0 16px 48px #0c211a80;
  animation: intro-badge 500ms cubic-bezier(.22, .75, .25, 1) both;
}

.site-intro__badge img {
  position: absolute;
  inset: -9%;
  width: 118%;
  height: 118%;
  max-width: none;
  mix-blend-mode: multiply;
}

.site-intro__heart {
  position: absolute;
  font: 18px/1 Georgia, serif;
  opacity: 0;
  animation: intro-heart 880ms ease-out both;
}

.site-intro__heart--one { top: 22%; left: -29px; animation-delay: 100ms; }
.site-intro__heart--two { top: 11%; right: -24px; font-size: 14px; animation-delay: 220ms; }
.site-intro__heart--three { top: 58%; right: -32px; font-size: 12px; animation-delay: 310ms; }

.site-intro__track {
  width: 86px;
  height: 1px;
  overflow: hidden;
  background: #e2c49436;
}

.site-intro__track::before {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #bc9156, #f1d6a6);
  content: '';
  transform-origin: center left;
  animation: intro-line 1150ms cubic-bezier(.15, .64, .35, 1) both;
}

html.intro-revealing .site-intro[hidden] {
  opacity: 0;
  transition: opacity 280ms ease;
}

html.intro-revealing body > :is(.announcement, .header, main, footer) {
  animation: intro-content 280ms ease-out both;
}

@keyframes intro-badge {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes intro-heart {
  from { opacity: 0; transform: translateY(6px) scale(.88); }
  38% { opacity: .68; }
  to { opacity: 0; transform: translateY(-11px) scale(1.04); }
}

@keyframes intro-line {
  from { transform: scaleX(.08); }
  to { transform: scaleX(1); }
}

@keyframes intro-content {
  from { opacity: .92; }
  to { opacity: 1; }
}

@keyframes intro-safety {
  to { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  html.intro-active .site-intro[hidden] { display: none !important; }
  html.intro-revealing body > :is(.announcement, .header, main, footer) { animation: none; }
}