/* Reusable animated hero background — particle network + floating icons + gradient orbs.
 * Usage: add class "fx-hero" to a hero container and optionally
 * data-fx-icons="🖥️,📡,..." then include hero-fx.css + hero-fx.js.
 * The JS injects the orb/canvas/icon layers automatically. */
.fx-hero {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* keep real hero content (heading, text, buttons) above the animation */
.fx-hero > *:not(.fx-orbs):not(.fx-canvas):not(.fx-icons) { position: relative; z-index: 3; }
.fx-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.fx-orbs, .fx-icons { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fx-orbs { z-index: 0; }
.fx-icons { z-index: 2; }
.fx-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.30; animation: fxOrb 16s ease-in-out infinite; }
.fx-orb.o1 { width: 320px; height: 320px; top: -60px; left: 8%; background: #16c784; }
.fx-orb.o2 { width: 380px; height: 380px; bottom: -120px; right: 6%; background: #1d7df2; animation-delay: -5s; }
.fx-orb.o3 { width: 240px; height: 240px; top: 40%; left: 44%; background: #8b5cf6; animation-delay: -9s; opacity: 0.22; }
@keyframes fxOrb {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(30px,-26px) scale(1.08); }
  66%     { transform: translate(-24px,18px) scale(0.95); }
}
.fx-icon { position: absolute; font-size: 30px; opacity: 0; filter: drop-shadow(0 0 8px rgba(34,197,94,0.25)); animation: fxFloat linear infinite; }
@keyframes fxFloat {
  0%   { opacity: 0; transform: translateY(40px) rotate(-12deg) scale(0.85); }
  12%  { opacity: 0.5; }
  88%  { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-120px) rotate(12deg) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-orb, .fx-icon { animation: none; }
  .fx-icon { opacity: 0.32; }
}
body.light-mode .fx-orb { opacity: 0.22; }
body.light-mode .fx-icon { filter: none; }