/* =====================================================================
   Blueleaves — Particle Field Loader
   Self-contained, dependency-free. Dark + Light themes.
   Dark  : white logo, lime (#BAFF29) particles
   Light : navy logo, brand green particles
   ---------------------------------------------------------------------
   Usage:  add .is-dark or .is-light to the .bl-loader element.
   ===================================================================== */

.bl-loader {
  /* ---- DARK theme tokens (default) ---- */
  --bl-accent:        rgba(186, 255, 41, 0.85);   /* particle fill   */
  --bl-accent-glow:   rgba(186, 255, 41, 0.80);   /* particle glow   */
  --bl-logo-glow:     rgba(186, 255, 41, 0.65);   /* logo halo       */

  position: relative;
  width: 160px;
  height: 160px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Theme: dark (explicit, same as default) */
.bl-loader.is-dark {
  --bl-accent:      rgba(186, 255, 41, 0.85);
  --bl-accent-glow: rgba(186, 255, 41, 0.80);
  --bl-logo-glow:   rgba(186, 255, 41, 0.65);
}

/* Theme: light — deepened lime so it reads on cream/white */
.bl-loader.is-light {
  --bl-accent:      oklch(0.66 0.17 132 / 0.85);
  --bl-accent-glow: oklch(0.70 0.18 132 / 0.70);
  --bl-logo-glow:   oklch(0.70 0.18 132 / 0.55);
}

/* ---- Logo ---- */
.bl-loader__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 50px;
  width: auto;
  z-index: 2;
  filter: drop-shadow(0 0 20px var(--bl-logo-glow));
  animation: bl-float 4s ease-in-out infinite;
}

/* Show the correct logo for the active theme */
.bl-loader__logo--light { display: none; }
.bl-loader.is-light .bl-loader__logo--dark  { display: none; }
.bl-loader.is-light .bl-loader__logo--light { display: block; }

@keyframes bl-float {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateY(-8px); }
}

/* ---- Particles ---- */
.bl-loader__particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--bl-accent);
  box-shadow: 0 0 8px var(--bl-accent-glow);
  animation: bl-particle-orbit 3s ease-in-out infinite;
}

.bl-loader__particle:nth-child(1) { top: 20%; left: 50%; animation-delay: 0s;   }
.bl-loader__particle:nth-child(2) { top: 50%; left: 80%; animation-delay: 0.5s; }
.bl-loader__particle:nth-child(3) { top: 80%; left: 50%; animation-delay: 1s;   }
.bl-loader__particle:nth-child(4) { top: 50%; left: 20%; animation-delay: 1.5s; }
.bl-loader__particle:nth-child(5) { top: 35%; left: 35%; animation-delay: 2s;   }
.bl-loader__particle:nth-child(6) { top: 35%; left: 65%; animation-delay: 2.5s; }

@keyframes bl-particle-orbit {
  0%, 100% { transform: translate(0, 0) scale(1);          opacity: 0;   }
  25%      {                                                opacity: 1;   }
  50%      { transform: translate(-20px, -20px) scale(1.5); opacity: 0.8; }
  75%      {                                                opacity: 1;   }
}

/* ---- Sizes (optional) ---- */
.bl-loader.bl-sm { width: 100px; height: 100px; }
.bl-loader.bl-sm .bl-loader__logo { height: 32px; }
.bl-loader.bl-lg { width: 200px; height: 200px; }
.bl-loader.bl-lg .bl-loader__logo { height: 64px; }

/* ---- Fullscreen overlay (optional) ---- */
.bl-loading-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.bl-loading-overlay.is-active { display: flex; }
.bl-loading-overlay.is-dark  { background: rgba(10, 10, 20, 0.95); backdrop-filter: blur(8px); }
.bl-loading-overlay.is-light { background: rgba(240, 235, 221, 0.92); backdrop-filter: blur(8px); }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .bl-loader__logo,
  .bl-loader__particle { animation: none; }
}

/* ---------------------------------------------------------------------
   Webapp auto-theme integration (2026-06-04)
   When the loader is placed inside the webapp (html[data-theme="dark"]
   sets the app theme), it picks the matching variant automatically — no
   need to add .is-dark / .is-light at the call site. .is-dark / .is-light
   explicit overrides still work and win.
   --------------------------------------------------------------------- */
html[data-theme="dark"] .bl-loader:not(.is-light) {
  --bl-accent:      rgba(186, 255, 41, 0.85);
  --bl-accent-glow: rgba(186, 255, 41, 0.80);
  --bl-logo-glow:   rgba(186, 255, 41, 0.65);
}
html[data-theme="dark"] .bl-loader:not(.is-light) .bl-loader__logo--dark  { display: block; }
html[data-theme="dark"] .bl-loader:not(.is-light) .bl-loader__logo--light { display: none; }

html:not([data-theme="dark"]) .bl-loader:not(.is-dark) {
  --bl-accent:      oklch(0.66 0.22 130);
  --bl-accent-glow: oklch(0.72 0.20 130);
  --bl-logo-glow:   oklch(0.74 0.16 130);
}
html:not([data-theme="dark"]) .bl-loader:not(.is-dark) .bl-loader__logo--dark  { display: none; }
html:not([data-theme="dark"]) .bl-loader:not(.is-dark) .bl-loader__logo--light { display: block; }