.site-intro { display: none; }
.intro-pending body { overflow: hidden; }
.intro-pending body > :not(.site-intro) { visibility: hidden; }
.intro-pending.intro-blending body > :not(.site-intro) { visibility: visible; }
.intro-pending .site-intro {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  background: #fffdf8;
}
.site-intro-content { width: min(720px, 100%); }
.intro-logo-stage { position: relative; }
.intro-logo-stage > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80svh;
  object-fit: contain;
}
.intro-logo-image { animation: intro-logo-load 1.8s ease-in-out both; }
.intro-closing .intro-logo-stage { animation: intro-logo-depart 1.7s cubic-bezier(.25,.1,.25,1) both; transform-origin: 50% 40%; }
.intro-closing .intro-logo-image { animation: none; clip-path: inset(0); }
.intro-blending .site-intro { animation: intro-screen-blend 1.7s cubic-bezier(.25,.1,.25,1) both; }
@keyframes intro-logo-load {
  from { clip-path: inset(100% 0 0 0); opacity: .15; transform: translateY(10px); }
  45% { opacity: .65; }
  to { clip-path: inset(0 0 0 0); opacity: 1; transform: translateY(0); }
}
@keyframes intro-logo-depart {
  from { transform: scale(1); }
  to { transform: scale(1.6); }
}
@keyframes intro-screen-blend { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .intro-logo-image, .intro-closing .intro-logo-stage, .intro-closing .site-intro, .intro-blending .site-intro { animation: none; }
}
@media (max-height: 520px) {
  .intro-logo-stage > img { max-height: 80svh; }
}