.launch-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
  color: #f5fafb;
  background:
    radial-gradient(ellipse at 63% 36%, #12515b45, transparent 48%),
    linear-gradient(152deg, #0b2733 0%, #071b28 37%, #06131e 68%, #081c25 100%);
  transition: opacity 110ms ease-out;
}
.launch-screen::before,
.launch-screen::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: max(145vmax, 700px);
  height: 85vmax;
  transform: rotate(-34deg);
  pointer-events: none;
}
.launch-screen::before {
  bottom: 86%;
  right: -43vmax;
  border-bottom: 1px solid #74bdc323;
  box-shadow: 0 11px 0 -10px #77dce824;
  background: linear-gradient(to top, #36738312, transparent 19%);
}
.launch-screen::after {
  top: 86%;
  left: -30vmax;
  border-top: 1px solid #54909229;
  box-shadow: 0 -13px 0 -12px #36738328;
  background: linear-gradient(to bottom, #17465457, transparent 30%);
}
.launch-lockup {
  position: relative;
  width: 100%;
  text-align: center;
  transform: translateY(-2.4vh);
}
.launch-art {
  position: relative;
  width: min(92vw, 420px);
  aspect-ratio: 420 / 275;
  margin: 0 auto;
}
.launch-art svg { display: block; width: 100%; height: 100%; fill: none; }
.launch-flight { stroke: #ffdc8f; stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 7 115; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .launch-screen:not(.from-native-art) .launch-art { transform: translate(-7px, 5px) rotate(-1.3deg); }
  .launch-screen:not(.from-native-art) .launch-letter { transform: translateY(20px); }
  .launch-screen.is-playing:not(.from-native-art) .launch-art { animation: launch-delivery .44s cubic-bezier(.16,.84,.24,1) both; }
  .launch-screen.is-playing:not(.from-native-art) .launch-letter { animation: launch-letter .44s cubic-bezier(.22,.8,.25,1) both; }
  .launch-screen.is-playing .launch-flight { animation: launch-flight .5s ease-out both; }
}
@keyframes launch-delivery {
  from { transform: translate(-7px, 5px) rotate(-1.3deg); }
  to { transform: none; }
}
@keyframes launch-letter {
  from { transform: translateY(20px); }
  to { transform: none; }
}
@keyframes launch-flight {
  0% { opacity: 0; stroke-dashoffset: 10; }
  15% { opacity: .95; }
  75% { opacity: .8; }
  100% { opacity: 0; stroke-dashoffset: -100; }
}
.launch-product {
  margin-top: -2px;
  font: 580 clamp(51px, 13vw, 71px)/1.04 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.065em;
}
.launch-wordmark {
  margin: 14px 0 0;
  font: 400 18px/1 "ELGATEC Display", Arial, sans-serif;
  font-synthesis: none;
  letter-spacing: 0;
  color: #d2e0e5;
}
.launch-wordmark span { color: #ffce44; }
.launch-screen.is-leaving { opacity: 0; pointer-events: none; }
@media (max-height: 500px) and (orientation: landscape) {
  .launch-lockup { transform: none; }
  .launch-art { width: min(53vh, 240px); }
  .launch-product { font-size: 43px; }
  .launch-wordmark { margin-top: 8px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .launch-screen { transition: none; }
}