/*
 * SANDI SHARED ORB VISUAL CORE
 *
 * Canonical visual personality for every SANDI endpoint.
 * Endpoint stylesheets control size, placement and surrounding UI only.
 *
 * Universal states:
 * ASLEEP · STANDBY · LISTENING · THINKING · SPEAKING · ALERT
 */

.sandy-orb {
  filter: none;
}

.orb-atmosphere,
.orb-ring,
.orb-lens,
.orb-scan {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.orb-atmosphere {
  inset: 10%;
  background: radial-gradient(circle, rgba(103, 235, 247, 0.22), rgba(35, 147, 178, 0.09) 40%, transparent 70%);
  filter: blur(22px);
  animation: orb-breathe 7.2s ease-in-out infinite;
}

.orb-ring {
  transition: border-color 260ms ease, filter 260ms ease, opacity 260ms ease;
}

.orb-ring::before,
.orb-ring::after {
  position: absolute;
  border-radius: inherit;
  content: "";
}

.orb-ring-outer {
  inset: 5%;
  border: 1px solid rgba(107, 218, 235, 0.22);
  border-right-color: rgba(107, 218, 235, 0.65);
  border-left-color: rgba(107, 218, 235, 0.08);
  animation: orb-turn 28s linear infinite;
}

.orb-ring-outer::before {
  inset: 5%;
  border: 1px dashed rgba(106, 209, 228, 0.18);
}

.orb-ring-outer::after {
  inset: -2px;
  border-top: 2px solid rgba(182, 249, 255, 0.62);
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-left: 2px solid transparent;
}

.orb-ring-middle {
  inset: 14%;
  border: 1px solid rgba(108, 207, 224, 0.36);
  border-top-color: transparent;
  box-shadow: inset 0 0 22px rgba(56, 184, 204, 0.05);
  animation: orb-turn-reverse 22s linear infinite;
}

.orb-ring-middle::before {
  inset: 6%;
  border: 4px double rgba(87, 199, 219, 0.12);
  border-right-color: rgba(155, 238, 245, 0.34);
}

.orb-ring-inner {
  inset: 23%;
  border: 1px solid rgba(183, 244, 248, 0.42);
  border-right-color: transparent;
  border-bottom-color: rgba(71, 160, 184, 0.1);
  animation: orb-turn 16s linear infinite;
}

.orb-lens {
  inset: 30%;
  display: grid;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(198, 250, 255, 0.72);
  background:
    radial-gradient(circle at 42% 37%, rgba(230, 255, 255, 0.9) 0 2%, rgba(107, 242, 250, 0.56) 4%, transparent 12%),
    radial-gradient(circle, #1f8094 0 6%, #0d3745 19%, #07151f 49%, #02070c 70%);
  box-shadow:
    0 0 0 6px rgba(66, 143, 161, 0.08),
    0 0 0 12px rgba(52, 126, 147, 0.06),
    inset 0 -16px 24px rgba(0, 0, 0, 0.62),
    inset 0 10px 22px rgba(116, 234, 244, 0.18),
    0 0 32px rgba(66, 210, 229, 0.26);
  animation: lens-breathe 6.8s ease-in-out infinite;
}

.orb-lens::before,
.orb-lens::after {
  position: absolute;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.orb-lens::before {
  inset: 10%;
  z-index: 1;
  border: 1px dashed rgba(145, 235, 242, 0.22);
  background: conic-gradient(from 18deg, transparent, rgba(115, 229, 239, 0.13), transparent 18%, rgba(71, 151, 170, 0.08) 45%, transparent 62%, rgba(142, 237, 243, 0.1) 83%, transparent);
  opacity: 0.28;
  animation: orb-turn-reverse 20s linear infinite;
}

.orb-lens::after {
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle, rgba(205, 255, 255, 0.26), rgba(85, 222, 234, 0.07) 28%, transparent 62%);
  opacity: 0.16;
}

.orb-aperture {
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(144, 230, 238, 0.32);
  border-radius: 50%;
  background: conic-gradient(from 25deg, transparent, rgba(77, 190, 208, 0.2), transparent 21%, rgba(16, 59, 73, 0.38) 36%, transparent 54%, rgba(91, 205, 222, 0.16) 76%, transparent);
  animation: orb-turn-reverse 18s linear infinite;
  z-index: 1;
}

.orb-iris {
  position: relative;
  z-index: 2;
  width: 34%;
  height: 34%;
  border: 1px solid rgba(183, 249, 251, 0.58);
  border-radius: 50%;
  background: radial-gradient(circle, #d4ffff 0 7%, #71edf4 8% 18%, #17738a 31%, #03121b 68%);
  box-shadow: 0 0 16px rgba(114, 235, 243, 0.78), inset 0 0 9px #06131b;
}

.orb-spark {
  position: absolute;
  top: 28%;
  left: 31%;
  width: 8%;
  height: 8%;
  border-radius: 50%;
  background: #edffff;
  filter: blur(0.4px);
  box-shadow: 0 0 9px #c9ffff;
  animation: spark-pulse 5.4s ease-in-out infinite;
  z-index: 3;
}

.orb-scan {
  inset: 27%;
  border: 1px solid transparent;
  opacity: 0;
}

:is(.orb-view, .command-center)[data-orb-state="listening"] .orb-ring-outer {
  border-color: rgba(133, 244, 250, 0.56);
  filter: drop-shadow(0 0 9px rgba(87, 227, 238, 0.28));
  animation: listening-wave 1.8s ease-out infinite;
}

:is(.orb-view, .command-center)[data-orb-state="listening"] .orb-scan {
  border-color: rgba(130, 240, 247, 0.58);
  animation: scan-pulse 1.35s ease-out infinite;
}

:is(.orb-view, .command-center)[data-orb-state="listening"] .orb-atmosphere {
  animation: listening-halo 2s ease-in-out infinite;
}

:is(.orb-view, .command-center)[data-orb-state="listening"] .orb-lens {
  animation: listening-core 2s ease-in-out infinite;
}

:is(.orb-view, .command-center)[data-orb-state="listening"] .orb-lens::after {
  animation: listening-center-light 2s ease-in-out infinite;
}

:is(.orb-view, .command-center)[data-orb-state="listening"] .orb-iris {
  animation: listening-iris 2s ease-in-out infinite;
}

:is(.orb-view, .command-center)[data-orb-state="thinking"] .orb-ring-outer {
  border-color: rgba(129, 192, 255, 0.42);
  animation-duration: 5.4s;
}

:is(.orb-view, .command-center)[data-orb-state="thinking"] .orb-ring-middle {
  animation-duration: 3.2s;
}

:is(.orb-view, .command-center)[data-orb-state="thinking"] .orb-aperture {
  animation-duration: 2.4s;
  background: conic-gradient(from 25deg, transparent, rgba(82, 154, 241, 0.28), transparent 19%, rgba(24, 57, 101, 0.42) 37%, transparent 54%, rgba(118, 203, 238, 0.2) 74%, transparent);
}

:is(.orb-view, .command-center)[data-orb-state="thinking"] .orb-lens {
  animation: thinking-focus 3.4s ease-in-out infinite;
}

:is(.orb-view, .command-center)[data-orb-state="thinking"] .orb-lens::before {
  border-color: rgba(145, 180, 255, 0.42);
  opacity: 0.76;
  animation-duration: 2.1s;
}

:is(.orb-view, .command-center)[data-orb-state="thinking"] .orb-lens::after {
  background: radial-gradient(circle, rgba(175, 204, 255, 0.32), rgba(70, 107, 190, 0.1) 25%, transparent 58%);
  animation: neural-flicker 2.9s steps(5, end) infinite;
}

:is(.orb-view, .command-center)[data-orb-state="thinking"] .orb-iris {
  animation: thinking-iris 3.4s ease-in-out infinite;
  filter: hue-rotate(18deg);
}

:is(.orb-view, .command-center)[data-orb-state="speaking"] .orb-ring-outer {
  border-color: rgba(163, 252, 255, 0.68);
  filter: drop-shadow(0 0 12px rgba(87, 227, 238, 0.38));
  animation: speaking-ring 0.95s ease-in-out infinite;
}

:is(.orb-view, .command-center)[data-orb-state="speaking"] .orb-iris {
  animation: speech-iris 1.45s linear infinite;
}

:is(.orb-view, .command-center)[data-orb-state="speaking"] .orb-lens {
  animation: speech-core 1.45s linear infinite;
}

:is(.orb-view, .command-center)[data-orb-state="speaking"] .orb-lens::after {
  animation: speech-light 1.45s linear infinite;
}

:is(.orb-view, .command-center)[data-orb-state="speaking"] .orb-atmosphere {
  animation: speech-halo 1.45s linear infinite;
}

:is(.orb-view, .command-center)[data-orb-state="speaking"] .orb-scan {
  border-color: rgba(180, 251, 255, 0.44);
  animation: speech-ripple 1.45s linear infinite;
}

:is(.orb-view, .command-center).has-live-signal[data-orb-state="listening"] .orb-lens,
:is(.orb-view, .command-center).has-live-signal[data-orb-state="speaking"] .orb-lens {
  animation: none;
  filter: brightness(var(--orb-live-brightness, 1));
  transform: scale(var(--orb-live-scale, 1));
}

:is(.orb-view, .command-center).has-live-signal[data-orb-state="listening"] .orb-iris,
:is(.orb-view, .command-center).has-live-signal[data-orb-state="speaking"] .orb-iris {
  animation: none;
  filter: brightness(var(--orb-live-brightness, 1));
  transform: scale(var(--orb-live-scale, 1));
}

:is(.orb-view, .command-center).has-live-signal[data-orb-state="listening"] .orb-atmosphere,
:is(.orb-view, .command-center).has-live-signal[data-orb-state="speaking"] .orb-atmosphere {
  animation: none;
  opacity: var(--orb-live-opacity, 0.7);
  transform: scale(var(--orb-live-scale, 1));
}

:is(.orb-view, .command-center)[data-orb-state="alert"] .orb-state-dot {
  background: #ffb76b;
  box-shadow: 0 0 10px rgba(255, 183, 107, 0.72);
}

:is(.orb-view, .command-center)[data-orb-state="alert"] .orb-state-readout strong {
  color: #ffd5a5;
}

:is(.orb-view, .command-center)[data-orb-state="alert"] .orb-lens {
  border-color: rgba(255, 189, 120, 0.7);
  box-shadow: 0 0 0 6px rgba(175, 100, 53, 0.08), 0 0 28px rgba(255, 148, 81, 0.24), inset 0 -16px 24px rgba(0, 0, 0, 0.62);
  animation: alert-double-pulse 3.4s ease-in-out infinite;
}

:is(.orb-view, .command-center)[data-orb-state="alert"] .orb-atmosphere {
  background: radial-gradient(circle, rgba(255, 180, 103, 0.22), rgba(154, 83, 44, 0.08) 42%, transparent 70%);
  animation: alert-halo 3.4s ease-in-out infinite;
}

:is(.orb-view, .command-center)[data-orb-state="alert"] .orb-iris {
  background: radial-gradient(circle, #fff7e9 0 7%, #ffc783 8% 18%, #a85b2f 31%, #1a0c05 68%);
  box-shadow: 0 0 15px rgba(255, 172, 91, 0.7), inset 0 0 9px #1b0e07;
}

:is(.orb-view, .command-center)[data-orb-state="alert"] .orb-ring-outer,
:is(.orb-view, .command-center)[data-orb-state="alert"] .orb-ring-middle {
  border-color: rgba(229, 160, 93, 0.42);
  animation-duration: 28s;
}

:is(.orb-view, .command-center)[data-orb-state="standby"] .orb-state-dot {
  opacity: 0.72;
}

:is(.orb-view, .command-center)[data-orb-state="standby"] .sandy-orb {
  filter: brightness(0.90);
}

/* ---------------------------------------------------------------
   ASLEEP
   Dormant. SANDI is present but the wake listener is OFF.
   Very little movement and substantially less light.
   --------------------------------------------------------------- */

:is(.orb-view, .command-center)[data-orb-state="asleep"] .orb-state-dot {
  background: #40555e;
  box-shadow: 0 0 0 3px rgba(80, 105, 114, 0.06);
  opacity: 0.72;
}

:is(.orb-view, .command-center)[data-orb-state="asleep"] .orb-state-readout strong {
  color: #789097;
}

:is(.orb-view, .command-center)[data-orb-state="asleep"] .sandy-orb {
  filter:
    brightness(0.58)
    saturate(0.72);
}

:is(.orb-view, .command-center)[data-orb-state="asleep"] .orb-atmosphere {
  opacity: 0.20;
  animation: none;
  transform: scale(0.90);
}

:is(.orb-view, .command-center)[data-orb-state="asleep"] .orb-ring,
:is(.orb-view, .command-center)[data-orb-state="asleep"] .orb-ring::before,
:is(.orb-view, .command-center)[data-orb-state="asleep"] .orb-ring::after,
:is(.orb-view, .command-center)[data-orb-state="asleep"] .orb-aperture,
:is(.orb-view, .command-center)[data-orb-state="asleep"] .orb-lens,
:is(.orb-view, .command-center)[data-orb-state="asleep"] .orb-lens::before,
:is(.orb-view, .command-center)[data-orb-state="asleep"] .orb-lens::after,
:is(.orb-view, .command-center)[data-orb-state="asleep"] .orb-iris,
:is(.orb-view, .command-center)[data-orb-state="asleep"] .orb-spark,
:is(.orb-view, .command-center)[data-orb-state="asleep"] .orb-scan {
  animation: none;
}

:is(.orb-view, .command-center)[data-orb-state="asleep"] .orb-ring-outer {
  opacity: 0.34;
}

:is(.orb-view, .command-center)[data-orb-state="asleep"] .orb-ring-middle {
  opacity: 0.27;
}

:is(.orb-view, .command-center)[data-orb-state="asleep"] .orb-ring-inner {
  opacity: 0.22;
}

:is(.orb-view, .command-center)[data-orb-state="asleep"] .orb-scan {
  opacity: 0;
}

:is(.orb-view, .command-center)[data-orb-state="asleep"] .orb-spark {
  opacity: 0.18;
}

/* ---------------------------------------------------------------
   STANDBY
   Wake listener armed. Slow breathing: ready, but not engaged.
   --------------------------------------------------------------- */

:is(.orb-view, .command-center)[data-orb-state="standby"] .orb-state-dot {
  opacity: 0.78;
  animation: standby-dot-breathe 3.8s ease-in-out infinite;
}

:is(.orb-view, .command-center)[data-orb-state="standby"] .sandy-orb {
  filter:
    brightness(0.86)
    saturate(0.92);
}

:is(.orb-view, .command-center)[data-orb-state="standby"] .orb-atmosphere {
  opacity: 0.50;
  animation: standby-halo 8.5s ease-in-out infinite;
}

:is(.orb-view, .command-center)[data-orb-state="standby"] .orb-ring-outer {
  opacity: 0.72;
  animation-duration: 34s;
}

:is(.orb-view, .command-center)[data-orb-state="standby"] .orb-ring-middle {
  opacity: 0.58;
  animation-duration: 27s;
}

:is(.orb-view, .command-center)[data-orb-state="standby"] .orb-ring-inner {
  opacity: 0.52;
  animation-duration: 21s;
}

:is(.orb-view, .command-center)[data-orb-state="standby"] .orb-scan {
  opacity: 0.08;
}

/* ---------------------------------------------------------------
   LISTENING / THINKING / SPEAKING / WORKING / ALERT
   Existing dedicated animation language remains intact.
   These small additions reinforce their visual hierarchy.
   --------------------------------------------------------------- */

:is(.orb-view, .command-center)[data-orb-state="listening"] .orb-state-dot {
  animation: active-state-pulse 1.25s ease-in-out infinite;
}

:is(.orb-view, .command-center)[data-orb-state="thinking"] .orb-state-dot {
  animation: thinking-state-pulse 1.65s ease-in-out infinite;
}

:is(.orb-view, .command-center)[data-orb-state="speaking"] .orb-state-dot {
  animation: active-state-pulse 0.92s ease-in-out infinite;
}

:is(.orb-view, .command-center)[data-orb-state="alert"] .orb-state-readout {
  animation: alert-readout-pulse 2.4s ease-in-out infinite;
}

@keyframes orb-turn {
  to { transform: rotate(360deg); }
}

@keyframes orb-turn-reverse {
  to { transform: rotate(-360deg); }
}

@keyframes orb-breathe {
  0%, 100% { opacity: 0.6; transform: scale(0.98); }
  50% { opacity: 0.82; transform: scale(1.015); }
}

@keyframes lens-breathe {
  0%, 100% { transform: scale(0.995); filter: brightness(0.96); }
  50% { transform: scale(1.008); filter: brightness(1.04); }
}

@keyframes spark-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

@keyframes scan-pulse {
  0% { opacity: 0.72; transform: scale(0.78); }
  100% { opacity: 0; transform: scale(2.55); }
}

@keyframes listening-wave {
  0% { opacity: 0.28; transform: scale(0.9); }
  55% { opacity: 0.92; }
  100% { opacity: 0; transform: scale(1.12); }
}

@keyframes listening-core {
  0%, 100% { transform: scale(0.96); filter: brightness(0.92) saturate(0.96); }
  50% { transform: scale(1.07); filter: brightness(1.34) saturate(1.15); }
}

@keyframes listening-halo {
  0%, 100% { opacity: 0.48; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.13); }
}

@keyframes listening-center-light {
  0%, 100% { opacity: 0.16; transform: scale(0.78); }
  50% { opacity: 0.72; transform: scale(1.08); }
}

@keyframes listening-iris {
  0%, 100% { transform: scale(0.88); filter: brightness(0.92); }
  50% { transform: scale(1.08); filter: brightness(1.38); }
}

@keyframes thinking-focus {
  0%, 100% { transform: scale(0.985); filter: hue-rotate(12deg) brightness(1.04); }
  42% { transform: scale(1); filter: hue-rotate(18deg) brightness(1.18); }
  73% { transform: scale(0.99); filter: hue-rotate(8deg) brightness(1.1); }
}

@keyframes thinking-iris {
  0%, 100% { transform: scale(0.72); filter: brightness(1.28) hue-rotate(18deg); }
  50% { transform: scale(0.82); filter: brightness(1.52) hue-rotate(24deg); }
}

@keyframes neural-flicker {
  0%, 100% { opacity: 0.22; }
  19% { opacity: 0.58; }
  41% { opacity: 0.34; }
  67% { opacity: 0.72; }
  82% { opacity: 0.4; }
}

@keyframes speaking-ring {
  0%, 100% { transform: scale(0.97); }
  50% { transform: scale(1.035); }
}

@keyframes speech-core {
  0%, 100% { transform: scale(0.94); filter: brightness(0.9); }
  12% { transform: scale(1.08); filter: brightness(1.42); }
  25% { transform: scale(0.98); filter: brightness(1.06); }
  39% { transform: scale(1.13); filter: brightness(1.58); }
  56% { transform: scale(0.96); filter: brightness(0.98); }
  72% { transform: scale(1.06); filter: brightness(1.35); }
  84% { transform: scale(1.01); filter: brightness(1.14); }
}

@keyframes speech-iris {
  0%, 100% { transform: scale(0.76); filter: brightness(0.86); }
  12% { transform: scale(1.16); filter: brightness(1.55); }
  25% { transform: scale(0.9); filter: brightness(1.02); }
  39% { transform: scale(1.25); filter: brightness(1.72); }
  56% { transform: scale(0.82); filter: brightness(0.92); }
  72% { transform: scale(1.1); filter: brightness(1.42); }
  84% { transform: scale(0.96); filter: brightness(1.12); }
}

@keyframes speech-light {
  0%, 100% { opacity: 0.18; transform: scale(0.75); }
  12% { opacity: 0.78; transform: scale(1.05); }
  25% { opacity: 0.34; transform: scale(0.9); }
  39% { opacity: 0.92; transform: scale(1.14); }
  56% { opacity: 0.24; transform: scale(0.82); }
  72% { opacity: 0.68; transform: scale(1.02); }
}

@keyframes speech-halo {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  12% { opacity: 0.92; transform: scale(1.16); }
  25% { opacity: 0.58; transform: scale(1); }
  39% { opacity: 1; transform: scale(1.23); }
  56% { opacity: 0.48; transform: scale(0.94); }
  72% { opacity: 0.82; transform: scale(1.12); }
}

@keyframes speech-ripple {
  0% { opacity: 0; transform: scale(0.82); }
  12% { opacity: 0.62; }
  48% { opacity: 0.12; transform: scale(1.8); }
  49%, 100% { opacity: 0; transform: scale(0.82); }
}

@keyframes alert-double-pulse {
  0%, 18%, 100% { filter: brightness(0.82) saturate(0.9); transform: scale(0.98); }
  5% { filter: brightness(1.34) saturate(1.15); transform: scale(1.055); }
  11% { filter: brightness(1.18) saturate(1.08); transform: scale(1.03); }
}

@keyframes alert-halo {
  0%, 18%, 100% { opacity: 0.36; transform: scale(0.94); }
  5% { opacity: 0.94; transform: scale(1.12); }
  11% { opacity: 0.72; transform: scale(1.06); }
}

/* ---------------------------------------------------------------
   State animations
   --------------------------------------------------------------- */

@keyframes standby-dot-breathe {
  0%,
  100% {
    opacity: 0.48;
    transform: scale(0.92);
  }

  50% {
    opacity: 0.88;
    transform: scale(1.05);
  }
}

@keyframes standby-halo {
  0%,
  100% {
    opacity: 0.38;
    transform: scale(0.96);
  }

  50% {
    opacity: 0.58;
    transform: scale(1.015);
  }
}

@keyframes active-state-pulse {
  0%,
  100% {
    transform: scale(0.90);
    opacity: 0.62;
  }

  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}

@keyframes thinking-state-pulse {
  0%,
  100% {
    transform: scale(0.88);
    opacity: 0.50;
  }

  35% {
    transform: scale(1.10);
    opacity: 1;
  }

  68% {
    transform: scale(0.96);
    opacity: 0.70;
  }
}

@keyframes alert-readout-pulse {
  0%,
  100% {
    opacity: 0.76;
  }

  50% {
    opacity: 1;
  }
}