.veil {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

html.is-arriving .veil { opacity: 1; }

html.is-arriving.is-shown .veil {
  opacity: 0;
  transition: opacity 0.7s ease;
}

body.is-leaving-in,
body.is-leaving-out { overflow: hidden; }

body.is-leaving-in .veil,
body.is-leaving-out .veil,
html.is-arriving.is-shown body.is-leaving-in .veil,
html.is-arriving.is-shown body.is-leaving-out .veil {
  opacity: 1;
  transition: opacity 0.9s ease;
}

.room {
  transform-origin: center center;
  transition: transform 0.9s ease;
}

.stage,
.topbar,
.panel,
.toasts,
.desktop-note {
  transform-origin: center center;
}

body.is-leaving-out .stage,
body.is-leaving-out .topbar,
body.is-leaving-out .panel,
body.is-leaving-out .toasts,
body.is-leaving-out .desktop-note {
  transform: scale(0.6);
  transition: transform 0.9s ease;
}