.draw-launch-transition {
  --launch-top: 50vh;
  --launch-right: 50vw;
  --launch-bottom: 50vh;
  --launch-left: 50vw;
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  visibility: hidden;
  clip-path: inset(var(--launch-top) var(--launch-right) var(--launch-bottom) var(--launch-left) round 0);
  color: #f4f4f0;
  background: radial-gradient(circle at 77% 22%, rgba(255,255,255,.075), transparent 30%), radial-gradient(circle at 18% 84%, rgba(255,255,255,.035), transparent 32%), #080808;
  transition: clip-path 820ms cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}

.draw-launch-transition::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.draw-launch-transition.prepared { visibility: visible; }
.draw-launch-transition.active { clip-path: inset(0 0 0 0 round 0); }
.draw-launch-orbit { position: absolute; width: min(68vw, 680px); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.075); border-radius: 50%; box-shadow: 0 0 90px rgba(255,255,255,.035), inset 0 0 90px rgba(255,255,255,.018); opacity: 0; transform: scale(.88); transition: opacity 520ms ease 170ms, transform 820ms cubic-bezier(.16, 1, .3, 1); }
.active .draw-launch-orbit { opacity: 1; transform: scale(1); }
.draw-launch-content { position: relative; width: min(780px, 88vw); opacity: 0; transform: translateY(16px); transition: opacity 420ms ease 250ms, transform 700ms cubic-bezier(.16, 1, .3, 1) 180ms; }
.active .draw-launch-content { opacity: 1; transform: none; }
.draw-launch-content p { margin: 0 0 clamp(52px, 10vh, 112px); color: #8d8e91; font-size: 10px; font-weight: 700; letter-spacing: .24em; }
.draw-launch-content h2 { max-width: 100%; margin: 0; overflow-wrap: anywhere; font-size: clamp(38px, 8vw, 96px); font-weight: 560; line-height: .98; letter-spacing: -.065em; text-shadow: 0 0 34px rgba(255,255,255,.1); }
.draw-launch-content small { display: block; margin: 22px 0 clamp(42px, 8vh, 78px); color: #a8a9ab; font-size: clamp(12px, 1.6vw, 15px); letter-spacing: .14em; }
.draw-launch-line { display: block; height: 1px; overflow: hidden; background: rgba(255,255,255,.14); }
.draw-launch-line i { display: block; width: 34%; height: 3px; transform: translate(-100%, -1px); background: #f1f1ec; box-shadow: 0 0 16px rgba(255,255,255,.58); animation: draw-launch-progress 1.4s cubic-bezier(.16, 1, .3, 1) infinite; }

@keyframes draw-launch-progress { to { transform: translate(294%, -1px); } }

@media (prefers-reduced-motion: reduce) {
  .draw-launch-transition,
  .draw-launch-orbit,
  .draw-launch-content { transition-duration: .01ms !important; }
  .draw-launch-line i { animation: none; transform: translate(0, -1px); }
}