/* =================================================================
   Ambient particles — purposeful warm motion on hero surfaces
   --------------------------------------------------------------------
   Where this lives:
     - Wizard hero (public welcome → champagne particles drifting up).
     - Reports hero (live data signal → cooler dots, lower density).

   Why this exists (per uix-global-design "every visual choice needs a
   reason"): the wizard hero greets a resident arriving for help. The
   warm gold drift reinforces "this office cares about you" without
   adding any text. The reports hero signals "this dashboard is live"
   the moment the operator opens it — particles fade out on their first
   loop so they don't compete with the KPI numbers below.

   Performance:
     - transform + opacity only (GPU-compositable)
     - max ~16 particles per layer (browser handles this in the noise)
     - will-change: transform applied per-particle, scoped narrowly
     - filter: blur(0.5px) for an out-of-focus depth-of-field feel —
       we accept the small composite cost for the visual upgrade

   Reduced motion: layer is hidden entirely. Comprehension never
   depends on these particles.
   ================================================================= */

.particles-layer {
  position: absolute;
  inset: 0;
  z-index: 1;            /* above gradient/photo, below text content (z-index: 2) */
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit; /* clip dots to the hero's rounded corners */
}

.particles-layer__dot {
  position: absolute;
  left: var(--p-x, 50%);
  top:  var(--p-y, 50%);
  width:  var(--p-size, 3px);
  height: var(--p-size, 3px);
  border-radius: 50%;
  background: var(--p-color, rgba(255, 248, 232, 0.65));
  box-shadow: 0 0 var(--p-glow, 6px) var(--p-color, rgba(255, 248, 232, 0.45));
  filter: blur(0.4px);
  opacity: 0;
  animation: particle-drift var(--p-dur, 16s) ease-in-out var(--p-delay, 0s) infinite;
  will-change: transform, opacity;
}

/* Slight horizontal sway via per-particle --p-sway (defaults to a small drift). */
@keyframes particle-drift {
  0%   { transform: translate3d(0, 0, 0) scale(0.7); opacity: 0; }
  12%  { opacity: var(--p-max-opacity, 0.7); }
  50%  { transform: translate3d(var(--p-sway, 6px), -60px, 0) scale(1); }
  88%  { opacity: var(--p-max-opacity, 0.7); }
  100% { transform: translate3d(calc(var(--p-sway, 6px) * -0.5), -140px, 0) scale(0.85); opacity: 0; }
}

/* Cool variant — used over light-cream backgrounds (reports hero). */
.particles-layer--cool .particles-layer__dot {
  background: var(--p-color, rgba(168, 71, 10, 0.32));
  box-shadow: 0 0 var(--p-glow, 4px) rgba(168, 71, 10, 0.18);
}

/* Dense variant — wizard hero gets richer ambience than dashboard. */
.particles-layer--dense .particles-layer__dot {
  --p-max-opacity: 0.78;
}

/* Reduced motion: hide entirely. The hero still works without ambient motion. */
@media (prefers-reduced-motion: reduce) {
  .particles-layer { display: none; }
}