/*
 * Start-up screen: shown by index.html before any script runs, and by the app itself while it checks the
 * session, so the first thing on screen is the brand on a calm background (never a blank page or bare text).
 * Plain CSS on purpose: it must work before the app's own styles have loaded.
 */
.splash {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #f6f7f9;
  z-index: 1000;
}
:root[data-theme='dark'] .splash { background: #0b1220; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']):not([data-theme='dark']) .splash { background: #0b1220; }
}
.splash-mark {
  display: grid;
  justify-items: center;
  gap: 22px;
  /* Appears only if start-up takes a moment: fast starts show just the plain background. */
  opacity: 0;
  animation: splash-in 0.4s ease-out 0.25s forwards;
}
.splash-mark img {
  width: 76px;
  height: 76px;
  border-radius: 22px;
  box-shadow: 0 12px 32px rgb(31 111 235 / 22%);
  animation: splash-breathe 2.4s ease-in-out 0.6s infinite;
}
.splash-bar {
  position: relative;
  width: 64px;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: rgb(31 111 235 / 14%);
}
.splash-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 40%;
  border-radius: 3px;
  background: #1f6feb;
  animation: splash-slide 1.1s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
@keyframes splash-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes splash-breathe { 50% { transform: scale(1.04); } }
@keyframes splash-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) {
  .splash-mark, .splash-mark img, .splash-bar::after { animation: none; opacity: 1; }
}