/* The loading screen (index.html #boot): shown from the first paint until the app has drawn its page.
   public/theme.js puts "booting" on <html>; App.jsx takes it off once it knows who is signed in. Until then the
   server's plain HTML in #root (written for search engines, seo.py) stays in the page but out of sight.
   A file of its own, tiny and loaded before anything else: the app's own CSS arrives with the app. */
#boot { display: none; }
html.booting body { margin: 0; background: #f3f6f8; }
html.booting[data-theme="dark"] body { background: #0a0a09; }
html.booting #root { visibility: hidden; }

html.booting #boot, html.boot-out #boot {
  position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem;
  background: #f3f6f8; color: #5d6f80; font: 500 .875rem/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .02em;
}
html[data-theme="dark"] #boot { background: #0a0a09; color: #8f8f89; }
html.boot-out #boot { animation: boot-out .28s ease-out forwards; pointer-events: none; }

/* The bee: flies a small loop, wings buzzing. */
#boot .boot-bee { width: 5.5rem; height: 5.5rem; overflow: visible; animation: boot-fly 2.4s ease-in-out infinite; }
#boot .bee-body { fill: #ffb703; }
#boot .bee-stripes, #boot .bee-sting, #boot .bee-eye { fill: #0f2a43; }
#boot .bee-wing { fill: #d4e9f6; stroke: #9cc4de; stroke-width: 1; transform-box: fill-box; transform-origin: 50% 90%;
  animation: boot-buzz .1s linear infinite alternate; }

/* Honeycomb cells fill one after another under the bee. */
#boot .boot-cells { display: flex; gap: .375rem; }
#boot .boot-cells span { width: .95rem; height: 1.1rem; background: #ffb703; opacity: .2;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); animation: boot-cell 1.2s ease-in-out infinite; }
#boot .boot-cells span:nth-child(2) { animation-delay: .2s; }
#boot .boot-cells span:nth-child(3) { animation-delay: .4s; }

@keyframes boot-fly {
  0%, 100% { transform: translate(0, 0) rotate(-6deg); }
  25% { transform: translate(14px, -10px) rotate(8deg); }
  50% { transform: translate(0, -16px) rotate(-4deg); }
  75% { transform: translate(-14px, -10px) rotate(-10deg); }
}
@keyframes boot-buzz { from { opacity: 1; transform: scaleY(1); } to { opacity: .45; transform: scaleY(.7); } }
@keyframes boot-cell { 0%, 100% { opacity: .2; transform: scale(.85); } 40% { opacity: 1; transform: scale(1); } }
@keyframes boot-out { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  #boot .boot-bee, #boot .bee-wing { animation: none; }
  #boot .boot-cells span { animation-duration: 2.4s; }
}