/*
 * Splash shown from the first paint, before any JS runs (frontend-plan §2.9). Linked from <head> instead of an
 * inline <style> so the page needs no `style-src 'unsafe-inline'`. The colours are the `--color-bg` fallbacks
 * of both themes; `AppSplash` removes the element with a 150 ms fade once the boot gates settle.
 */
#app-splash {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  transition: opacity 150ms ease-out;
}

:root[data-theme="dark"] #app-splash {
  background: #15181d;
}

/* The Cifra logo is portrait (207 × 231) and carries the product name: tall enough for the word to read. */
#app-splash img {
  width: auto;
  height: 96px;
  user-select: none;
  animation: appSplashLogoIn 400ms ease-out both;
}

#app-splash.app-splash--hidden {
  opacity: 0;
  pointer-events: none;
}

@keyframes appSplashLogoIn {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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