/* =============================================================
   PAUSE ORB COMPONENT  (Brand Spine Rev. 2 — Phase 5 refresh)
   Single source of truth for the orb mark.
   Indigo-violet only. Never changes colour in public contexts.

   HTML structure:
     <div class="orb-stage orb-stage--hero">
       <div class="orb"></div>
       <svg class="orb-rings" viewBox="0 0 100 100" aria-hidden="true">
         <g class="orb-rings__a">
           <!-- ring ellipses A + particles A -->
         </g>
         <g class="orb-rings__b">
           <!-- ring ellipses B + particles B -->
         </g>
       </svg>
     </div>

   Size variants:
     .orb-stage--hero   — 260px  (page heroes)
     .orb-stage--thumb  — 120px  (header, inline callouts)
     .orb-stage--mini   — 88px   (ground demo cards, small contexts)
   ============================================================= */

/* --- Stage (circular container) --- */
.orb-stage {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  /* Rich purple core → deep navy edge, matching avatar */
  background: radial-gradient(
    circle at 50% 50%,
    #2E1560 0%,
    #1A0B36 40%,
    #0C0814 72%
  );
}

.orb-stage--hero  { width: 260px; height: 260px; }
.orb-stage--thumb { width: 120px; height: 120px; }
.orb-stage--mini  { width:  88px; height:  88px; }

/* --- Glow core --- */
.orb {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  animation: orb-breathe 9s ease-in-out infinite;
  pointer-events: none;
}

.orb::before {
  content: "";
  position: absolute;
  inset: -22%;          /* glow bleeds outside the orb circle */
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    #FFFFFF      0%,
    #E8DCFF     10%,
    var(--orb-core,   #F3ECFF) 18%,
    var(--indigo-core,#CDBAFF) 28%,
    var(--indigo-mid, #7A5CC4) 42%,
    var(--indigo-glow,#4B3A8F) 60%,
    transparent  80%
  );
  box-shadow:
    0 0  40px 12px rgba(122, 92, 196, 0.65),
    0 0  90px 24px rgba(75,  58, 143, 0.40),
    0 0 140px 40px rgba(46,  21, 96,  0.25);
}

/* --- Ring + particle SVG overlay (covers full stage) --- */
.orb-rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Group A: rings 1 & 3 — drifts clockwise, 80 s */
.orb-rings__a {
  transform-origin: 50px 50px;
  animation: orb-drift-cw 80s linear infinite;
}

/* Group B: rings 2 & 4 — drifts counter-clockwise, 105 s */
.orb-rings__b {
  transform-origin: 50px 50px;
  animation: orb-drift-ccw 105s linear infinite;
}

/* --- Keyframes --- */
@keyframes orb-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.94; }
  50%       { transform: scale(1.05); opacity: 1;    }
}

@keyframes orb-drift-cw {
  from { transform: rotate(0deg);    }
  to   { transform: rotate(360deg);  }
}

@keyframes orb-drift-ccw {
  from { transform: rotate(0deg);    }
  to   { transform: rotate(-360deg); }
}

/* --- Respect reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .orb,
  .orb-rings__a,
  .orb-rings__b { animation: none; }
}