#site-shell {
  opacity: 1;
  transform: none;
}

.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: #fff;
  opacity: 1;
  visibility: visible;
  transition: opacity .8s ease, visibility .8s step-end;
}

.intro-video {
  display: block;
  width: min(720px, 84vw);
  height: min(720px, 84vh);
  object-fit: contain;
}

.intro-active { overflow: hidden; }
.intro-active #site-shell { opacity: 0; transform: translateY(10px); pointer-events: none; }
.intro-complete #site-shell { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s ease; }
.intro-complete .intro-overlay { opacity: 0; visibility: hidden; }

@media (max-width: 520px) {
  .intro-video { width: min(470px, 94vw); height: min(470px, 72vh); }
}