/* Covers the page's <main> so the menu stays usable; the login page uses the whole screen (.splash--full) */
main { position: relative; }
.splash {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s;
}
.splash--full {
  position: fixed;
  z-index: 1000;
  justify-content: center;
}
.splash.is-visible {
  opacity: 1;
  visibility: visible;
  transition: none; /* shows at once on a click; only the hide fades */
}
.splash-logo {
  width: 48px;
  height: 48px;
  border-radius: 22%;
  position: sticky;
  top: 40vh;
  margin-top: 40vh;
  animation: splash-pulse 1.4s ease-in-out infinite;
}
.splash--full .splash-logo { position: static; margin-top: 0; }
@keyframes splash-pulse {
  50% { opacity: .45; }
}
/* Failsafe: if JS never hides the boot splash, hide it after 6s. */
.splash--boot {
  animation: splash-failsafe 0s linear 6s forwards;
}
@keyframes splash-failsafe {
  to { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .splash { transition: none; }
  .splash-logo { animation: none; }
}