.app-intro {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  pointer-events: none;
}
.app-intro-vector {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(66vw, 300px);
  aspect-ratio: 66 / 40;
  transform: translate(-50%, -50%);
  transform-origin: 0 0;
}
html[data-app-intro="playing"] .app-intro-vector { will-change: transform; }
.app-intro-vector > :is(img, svg) {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
html[data-app-intro] .app-intro { display: block; }
html:is([data-app-intro="pending"], [data-app-intro="playing"]) :is(.auth-shell > .screen, .page-footer) {
  opacity: 0;
  visibility: hidden;
}
html[data-app-intro="pending"] .app-mark { visibility: hidden; }
html[data-app-intro="playing"] .app-mark {
  opacity: var(--intro-tile-opacity, 0);
  pointer-events: none;
}
html:is([data-app-intro="pending"], [data-app-intro="playing"]) .app-mark > img { visibility: hidden; }
html[data-app-intro="revealing"] .app-intro { display: none; }
html[data-app-intro="revealing"] :is(.auth-shell > .screen, .page-footer) {
  animation: app-intro-reveal 250ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes app-intro-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-app-intro] .app-intro { display: none; }
  html[data-app-intro] :is(.auth-shell > .screen, .app-mark, .page-footer) {
    opacity: 1;
    visibility: visible;
    animation: none;
  }
  html[data-app-intro] .app-mark > img { visibility: visible; }
}