/* AWA Orb — WebGL2 fragment-shader sphere with CSS halo + EQ overlay.
   Sphere body is rendered in <canvas class="orb-canvas">.
   Halo, equalizer, and state machine stay in CSS so they're cheap. */

.orb-stage {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  width: var(--orb-size, 380px);
  height: var(--orb-size, 380px);
}

/* Halo — blurred radial glow behind the sphere, breathes asymmetrically */
.orb-halo {
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(91, 140, 255, 0.55) 0%,
    rgba(30, 91, 255, 0.32) 28%,
    rgba(0, 30, 230, 0.18) 52%,
    rgba(0, 26, 138, 0) 78%
  );
  filter: blur(28px);
  animation: orb-breathe 3.1s ease-in-out infinite alternate;
  z-index: 0;
  will-change: transform, opacity;
  pointer-events: none;
}

@keyframes orb-breathe {
  0%   { transform: scale(0.94, 0.96); opacity: 0.82; }
  37%  { transform: scale(1.04, 1.02); opacity: 1; }
  68%  { transform: scale(0.99, 1.04); opacity: 0.92; }
  100% { transform: scale(1.06, 0.97); opacity: 0.97; }
}

/* Sphere container — hosts the WebGL canvas. Round-clipped + drop shadow. */
.orb-sphere {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
  box-shadow:
    0 20px 60px rgba(0, 30, 230, 0.35),
    0 6px 18px rgba(0, 26, 138, 0.25);
}

.orb-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
}

/* Fallback gradient if WebGL fails / unsupported — kicks in via .no-webgl */
.orb-stage.no-webgl .orb-sphere {
  background:
    radial-gradient(
      circle at 32% 28%,
      #9EBDFF 0%,
      #5B8CFF 22%,
      #1E5BFF 48%,
      #0030E0 74%,
      #001A8A 100%
    );
  box-shadow:
    0 20px 60px rgba(0, 30, 230, 0.35),
    0 6px 18px rgba(0, 26, 138, 0.25),
    inset 0 0 80px rgba(0, 26, 138, 0.35);
}
.orb-stage.no-webgl .orb-canvas { display: none; }

/* Equalizer overlay — visible in listening state */
.orb-eq {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8%;
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}
.orb-stage[data-state="listening"] .orb-eq { opacity: 1; }

.orb-eq i {
  display: block;
  width: 4.5%;
  height: 22%;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.6);
  animation: orb-eq-bar 1s ease-in-out infinite;
}
.orb-eq i:nth-child(1) { animation-delay: -0.10s; }
.orb-eq i:nth-child(2) { animation-delay: -0.36s; }
.orb-eq i:nth-child(3) { animation-delay: -0.18s; }
.orb-eq i:nth-child(4) { animation-delay: -0.52s; }
.orb-eq i:nth-child(5) { animation-delay: -0.28s; }

@keyframes orb-eq-bar {
  0%, 100% { transform: scaleY(0.45); }
  50%      { transform: scaleY(1.6);  }
}

/* State variations on the halo */
.orb-stage[data-state="speaking"] .orb-halo { animation-duration: 1.6s; }
.orb-stage[data-state="listening"] .orb-halo {
  animation-duration: 2s;
  background: radial-gradient(
    closest-side,
    rgba(29, 200, 255, 0.55) 0%,
    rgba(30, 91, 255, 0.35) 32%,
    rgba(0, 30, 230, 0.18)  56%,
    rgba(0, 26, 138, 0)     80%
  );
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .orb-halo,
  .orb-eq i { animation: none !important; }
}