/* Render-blocking splash styles: available before React or the homepage paints. */
.splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background: #FAF8F6;
}

.splash[hidden] {
  display: none;
}

.splash img {
  display: block;
  width: min(75vw, 650px);
  height: auto;
  max-height: 75vh;
  object-fit: contain;
  opacity: 0;
}

.splash.is-ready img {
  animation: bloom-splash 2.5s linear both;
}

html.bloom-intro-active #root {
  visibility: hidden;
}

@keyframes bloom-splash {
  0% { opacity: 0; }
  20%, 80% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .splash.is-ready img {
    animation: none;
    opacity: 1;
  }
}