/* Branded loading animation — SHARED by the pre-WASM loader (a static block in App.razor that
   renders before the WASM runtime downloads) and the Loading.razor component (router <Authorizing>
   template + in-page busy states). Extracted from Loading.razor's former inline <style> so a
   zero-WASM static loader and the Razor component render identically and can't drift.

   Single source of truth for timing is the two custom properties below. Plain global stylesheet
   (loaded in App.razor <head>), so plain @keyframes — no Razor @@ escaping. */

:root {
  --logo-cycle: 3.6s;    /* full draw -> fill -> hold -> retract loop */
  --logo-stagger: 0.15s; /* delay between consecutive strokes */
}

/* Logo colors follow the Bootstrap data-bs-theme attribute, which the App.razor head script sets
   from localStorage BEFORE this stylesheet paints (so the pre-WASM loader is correctly themed). */
:root[data-bs-theme="light"] {
  --logo-fill      : #081F2C;
  --logo-glow-base : rgba(8,31,44,0.2);
  --logo-glow-peak : rgba(8,31,44,0.3);
  --loader-bg      : #ffffff;          /* matches the app's light body background */
}
:root[data-bs-theme="dark"],
:root:not([data-bs-theme]) {  /* fallback to dark if no theme attr */
  --logo-fill      : rgb(255,200,44);
  --logo-glow-base : rgba(255,200,44,0.35);
  --logo-glow-peak : rgba(255,200,44,0.45);
  --loader-bg      : rgb(8,26,32);     /* matches the app's dark body background */
}

/* Full-viewport overlay for the PRE-WASM loader only, so the empty #blazor-route-host is never
   shown as a blank page during the runtime download. The in-page <Loading /> component renders
   inline and does NOT use this class. Fades out (.is-dismissing) at handoff to the booted app. */
.pre-wasm-loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Use our own theme-aware var (set on :root[data-bs-theme] above). --bs-body-bg is NOT defined on
     :root — the theme sets the background on <body> — so var(--bs-body-bg) fell back to white here,
     leaving the loader white in dark mode even though the logo (which uses --logo-fill) was correct. */
  background: var(--loader-bg, #ffffff);
  opacity: 1;
  transition: opacity 0.25s ease;
}
.pre-wasm-loader.is-dismissing {
  opacity: 0;
  pointer-events: none;
}

/* ── Each stroke: draw the outline, fade the fill in, hold, then retract — LOOPING, so a long wait
   never looks frozen (the old one-shot draw settled after ~4s and read as "hung"). pathLength="1000"
   on each <path> normalizes the dash math so stroke-dasharray:1000 is always exactly the full
   stroke regardless of the real geometry. ── */
.loading-logo .logo-path {
  stroke            : var(--logo-fill);
  fill              : var(--logo-fill);
  stroke-width      : 0.5;
  stroke-dasharray  : 1000;
  stroke-dashoffset : 1000;
  fill-opacity      : 0;
  filter            : drop-shadow(0 0 3px var(--logo-glow-base));
  animation         : drawFillLoop var(--logo-cycle) ease-in-out infinite;
}

/* Stagger the six strokes. Each stroke is wrapped in its own <g> under .logo-group. */
.loading-logo .logo-group > g:nth-child(1) .logo-path { animation-delay: calc(0 * var(--logo-stagger)); }
.loading-logo .logo-group > g:nth-child(2) .logo-path { animation-delay: calc(1 * var(--logo-stagger)); }
.loading-logo .logo-group > g:nth-child(3) .logo-path { animation-delay: calc(2 * var(--logo-stagger)); }
.loading-logo .logo-group > g:nth-child(4) .logo-path { animation-delay: calc(3 * var(--logo-stagger)); }
.loading-logo .logo-group > g:nth-child(5) .logo-path { animation-delay: calc(4 * var(--logo-stagger)); }
.loading-logo .logo-group > g:nth-child(6) .logo-path { animation-delay: calc(5 * var(--logo-stagger)); }

/* ── Keyframes ── */
@keyframes drawFillLoop {
  0%   { stroke-dashoffset: 1000; fill-opacity: 0; }
  15%  { stroke-dashoffset: 0;    fill-opacity: 0; }  /* outline drawn */
  25%  { stroke-dashoffset: 0;    fill-opacity: 1; }  /* filled */
  75%  { stroke-dashoffset: 0;    fill-opacity: 1; }  /* hold */
  90%  { stroke-dashoffset: 0;    fill-opacity: 0; }  /* fill fades */
  100% { stroke-dashoffset: 1000; fill-opacity: 0; }  /* retract while invisible, then repeat */
}
@keyframes pulseScale {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
@keyframes glow {
  0%,100% { filter: drop-shadow(0 0 3px var(--logo-glow-base)); }
  50%     { filter: drop-shadow(0 0 6px var(--logo-glow-peak)); }
}
@keyframes fadeText {
  0%,100% { opacity: 0; }
  30%,70% { opacity: 1; }
}

/* ── Ambient pulse + glow on the whole SVG ── */
.pulse {
  animation:
    pulseScale 3s ease-in-out infinite,
    glow       3s ease-in-out infinite;
  transform-origin: center center;
}

/* ── Tagline + subtle load cue ── */
.loading-text {
  animation: fadeText 3s ease-in-out infinite;
}
.loading-tagline {
  color: var(--logo-fill);
  font-weight: 700;
  letter-spacing: 0.5px;
}
.loading-sub {
  color: var(--logo-fill);
  opacity: 0.6;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Respect reduced-motion: show the final drawn/filled logo, no looping/pulse. */
@media (prefers-reduced-motion: reduce) {
  .pulse,
  .loading-logo .logo-path,
  .loading-text {
    animation: none !important;
  }
  .loading-logo .logo-path {
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }
}
