/* The boot screen: what shows from the moment the page arrives until the app has drawn
   (main.tsx replaces it). Home's band with the logo, and Mentorloop's mark breathing after a
   third of a second, as the app's own loader does (Loading.tsx). Its own few colours (styles.css hasn't loaded yet): Mentorloop's primaryLight
   band in light, a deep coral tint in dark, as on Home. Its own file, so the page needs no
   inline style (the Content-Security-Policy in deploy/data.yaml). */
:root { --boot-bg: #f5f5f8; --boot-band: #ff9d96; --boot-ink: #212226; --boot-mark: #fb5f53; --boot-muted: #6b6f76; color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --boot-bg: #17181b; --boot-band: #3a2321; --boot-ink: #ff9d96; --boot-mark: #ff7c72; --boot-muted: #9b9ea4; } }
:root[data-theme="dark"] { --boot-bg: #17181b; --boot-band: #3a2321; --boot-ink: #ff9d96; --boot-mark: #ff7c72; --boot-muted: #9b9ea4; }
html, body { margin: 0; background: var(--boot-bg); }
.boot { position: fixed; inset: 0; z-index: 40; background: var(--boot-bg); font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.boot-band { background: var(--boot-band); color: var(--boot-ink); padding: calc(env(safe-area-inset-top) + 16px) 16px 0; height: 116px; border-radius: 0 0 12px 12px; }
.boot-band p { max-width: 728px; margin: 0 auto; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.boot-logo { height: 24px; width: auto; aspect-ratio: 448 / 128; fill: currentColor; }
.boot-band span { opacity: 0.75; }
/* In the middle of the screen, as the app's loader is (styles.css .loading), so the mark doesn't move when the app takes over. */
.boot-wait { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; margin: 0; padding-top: 40px; box-sizing: border-box; color: var(--boot-muted); font-size: 15px; line-height: 1.5; opacity: 0; animation: boot-show 0.4s 0.3s ease-out forwards; }
.boot-mark { flex: none; width: 64px; height: 64px; fill: var(--boot-mark); animation: boot-breathe 1.8s ease-in-out infinite; }
@keyframes boot-show { to { opacity: 1; } }
@keyframes boot-breathe { 0%, 100% { transform: scale(0.92); opacity: 0.55; } 50% { transform: scale(1); opacity: 1; } }
@keyframes boot-fade { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .boot-mark { animation-name: boot-fade; } }