/* Launch splash - keep logo size in sync with inline styles in index.html */

:root {
  --launch-logo-size: min(40vw, 168px);
}

body:has(#app-splash) {
  background-color: #000000;
}

.app-splash-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000000;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.app-splash-screen__logo {
  display: block;
  width: var(--launch-logo-size);
  height: var(--launch-logo-size);
  object-fit: contain;
}

.app-splash-screen--hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}