/* ============================================================
   AI ORB — "sistema solar" com as IAs orbitando a Perceptron
   CSS puro · leve · paleta roxa da marca
   ============================================================ */

.hero-visual { flex-direction: column; gap: 14px; }

.ai-orb {
  position: relative;
  width: 100%;
  height: 400px;
  flex-shrink: 0;
}

/* tudo que é centralizado no meio da orb */
.ai-orb .ring,
.ai-orb .orb-core,
.ai-orb .orbiter { position: absolute; top: 50%; left: 50%; }

/* ---- anéis concêntricos ---- */
.ring {
  border-radius: 50%;
  border: 1px solid rgba(124, 58, 237, 0.16);
  box-shadow: inset 0 0 50px rgba(124, 58, 237, 0.05);
}
.ring.r1 { width: 200px; height: 200px; margin: -100px 0 0 -100px; }
.ring.r2 { width: 300px; height: 300px; margin: -150px 0 0 -150px; border-color: rgba(124, 58, 237, 0.11); }
.ring.r3 { width: 392px; height: 392px; margin: -196px 0 0 -196px; border-color: rgba(124, 58, 237, 0.07); }

/* ---- núcleo (sol) = logo Perceptron ---- */
.orb-core {
  width: 96px; height: 96px; margin: -48px 0 0 -48px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #b69cff 0%, #7c3aed 52%, #4c1d95 100%);
  display: grid; place-items: center;
  z-index: 6;
  box-shadow:
    0 0 50px 6px rgba(124, 58, 237, 0.55),
    0 0 130px 26px rgba(124, 58, 237, 0.22),
    inset 0 2px 8px rgba(255, 255, 255, 0.28);
}
.orb-core svg { width: 46px; height: 46px; position: relative; z-index: 2; }
.orb-pulse {
  position: absolute; inset: 0; border-radius: 50%;
  animation: orbPulse 3.6s ease-out infinite;
}
@keyframes orbPulse {
  0%   { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.45); }
  70%  { box-shadow: 0 0 0 44px rgba(124, 58, 237, 0); }
  100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
}

/* ---- faíscas em órbita (movimento sutil) ---- */
.orbiter {
  border-radius: 50%;
  animation: orbSpin linear infinite;
  pointer-events: none;
}
.orbiter .dot {
  position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: #a78bfa; box-shadow: 0 0 10px 2px rgba(167, 139, 250, 0.85);
}
.orbiter.o-a { width: 200px; height: 200px; margin: -100px 0 0 -100px; animation-duration: 16s; }
.orbiter.o-b { width: 300px; height: 300px; margin: -150px 0 0 -150px; animation-duration: 26s; animation-direction: reverse; }
.orbiter.o-b .dot { background: #7c3aed; box-shadow: 0 0 10px 2px rgba(124, 58, 237, 0.85); }
@keyframes orbSpin { to { transform: rotate(360deg); } }

/* ---- responsivo ---- */
@media (max-width: 960px) {
  .ai-orb { height: 340px; }
  .ring.r1 { width: 168px; height: 168px; margin: -84px 0 0 -84px; }
  .ring.r2 { width: 252px; height: 252px; margin: -126px 0 0 -126px; }
  .ring.r3 { width: 330px; height: 330px; margin: -165px 0 0 -165px; }
  .orbiter.o-a { width: 168px; height: 168px; margin: -84px 0 0 -84px; }
  .orbiter.o-b { width: 252px; height: 252px; margin: -126px 0 0 -126px; }
  .orb-core { width: 82px; height: 82px; margin: -41px 0 0 -41px; }
  .orb-core svg { width: 40px; height: 40px; }
}

/* respeita movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .orb-pulse, .orbiter { animation: none; }
}