/*
  Critical CSS for #boot-loader (see index.html). Deliberately a plain static
  file, not run through Tailwind/PostCSS or bundled into src/styles/base.css —
  linked directly and first in <head> so it's guaranteed to apply before the
  large app bundle finishes downloading/parsing on a cold Android launch.

  Not inlined as a <style> tag: Tauri appends a per-load nonce to style-src at
  runtime, and per the CSP spec a nonce source makes the browser ignore
  'unsafe-inline' entirely — an unnonced inline <style> (or style="" attribute)
  is silently dropped (confirmed via logcat CSP violations). An external
  same-origin stylesheet is unaffected, since 'self' is untouched by the nonce.
  public/desktop-splash.css already proves this exact pattern works through
  this build pipeline for the desktop splash window.

  Only ever visible on Android (html[data-runtime="tauri-mobile"]) — it
  bridges the gap between the native Android splash dismissing (on
  first-frame-drawn, not app-ready) and Home actually finishing its load.
*/

#boot-loader {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;

  /*
    Flat solid, not the animated diagonal gold sweep this used to have — that
    was a full-viewport `background-position` animation running for the
    entire wait behind Home's initial data load (a lot of concurrent work on
    a cold Android launch), and it was visibly laggy on-device. Not worth the
    jank for a decorative effect on a screen that's only up briefly.
  */
  background: #171412;
}

html[data-runtime="tauri-mobile"] #boot-loader {
  display: flex;
}

.boot-loader-brand-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#boot-loader-logo {
  /* extender_startup_logo.png is a wide wordmark (~3.6:1), not the square
     icon this used to show — wider cap, shorter resulting height. */
  width: min(70vw, 340px);
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

#boot-loader-tagline {
  max-width: 260px;
  margin: 0;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.02em;
  color: rgb(200 168 122 / 70%);
}

.boot-loader-progress-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

#boot-loader-progress {
  width: min(52vw, 200px);
  height: 4px;
  border-radius: 999px;
  background: rgb(200 150 47 / 18%);
  overflow: hidden;
}

#boot-loader-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: #c8962f;
  transition: width 200ms ease-out;
}

#boot-loader-progress-label {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: rgb(200 168 122 / 65%);
}

/* Same wording/placement intent as SiteFooter.tsx's fan-content disclaimer —
   anchored to the screen's bottom edge (not a flex child of #boot-loader's
   centered group) so it sits below the loading bar regardless of how tall
   that centered content is. */
#boot-loader-disclaimer {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
  margin: 0;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 8px;
  line-height: 1.5;
  color: rgb(200 168 122 / 16%);
}

/*
  Same corner ornaments as src/components/ui/OrnamentCorner.tsx (see index.html
  for the shared <symbol> markup) — positioned like GatheringScreenDecor's
  full-bleed usage (96px, 8px edge hug, safe-area-aware) since #boot-loader is
  the same shape of fixed full-screen surface.
*/
.boot-loader-ornament-defs {
  position: absolute;
}

.boot-loader-ornament {
  position: absolute;
  z-index: 1;
  width: 96px;
  height: 96px;
  pointer-events: none;
}

.boot-loader-ornament-tl {
  left: 8px;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
}

.boot-loader-ornament-tr {
  right: 8px;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  transform: scaleX(-1);
}

.boot-loader-ornament-bl {
  left: 8px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  transform: scaleY(-1);
}

.boot-loader-ornament-br {
  right: 8px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  transform: scale(-1);
}

/*
  Same divider-line ornament as src/components/ui/OrnamentDivider.tsx (used
  for horizontal dividers elsewhere) — authored vertically from the start
  (see index.html) rather than reusing that component's horizontal SVG via a
  rotate transform, which would need extra offset math to reposition its
  center back to the edge after rotating. Same fade-out-at-both-ends mask,
  just along the vertical axis instead of horizontal.

  The mask has to sit on a wrapper <div>, not directly on the <svg> — mirrors
  OrnamentDivider.tsx's own structure (a div with maskImage wrapping a plain
  svg), not a shortcut: masking an <svg> element itself was invisible in the
  actual Android WebView build (only the plain unmasked line rendered, no
  fade at either end), even though it looked fine in a desktop-Chromium
  preview.

  -webkit-mask-image alongside the unprefixed property (unlike the rest of
  this file, which avoids vendor prefixes) because this file is deliberately
  outside the Tailwind/PostCSS pipeline that would otherwise autoprefix it —
  OrnamentDivider.tsx's own maskImage is a React inline style, which the
  build's autoprefixer never touches either, so there's no existing proof
  unprefixed mask-image alone is safe on every WebView version this app
  actually ships to.
*/
.boot-loader-divider {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 32px;
  height: 288px;
  transform: translateY(-50%);
  pointer-events: none;
  /* stylelint-disable-next-line property-no-vendor-prefix -- this file isn't run through the
     autoprefixer pipeline that normally justifies the no-vendor-prefix rule; see comment above. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
}

.boot-loader-divider svg {
  width: 100%;
  height: 100%;
}

.boot-loader-divider-left {
  left: 8px;
}

.boot-loader-divider-right {
  right: 8px;
}
