@layer properties, theme, base, components, utilities;

/* /w/connect in a journey browser (bootstrap/surface.js `data-boot-wait`): until the app draws into #app, the words the
   journey's held paper says (door/JourneyDoor.tsx HOLD_WAIT), where it says them. On a 4G link the main bundle takes ~3 s
   before anything of the app paints (prod 11-06), and that stretch read as a dead page. Gone with the app's first render.
   Here rather than in a file of its own: this sheet already blocks the first paint, so it costs no request. */
html[data-boot-wait] #app:empty::after {
  content: "Finding your way in\2026";
  position: fixed;
  top: 42dvh;
  left: 0;
  right: 0;
  text-align: center;
  font: 400 14px/20px system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #6b665f;
  animation: boot-wait-in 400ms 200ms both, boot-wait-pulse 1.4s 600ms ease-in-out infinite alternate;
}
/* The light journey (bootstrap/surface.js: `data-boot-wait="dark"` where the journey last wore dark): until the app paints, the
   paper the wait and the page it opens onto wear (journey.css --journey-paper; door/JourneyDoor.tsx JourneyDoorWait) and the
   words in the held paper's tone (FlowerWait's label on the light palette). Kept over the cold load's empty journey placeholder
   (routes/w.connect.tsx JourneyWait, `data-journey-wait`, empty) until the door's own note paints in the same place, never a
   blank white frame between them (item 11's reviewer, 11-06). Only while #app is empty or holds that placeholder: anything else
   the app paints (an error page, a redirect, another route) takes the words and the paper away. Rules of their own: a browser
   without :has() keeps the rule above. */
html[data-boot-wait]:not([data-boot-wait="dark"]) #app:empty::after { color: #b34700; }
html[data-boot-wait]:not([data-boot-wait="dark"]):has(#app:empty) { background: #f5f3e6; }
html[data-boot-wait]:not([data-boot-wait="dark"]):has(#app [data-journey-wait]:empty) { background: #f5f3e6; }
html[data-boot-wait]:not([data-boot-wait="dark"]) #app [data-journey-wait]:empty { background: #f5f3e6 !important; }
/* and under the journey's paper frames while they mount (the door's chunk swapping in, before the page has set its palette on
   <html>): the body's default ground showed for a frame between two paper ones (item 11's second reviewer, 11-06, a second tab) */
html[data-boot-wait]:not([data-boot-wait="dark"]):has(#app:empty, #app [data-journey-wait]:empty, #app .journey-root[data-oc-paper]) body { background: #f5f3e6; }
html[data-boot-wait] #app:has([data-journey-wait]:empty)::after {
  content: "Finding your way in\2026";
  position: fixed;
  top: 42dvh;
  left: 0;
  right: 0;
  text-align: center;
  font: 400 14px/20px system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #6b665f;
  animation: boot-wait-pulse 1.4s 600ms ease-in-out infinite alternate;
}
html[data-boot-wait]:not([data-boot-wait="dark"]) #app:has([data-journey-wait]:empty)::after { color: #b34700; }
@keyframes boot-wait-in { from { opacity: 0; } }
@keyframes boot-wait-pulse { to { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
  html[data-boot-wait] #app:empty::after { animation: none; }
}