/* ==========================================================================
   ii-orb — the Innerface orb component
   Pure CSS + inline SVG. No raster, so it scales to any --ii-size and
   re-themes by swapping the custom properties below.

   Structure:
     .ii-orb              sizing box, sets the stacking context
       .ii-glow           outer bloom behind everything
       .ii-ring r1..r4    concentric rings, counter-rotating
       .ii-core           the dark glass sphere holding the mark

   Themed by the host page:
     --ii-size            diameter
     --ii-accent-rgb      primary accent   (GGz green 124,198,43)
     --ii-accent-2-rgb    secondary accent (GGz blue 34,178,232)
     --ii-pale-rgb        highlight
     --ii-core-1..4       glass gradient stops, light to dark
   ========================================================================== */

.ii-orb{
  --ii-size: 190px;
  --ii-accent-rgb: 124,198,43;
  --ii-accent-2-rgb: 34,178,232;
  --ii-pale-rgb: 208,246,255;
  --ii-core-1:#123528; --ii-core-2:#0b2430; --ii-core-3:#06141d; --ii-core-4:#030a0e;
  /* driven by the host component: --ii-amp brightens with voice level,
     --ii-spin scales every ring's rotation period (lower = faster) */
  --ii-amp: 1;
  --ii-spin: 1;

  position:relative;
  width:var(--ii-size); height:var(--ii-size);
  flex:none;
  display:grid; place-items:center;
  border-radius:50%;
  border:0;
  background:transparent;
  -webkit-appearance:none;
  appearance:none;
  overflow:visible;
  color:inherit;
  /* isolation + filter:blur paints a square in Safari. Glow stays circular
     without a stacking-context box behind the rings. */
}

/* ── outer bloom ───────────────────────────────────────────────────────── */
.ii-orb .ii-glow{
  position:absolute; inset:-28%;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(var(--ii-accent-2-rgb),.28) 0%,
      rgba(var(--ii-accent-2-rgb),.12) 38%,
      rgba(var(--ii-accent-2-rgb),.04) 58%,
      transparent 72%);
  pointer-events:none;
  z-index:0;
  opacity:var(--ii-amp);
  animation:iiBloom 6s ease-in-out infinite;
}
@keyframes iiBloom{
  0%,100%{ opacity:.85; transform:scale(1); }
  50%    { opacity:1;   transform:scale(1.04); }
}

/* ── rings ─────────────────────────────────────────────────────────────── */
.ii-orb .ii-ring{
  position:absolute; border-radius:50%;
  pointer-events:none; z-index:1;
}
.ii-orb .ii-ring.r1{
  inset:0;
  border:1px solid rgba(var(--ii-accent-rgb),.42);
  box-shadow:0 0 18px rgba(var(--ii-accent-rgb),.22),
             inset 0 0 22px rgba(var(--ii-accent-2-rgb),.16);
  animation:iiSpin calc(26s * var(--ii-spin)) linear infinite;
}
.ii-orb .ii-ring.r2{
  inset:5.5%;
  border:1px solid rgba(var(--ii-accent-2-rgb),.34);
  animation:iiSpin calc(34s * var(--ii-spin)) linear infinite reverse;
}
.ii-orb .ii-ring.r3{
  inset:11%;
  border:1px dashed rgba(var(--ii-pale-rgb),.16);
  animation:iiSpin calc(48s * var(--ii-spin)) linear infinite;
}
/* the tick ring — a conic sweep clipped to a hairline band */
.ii-orb .ii-ring.r4{
  inset:-6%;
  border:0;
  background:conic-gradient(
    from 0deg,
    transparent 0 78%,
    rgba(var(--ii-accent-rgb),.55) 86%,
    rgba(var(--ii-accent-2-rgb),.55) 92%,
    transparent 100%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation:iiSpin calc(9s * var(--ii-spin)) linear infinite;
}
@keyframes iiSpin{ to{ transform:rotate(360deg); } }

/* ── core ──────────────────────────────────────────────────────────────── */
.ii-orb .ii-core{
  position:relative; z-index:2;
  width:82%; height:82%;
  border-radius:50%;
  overflow:hidden;
  display:grid; place-items:center;
  background:
    radial-gradient(circle at 34% 26%,
      var(--ii-core-1) 0%,
      var(--ii-core-2) 38%,
      var(--ii-core-3) 70%,
      var(--ii-core-4) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(var(--ii-accent-rgb),.34),
    inset 0 14px 34px rgba(var(--ii-pale-rgb),.06),
    inset 0 -18px 40px rgba(0,0,0,.55),
    0 0 26px rgba(var(--ii-accent-2-rgb),.22),
    0 14px 34px rgba(0,0,0,.5);
}
/* specular highlight across the top of the glass */
.ii-orb .ii-core::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(ellipse 58% 34% at 38% 16%,
    rgba(var(--ii-pale-rgb),.16), transparent 62%);
  pointer-events:none;
}
.ii-orb .ii-core > svg{ position:relative; z-index:1; }

/* ── the .grad variant: accent sweep across the rim ────────────────────── */
.ii-orb.grad .ii-ring.r1{
  border-color:transparent;
  background:conic-gradient(from 210deg,
    rgba(var(--ii-accent-rgb),.75),
    rgba(var(--ii-accent-2-rgb),.75) 55%,
    rgba(var(--ii-accent-rgb),.75));
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
}

@media (prefers-reduced-motion:reduce){
  .ii-orb .ii-glow,
  .ii-orb .ii-ring{ animation:none; }
}

/* ── interactive: the cortex orb is click-to-talk ──────────────────────── */
.ii-orb[role="button"]{ cursor:pointer; }
.ii-orb[role="button"]:hover .ii-core{
  box-shadow:
    inset 0 0 0 1px rgba(var(--ii-accent-rgb),.55),
    inset 0 14px 34px rgba(var(--ii-pale-rgb),.09),
    inset 0 -18px 40px rgba(0,0,0,.55),
    0 0 38px rgba(var(--ii-accent-2-rgb),.34),
    0 14px 34px rgba(0,0,0,.5);
}
.ii-orb[role="button"]:focus-visible{
  outline:2px solid rgba(var(--ii-accent-rgb),.8); outline-offset:6px; border-radius:50%;
}