/* The launch splash (index.html #launch-splash) — mirrors iOS SplashView: the hero photo with the
   contrast floor (HeroContrastFloor) and the white mascot centred at logoMascotLarge (175pt).
   A plain file, not part of the bundle, so it applies before any JS has loaded.

   Installed launches only: in a browser tab a splash on every page load is a delay, not a
   brand moment. src/shell/launchSplash.ts removes the node either way. */
#launch-splash {
  display: none;
}

@media (display-mode: standalone) {
  #launch-splash {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
      linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.12) 55%,
        rgba(0, 0, 0, 0.32) 100%
      ),
      #556a64 url("/brand/photo-hero.jpg") center / cover no-repeat;
    background-blend-mode: multiply, normal;
    transition: opacity 0.35s ease-out;
  }
}

#launch-splash.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.launch-splash__mascot {
  height: 175px;
  width: auto;
  animation: launch-splash-in 0.5s ease-out both;
}

@keyframes launch-splash-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  #launch-splash {
    transition: none;
  }

  .launch-splash__mascot {
    animation: none;
  }
}