/* The launch opens from the circuit's terminal into the same paper as the
   walkthrough. Navigation remains a single ordinary server request. */
.demo-launch.is-launching {
  --trace-progress: 0;
  --terminal-color: #b45a37;
  --halo-opacity: 0.45;
  --arrow-background: #b45a37;
  --arrow-color: #fbf5f3;
  transform: none;
  pointer-events: none;
}

.demo-launch.is-launching :is(.launch-trace, .launch-terminals, .launch-halo) {
  --draw-delay: 0s;
  transition-duration: 180ms;
}

.demo-launch.is-launching .launch-signal { animation: none; }

.launch-curtain {
  position: fixed;
  z-index: 100;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
  pointer-events: auto;
}

@property --launch-radius {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

/* A feathered edge blends into the page instead of drawing another ring. */
.launch-curtain.is-feathered {
  mask-image: radial-gradient(circle at var(--launch-x) var(--launch-y),
    #000 calc(var(--launch-radius) - 36px),
    transparent calc(var(--launch-radius) + 36px));
}

/* Set in the nonce-protected head before the new document can paint. */
html[data-launch-arrival]::before {
  content: "";
  position: fixed;
  z-index: 100;
  inset: 0;
  background: var(--paper);
  pointer-events: none;
  animation: launch-paper-arrive 260ms cubic-bezier(.2,.65,.25,1) both;
}

/* Fade only the paper overlay. A transform on .page-turns would create a new
   containing block for its fixed arrows and move them away from the viewport. */
@keyframes launch-paper-arrive { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html[data-launch-arrival]::before { display: none; }
}