/* First paint while the app bundle loads: sits inside #root and is replaced as soon as React renders.
   Same colour as the PWA's launch screen (manifest background_color) so the hand-over is seamless. */
#boot-splash {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: #09090b;
}
#boot-splash .bs-wrap { position: relative; width: 112px; height: 112px; display: grid; place-items: center; }
#boot-splash .bs-logo {
  width: 96px; height: 96px; border-radius: 26px;
  animation: bs-in .7s cubic-bezier(.2,.8,.2,1) both, bs-breathe 2.4s ease-in-out .7s infinite;
}
#boot-splash .bs-ring {
  position: absolute; inset: 0; border-radius: 32px;
  border: 1.5px solid rgba(255,255,255,.28);
  animation: bs-ring 2.4s ease-out .7s infinite;
}
#boot-splash .bs-bar {
  position: absolute; left: 50%; bottom: calc(18vh); width: 96px; height: 3px; margin-left: -48px;
  border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden;
}
#boot-splash .bs-bar::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 38%; border-radius: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.85), rgba(255,255,255,0));
  animation: bs-slide 1.3s ease-in-out infinite;
}
@keyframes bs-in { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
@keyframes bs-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes bs-ring { 0% { opacity: .7; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes bs-slide { from { left: -40%; } to { left: 102%; } }
@media (prefers-reduced-motion: reduce) {
  #boot-splash .bs-logo, #boot-splash .bs-ring, #boot-splash .bs-bar::after { animation: none; }
  #boot-splash .bs-ring { display: none; }
}