/**
 * aria-nebula-core.css
 * Container and ambient-glow styles for the Aria Nebula Core orb.
 * Import on any page that uses initAriaNebulaCore().
 */

/* ── Orb wrapper ─────────────────────────────────────────────────────────── */

.aria-nebula-wrap {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;

  /* Glass-edge rim (inset) + cyan halo (outset). overflow:hidden does NOT clip
     an element's own box-shadow, so both layers live here. Lifts the orb off a
     same-navy background so its silhouette reads. (Approved on /start.) */
  box-shadow:
    inset 0 0 0 1px rgba(0, 174, 239, 0.50),       /* crisp glass-edge hairline */
    inset 0 0 26px 4px rgba(0, 174, 239, 0.18),     /* soft inner edge glow      */
    0 0 0 1px rgba(0, 174, 239, 0.22),              /* tight outer ring          */
    0 0 34px 4px rgba(0, 174, 239, 0.34),           /* cyan outer halo           */
    0 0 66px 20px rgba(0, 174, 239, 0.13),          /* wide ambient bloom        */
    0 0 46px 12px rgba(255, 111, 0, 0.06),          /* faint warm counter-glow   */
    0 10px 34px 8px rgba(0, 0, 16, 0.50);           /* depth shadow beneath      */
  animation: ariaNebulaAmbient 2.2s ease-in-out infinite alternate;
}

@keyframes ariaNebulaAmbient {
  from { opacity: 0.88; transform: scale(0.99); }
  to   { opacity: 1.0;  transform: scale(1.02); }
}

/* ── Canvas inside the wrapper ───────────────────────────────────────────── */

.aria-nebula-canvas {
  display: block;
  border-radius: 0; /* wrapper clips to circle */
}

/* ── CSS fallback orb (no WebGL) ─────────────────────────────────────────── */

.aria-nebula-wrap.aria-nebula--no-webgl {
  background: radial-gradient(
    circle at 38% 38%,
    #003858 0%,
    #001830 40%,
    #000012 80%
  );
  box-shadow:
    0 0 44px 12px rgba(0, 0, 24, 0.90),
    0 0 38px 10px rgba(0, 174, 239, 0.18),
    0 0 18px  4px rgba(0, 0, 24, 0.70);
}

.aria-nebula-wrap.aria-nebula--no-webgl .aria-nebula-canvas {
  display: none;
}

/* ── Reduced-motion: slow the float, keep visuals ────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .aria-nebula-wrap {
    animation: none !important;
  }
}