/* Boot screen: shown from the first paint (index.html) until the app has its session and first page.
   Plain CSS, no JS: inventory and bill icons ride a conveyor under a scanner while the logo stacks up. */
#boot {
  position: fixed; inset: 0; z-index: 2070; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; color: #1f2333;
  background: radial-gradient(55% 45% at 50% 42%, rgba(8, 70, 201, .09), transparent 70%), var(--bs-app-body, #f0f2f5);
  transition: opacity .35s ease, visibility .35s;
}
[data-bs-theme="dark"] #boot { color: #ecebf5; background: radial-gradient(55% 45% at 50% 42%, rgba(80, 130, 240, .16), transparent 70%), #0d0d10; }
#boot.is-done { opacity: 0; visibility: hidden; }
.no-boot #boot { display: none; }

.boot-logo { width: 64px; height: 64px; margin-bottom: 1.1rem; filter: drop-shadow(0 12px 22px rgba(8, 70, 201, .35)); animation: boot-breathe 2.4s ease-in-out infinite; }
/* The "bh" monogram writes itself: b, then h, then the orange stroke */
.boot-logo path { stroke-dasharray: 1; animation: boot-draw 2.4s ease-in-out infinite; }
.boot-logo path:nth-of-type(2) { animation-delay: .15s; }
.boot-logo path:nth-of-type(3) { animation-delay: .3s; }

/* Conveyor: six items travel left to right; the one under the scanner lights up */
.boot-belt { position: relative; width: 260px; height: 54px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
.boot-belt::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(8, 70, 201, .35) 0 10px, transparent 10px 18px); background-size: 18px 2px; animation: boot-tread .6s linear infinite; }
.boot-item { position: absolute; left: 50%; bottom: 12px; width: 32px; height: 32px; margin-left: -16px; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; font-size: 16px; color: var(--boot-ink); background: var(--boot-tile); box-shadow: var(--boot-shadow);
  opacity: 0; animation: boot-ride 3s linear infinite; }
#boot { --boot-ink: #8b8fa3; --boot-tile: #fff; --boot-shadow: 0 4px 12px -6px rgba(31, 35, 51, .35), 0 0 0 1px rgba(31, 35, 51, .06); }
[data-bs-theme="dark"] #boot { --boot-ink: #8f8ea0; --boot-tile: #1a1a20; --boot-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.boot-item:nth-child(2) { animation-delay: .5s; } .boot-item:nth-child(3) { animation-delay: 1s; } .boot-item:nth-child(4) { animation-delay: 1.5s; }
.boot-item:nth-child(5) { animation-delay: 2s; } .boot-item:nth-child(6) { animation-delay: 2.5s; }
.boot-scan { position: absolute; left: 50%; top: 0; bottom: 6px; width: 2px; margin-left: -1px; border-radius: 2px;
  background: linear-gradient(transparent, var(--bs-primary, #0846C9)); box-shadow: 0 0 10px 1px rgba(8, 70, 201, .45); animation: boot-flicker 1s ease-in-out infinite; }

.boot-name { margin-top: .9rem; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.boot-msg { font-size: 13px; color: #6b7080; }
[data-bs-theme="dark"] .boot-msg { color: #9a99aa; }
.boot-msg::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: boot-dots 1.2s steps(4) infinite; }

@keyframes boot-ride {
  0% { transform: translateX(-140px) scale(.85); opacity: 0; }
  12% { opacity: 1; }
  0%, 43%, 57%, 100% { color: var(--boot-ink); background: var(--boot-tile); box-shadow: var(--boot-shadow); }
  43% { transform: translateX(-14px) scale(.9); }
  50% { transform: translateX(0) translateY(-6px) scale(1.18); color: #fff; background: var(--bs-primary, #0846C9); box-shadow: 0 10px 20px -8px rgba(8, 70, 201, .7); }
  57% { transform: translateX(16px) scale(1); }
  88% { opacity: 1; }
  100% { transform: translateX(140px) scale(.85); opacity: 0; }
}
@keyframes boot-draw { 0% { stroke-dashoffset: 1; } 35%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes boot-breathe { 50% { transform: scale(1.04); } }
@keyframes boot-tread { to { background-position: 18px 0; } }
@keyframes boot-flicker { 50% { opacity: .45; } }
@keyframes boot-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* Reduced motion: a still row of items and a steady logo */
@media (prefers-reduced-motion: reduce) {
  .boot-logo, .boot-logo path, .boot-belt::after, .boot-scan, .boot-msg::after { animation: none !important; opacity: 1; }
  .boot-item { animation: none !important; opacity: 1; }
  .boot-item:nth-child(1) { transform: translateX(-100px); } .boot-item:nth-child(2) { transform: translateX(-60px); } .boot-item:nth-child(3) { transform: translateX(-20px); }
  .boot-item:nth-child(4) { transform: translateX(20px); } .boot-item:nth-child(5) { transform: translateX(60px); } .boot-item:nth-child(6) { transform: translateX(100px); }
  .boot-scan { display: none; }
}