/* Critical theme fallbacks match design-tokens.css; no image or font download
   is needed to draw the mark before the application loads. */
.hub-loading {
  --boot-paper: var(--paper, #f5f2ea);
  --boot-ink: var(--ink, #17140e);
  --boot-muted: var(--ink-soft, #5b5546);
  --boot-accent: var(--accent, #e84d00);
  position: fixed;
  inset: 0;
  z-index: 10000;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: var(--boot-paper);
  color: var(--boot-ink);
  font: 14px/1.5 system-ui, sans-serif;
  text-align: center;
}
[data-theme='dark'] .hub-loading {
  --boot-paper: var(--paper, #16130e);
  --boot-ink: var(--ink, #ece5d3);
  --boot-muted: var(--ink-soft, #b0a78e);
  --boot-accent: var(--accent, #ff5c0a);
}
.hub-loading[hidden] { display: none; }
.hub-loading-visual { width: 120px; height: 120px; margin-bottom: 28px; flex-shrink: 0; }
.hub-loading-mark { display: block; width: 100%; height: 100%; color: var(--boot-accent); view-transition-name: c3-brand-mark; }
.hub-loading .brand-mark-stroke {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: hub-mark-draw 1.4s cubic-bezier(.45,0,.2,1) both;
}
/* Short channels follow the outer contour and finish with it. */
.hub-loading .brand-mark-stroke-2 { animation-duration: 700ms; animation-delay: 420ms; }
.hub-loading .brand-mark-stroke-3 { animation-duration: 700ms; animation-delay: 700ms; }
/* Light travels through the existing strokes; their opacity never pulses. */
.brand-light stop { animation: hub-brand-light 5s ease-in-out infinite; }
.brand-light stop:nth-child(2) { animation-delay: -1s; }
.brand-light stop:nth-child(3) { animation-delay: -2s; }
.brand-light stop:nth-child(4) { animation-delay: -3s; }
.brand-light stop:nth-child(5) { animation-delay: -4s; }
.brand-transfer-loading .brand-mark-stroke { animation: none; stroke-dashoffset: 0; }
.hub-loading strong { font-size: 17px; font-weight: 550; letter-spacing: -.3px; }
.hub-loading p { max-width: 36ch; margin: 8px 0 0; color: var(--boot-muted); font-size: 13px; line-height: 1.6; }
.hub-loading button { margin-top: 24px; min-height: 44px; font: 600 14px/1.5 system-ui,sans-serif; padding: 10px 20px; border: 1px solid var(--boot-accent); border-radius: 4px; background: var(--boot-accent); color: #fff7ef; cursor: pointer; }
.hub-loading button[hidden] { display: none; }
.hub-loading button:focus-visible { outline: 2px solid var(--boot-ink); outline-offset: 4px; }
.hub-loading[data-state='error'] .brand-mark-stroke { animation: none; stroke-dashoffset: 0; opacity: 1; }
.hub-loading[data-state='error'] .brand-light stop { animation: none; }
.hub-loading[data-state='error'] { text-align: left; align-items: flex-start; padding: clamp(24px, 8vw, 120px); }
.hub-loading[data-state='error'] .hub-loading-visual { width: 64px; height: 64px; margin-bottom: 40px; }
.hub-loading[data-state='error'] strong { max-width: 18ch; font-size: clamp(32px, 5vw, 64px); line-height: 1.1; letter-spacing: -.045em; font-weight: 500; outline: none; }
.hub-loading[data-state='error'] p { max-width: 48ch; font-size: 16px; margin-top: 24px; }
.hub-loading [data-boot-home] { color: var(--boot-muted); margin-top: 20px; min-height: 44px; display: inline-flex; align-items: center; }
.hub-loading [data-boot-home]:focus-visible { outline: 2px solid var(--boot-accent); outline-offset: 4px; }
html[data-boot-transition] { view-transition-name: none; }
html[data-boot-transition] .hub-loading { view-transition-name: boot-screen; }
::view-transition-group(c3-brand-mark) { animation-duration: 620ms; animation-timing-function: cubic-bezier(.22,1,.36,1); z-index: 10; }
::view-transition-old(c3-brand-mark), ::view-transition-new(c3-brand-mark) { height: 100%; object-fit: contain; mix-blend-mode: normal; animation: none; }
/* One complete, opaque silhouette travels between the two positions. */
::view-transition-old(c3-brand-mark) { opacity: 0; }
::view-transition-new(c3-brand-mark) { opacity: 1; }
html[data-boot-transition]::view-transition-old(boot-screen) { animation: hub-loading-exit 220ms both; mix-blend-mode: normal; }
@keyframes hub-mark-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes hub-brand-light {
  0%, 100% { stop-color: #c94308; }
  25% { stop-color: #e84d00; }
  50% { stop-color: #ffab48; }
  65% { stop-color: #ffe0a3; }
  80% { stop-color: #f77b18; }
}
@keyframes hub-loading-exit { to { opacity: 0; } }
@media (max-height: 450px) { .hub-loading-visual { width: 80px; height: 80px; margin-bottom: 16px; } }
@media (prefers-reduced-motion: reduce) {
  .hub-loading .brand-mark-stroke { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .brand-light stop { animation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .01ms !important; animation-delay: 0ms !important; }
}

html[data-landing-boot] #boot-status { --boot-paper: #101211; --boot-ink: #f3f1e8; --boot-muted: #a4aba0; }