/* hero-anim.css — re-creates the hero right-side orbital animation.
 *
 * The live site drives this with framer-motion (continuous rotation + float).
 * The static dump only captured one frozen frame, so here we reproduce the
 * motion with pure CSS keyframes. Selectors are scoped to #hero-orbit /
 * #hero-particles and match the elements by their inline-style signatures,
 * so no extra markup/classes are needed.
 *
 * The frozen inline transforms remain as the reduced-motion fallback. */

/* ---------- keyframes ---------- */
@keyframes hero-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes hero-spin-rev {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}
@keyframes hero-orb-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.12); opacity: 1; }
}
@keyframes hero-orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes hero-particle {
  from { transform: translateY(0);     opacity: 0.5; }
  to   { transform: translateY(-18px); opacity: 1; }
}

/* ---------- concentric rings (spin at different speeds) ---------- */
#hero-orbit > div[style*="width: 400px"] { animation: hero-spin     60s linear infinite; }
#hero-orbit > div[style*="width: 300px"] { animation: hero-spin-rev 45s linear infinite; }
#hero-orbit > div[style*="width: 200px"] { animation: hero-spin     34s linear infinite; }

/* ---------- central glowing orb (pulse) ---------- */
#hero-orbit > div[style*="width: 110px"] { animation: hero-orb-pulse 4s ease-in-out infinite; }

/* ---------- orbiting dots (revolve, kept spread via negative delays) ---------- */
#hero-orbit [style*="transform-origin"] { animation: hero-orbit 24s linear infinite; }
#hero-orbit [style*="transform-origin"][style*="rotate(133.062deg)"] { animation-delay: -8.87s; }
#hero-orbit [style*="transform-origin"][style*="rotate(319.349deg)"] { animation-delay: -21.29s; }
#hero-orbit [style*="transform-origin"][style*="rotate(375.133deg)"] { animation-delay: -1.01s; }
#hero-orbit [style*="transform-origin"][style*="rotate(437.539deg)"] { animation-delay: -5.17s; }
#hero-orbit [style*="transform-origin"][style*="rotate(504.815deg)"] { animation-delay: -9.65s; }

/* ---------- center icon + 4 corner badges (gentle float) ---------- */
#hero-orbit [style*="translateY"] { animation: hero-float 4s ease-in-out infinite; }
#hero-orbit [style*="translateY(-3.45763px)"] { animation-delay: -1.2s; }
#hero-orbit [style*="translateY(-5.60979px)"] { animation-delay: -2s; }
#hero-orbit [style*="translateY(-5.12915px)"] { animation-delay: -2.8s; }
#hero-orbit [style*="translateY(-0.378739px)"] { animation-delay: -3.5s; }

/* ---------- ambient background particles (slow drift) ---------- */
#hero-particles > div { animation: hero-particle 6s ease-in-out infinite alternate; }
#hero-particles > div:nth-child(3n)   { animation-duration: 7.5s; animation-delay: -1.5s; }
#hero-particles > div:nth-child(3n+1) { animation-duration: 5.5s; animation-delay: -3s; }
#hero-particles > div:nth-child(4n)   { animation-duration: 8s;   animation-delay: -2.2s; }

/* ---------- respect reduced-motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  #hero-orbit *,
  #hero-particles > div {
    animation: none !important;
  }
}