/* Launch only. The logos and colour tokens inside the app are independent. */
.app-launch {
  position: fixed;
  inset: 0 auto 0 0;
  box-sizing: border-box;
  width: 100vw;
  z-index: 10000;
  padding: env(safe-area-inset-top) 24px env(safe-area-inset-bottom);
  background: #fdfaf0;
  opacity: 1;
  transition: opacity 200ms ease-out;
}
.app-launch.is-leaving {
  opacity: 0;
  pointer-events: none;
}
.app-launch-artwork {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(80vw, 320px);
  aspect-ratio: 1;
  /* Keep the emblem at the system splash's centre as its wordmark appears.
     Source branch frame centre: (689.5, 530.5) in the 1254px artwork.
     At 390px wide the branch is ~122px tall, close to Android's 192dp
     visible adaptive plate × the native foreground's 45.81/72 ratio. */
  transform: translate(-54.984%, -42.305%);
}
.app-launch-logo {
  display: block;
  width: 100%;
  height: auto;
}
.app-launch-indicator {
  position: absolute;
  /* The sprout ends at source y=1010/1254. */
  top: calc(80.55% + 24px);
  left: 54.984%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
  background: #167d8d26;
}
.app-launch-indicator::after {
  content: "";
  display: block;
  width: 50%;
  height: 100%;
  border-radius: inherit;
  background: #167d8d;
  animation: launch-progress 1.2s ease-in-out infinite alternate;
}
.app-launch noscript {
  position: absolute;
  top: calc(100% + 24px);
  width: 100%;
  color: #162d4d;
  font: 14px/1.5 system-ui, sans-serif;
  text-align: center;
}
@keyframes launch-progress {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .app-launch { transition: none; }
  .app-launch-indicator::after { animation: none; }
}