html,
body {
  background: #200020;
}

#launch-presentation {
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #200020;
  pointer-events: auto;
  animation:
    launch-background 7.8s ease-in-out both,
    launch-hide 7.8s linear both;
}

#launch-presentation.is-hidden {
  display: none;
}

.launch-logo {
  position: relative;
  width: min(230px, 58vw);
  aspect-ratio: 103 / 33;
}

.launch-logo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}

.launch-logo-dark {
  animation: launch-logo-dark 7.8s ease-in-out both;
}

.launch-logo-light {
  animation: launch-logo-light 7.8s ease-in-out both;
}

@keyframes launch-background {
  0%,
  18% {
    background: #200020;
  }
  23%,
  42% {
    background: #000;
  }
  48%,
  79% {
    background: #fff;
  }
  84%,
  100% {
    background: #200020;
  }
}

@keyframes launch-hide {
  0%,
  96% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes launch-logo-dark {
  0%,
  49% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  52% {
    opacity: 1;
    clip-path: inset(0 100% 0 0);
  }
  72%,
  80% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
  85%,
  100% {
    opacity: 0;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes launch-logo-light {
  0%,
  83% {
    opacity: 0;
  }
  88%,
  94% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #launch-presentation,
  .launch-logo-dark,
  .launch-logo-light {
    animation-duration: 0.75s;
  }
}