.app-launch { display: none; }
:root[data-app-launch="true"] .app-launch {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 30;
  overflow: hidden; perspective: 1200px; isolation: isolate;
  animation: launch-finish 1050ms step-end forwards;
}
.launch-door { position: absolute; inset-block: 0; width: calc(50% + 1px); background: var(--page); backface-visibility: hidden; }
.launch-door-left { left: 0; transform-origin: left center; animation: launch-left 850ms 150ms cubic-bezier(.76, 0, .24, 1) both; }
.launch-door-right { right: 0; transform-origin: right center; animation: launch-right 850ms 150ms cubic-bezier(.76, 0, .24, 1) both; }
.launch-door::after { content: ''; position: absolute; inset-block: 15%; width: 1px; background: linear-gradient(transparent, var(--line) 30%, var(--line) 70%, transparent); }
.launch-door-left::after { right: 0; }
.launch-door-right::after { left: 0; }
@keyframes launch-left { to { transform: translateX(-102%) rotateY(-12deg); } }
@keyframes launch-right { to { transform: translateX(102%) rotateY(12deg); } }
@keyframes launch-finish { to { visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) {
  :root[data-app-launch="true"] .app-launch { animation-duration: 180ms; }
  .launch-door { animation: none; }
  .launch-door::after { display: none; }
}