/* The start: a splash until the first screen is whole.
   One of the stylesheets index.html loads IN ORDER: a rule here may rely on coming
   after the files before it. */

/* --- the start: a splash until the first screen is whole (index.html, app.js boot) --- */
.splash {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  /* No background of its own: the body's glow shows through, in the right accent. */
  transition: opacity .35s ease;
}
/* The «+» button's own shape in the accent, breathing slowly — a sign of the app, not a
   spinner. */
.splash__mark {
  width: 56px; height: 56px;
  border-radius: 18px;
  background: var(--accent-face);
  box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--accent) 60%, transparent);
  animation: splash-breathe 1.4s ease-in-out infinite;
}
@keyframes splash-breathe {
  0%, 100% { transform: scale(.92); opacity: .75; }
  50% { transform: scale(1); opacity: 1; }
}
body:not(.is-booting) .splash { opacity: 0; pointer-events: none; }
/* No accent saved on this device (look.js): no guessing it. The mark is neutral and the
   glow waits — both take the real accent together with the screen. */
:root:not([data-look]) .splash__mark {
  background: color-mix(in srgb, var(--text) 22%, transparent);
  box-shadow: none;
}
:root:not([data-look]) body.is-booting { background-image: none; }
/* Behind the splash the screen is built invisibly, then rises into place in one piece. */
#app, body > nav { transition: opacity .35s ease, transform .35s cubic-bezier(.2, .8, .3, 1); }
body.is-booting #app,
body.is-booting > nav { opacity: 0; transform: translateY(8px); }
@media (prefers-reduced-motion: reduce) {
  .splash__mark { animation: none; }
  .splash, #app, body > nav { transition: none; }
}