.noir-boot-screen {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  /* Shopify's published theme uses a 10px base at 100% body scale. */
  font-size: 10px;
  background: #000;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition:
    opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 620ms;
}

.noir-boot-screen__logo {
  display: block;
  width: clamp(4.8em, 8vw, 7.2em);
  height: auto;
  opacity: 0;
  transform: translateY(0.8em) scale(0.88);
  animation: noir-boot-logo-in 1050ms cubic-bezier(0.22, 1, 0.36, 1) 120ms forwards;
  transition:
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 520ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
}

.noir-boot-screen.is-leaving .noir-boot-screen__logo {
  opacity: 0;
  transform: translateY(-0.4em) scale(0.96);
  filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  animation: none;
}

.noir-boot-screen.is-leaving {
  opacity: 0;
  visibility: visible;
}

html.noir-booting,
html.noir-booting body {
  background: #000 !important;
}

html.noir-booting body > *:not(#noir-boot-screen) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@keyframes noir-boot-logo-in {
  from {
    opacity: 0;
    transform: translateY(0.8em) scale(0.88);
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }

  36% {
    opacity: 1;
    transform: translateY(0) scale(1.02);
    filter: drop-shadow(0 0 2em rgba(255, 255, 255, 0.48));
  }

  58% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 1.15em rgba(255, 255, 255, 0.22));
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 0.65em rgba(255, 255, 255, 0.13));
  }
}

@media (prefers-reduced-motion: reduce) {
  .noir-boot-screen {
    transition-duration: 140ms;
    transition-timing-function: linear;
    transition-delay: 0s;
  }

  .noir-boot-screen__logo {
    opacity: 1;
    transform: none;
    filter:
      drop-shadow(0 0 1em rgba(255, 255, 255, 0.42))
      drop-shadow(0 0 2em rgba(255, 255, 255, 0.22));
    animation: none;
    transition-duration: 140ms;
    transition-timing-function: linear;
  }
}