/* Critical CSS — instant initial render. Loaded synchronously via
 * <link rel="stylesheet" href="/loader.css"> in index.html before
 * main.tsx executes, preserving FOUC prevention without requiring
 * 'unsafe-inline' on style-src-elem. Static asset (cached forever).
 *
 * #285 (SEC-032): moved out of index.html so style-src-elem can stay
 * 'self'-only on the first-party origin; Radix runtime <style>
 * injection is what still pins 'unsafe-inline' on style-src-elem
 * (see CSP comment in index.html).
 */

/* Prevent FOUC - show app background immediately */
:root {
  color-scheme: dark;
}
body {
  margin: 0;
  background: #0e1113;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Initial loading state - minimal progress bar only */
#initial-loader {
  position: fixed;
  inset: 0;
  background: #0e1113;
  z-index: 9999;
}
#initial-loader-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  overflow: hidden;
}
#initial-loader-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 33%;
  height: 100%;
  background: #A78BFA;
  animation: progress 1.5s ease-in-out infinite;
}
@keyframes progress {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(200%); }
  100% { transform: translateX(400%); }
}

/* Hide loader when React mounts */
#root:not(:empty) + #initial-loader,
#root:has(*) ~ #initial-loader {
  display: none;
}