/* ================================================
   J.A.R.V.I.S. v2 — Ambient Background + AI Core
   ================================================ */

/* --- Universe (fullscreen background) --- */
.universe {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #000;
}

.nebula {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(0, 180, 220, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(0, 100, 255, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(0, 220, 180, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 40%, rgba(100, 0, 255, 0.04) 0%, transparent 40%);
  animation: nebula-drift 25s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes nebula-drift {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33% { transform: translate(-3%, 2%) rotate(3deg) scale(1.02); }
  66% { transform: translate(2%, -2%) rotate(-2deg) scale(0.98); }
  100% { transform: translate(-1%, 1%) rotate(1deg) scale(1.01); }
}

/* --- AI Core Orb --- */
.ai-core {
  position: relative;
  width: 56px;
  height: 56px;
  margin: 0 auto;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ai-core-orb {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(0, 255, 255, 0.6), rgba(0, 100, 200, 0.3));
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
  animation: orb-idle 4s ease-in-out infinite;
}

.ai-core-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 255, 255, 0.15);
  animation: ring-spin 12s linear infinite;
}

.ai-core-ring::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  transform: translateX(-50%);
}

.ai-core-glow {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 255, 255, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* --- AI Core States --- */

/* Idle: slow breathing */
@keyframes orb-idle {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
}

@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Thinking: fast pulse */
.ai-core.thinking .ai-core-orb {
  animation: orb-thinking 1s ease-in-out infinite;
  background: radial-gradient(circle at 35% 35%, rgba(0, 200, 255, 0.8), rgba(100, 0, 255, 0.4));
}

.ai-core.thinking .ai-core-ring {
  animation: ring-spin 3s linear infinite;
  border-color: rgba(0, 255, 255, 0.3);
}

.ai-core.thinking .ai-core-glow {
  animation: glow-pulse 1.5s ease-in-out infinite;
}

@keyframes orb-thinking {
  0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(0, 255, 255, 0.3); }
  50% { transform: scale(1.15); box-shadow: 0 0 40px rgba(0, 255, 255, 0.5); }
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

/* Speaking: wave effect */
.ai-core.speaking .ai-core-orb {
  animation: orb-speaking 2s ease-in-out infinite;
  background: radial-gradient(circle at 35% 35%, rgba(0, 255, 200, 0.7), rgba(0, 150, 255, 0.4));
}

.ai-core.speaking .ai-core-ring {
  animation: ring-spin 6s linear infinite;
  border-color: rgba(0, 255, 200, 0.25);
}

@keyframes orb-speaking {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.08) translateY(-2px); }
  75% { transform: scale(0.95) translateY(1px); }
}

/* Offline */
.ai-core.offline .ai-core-orb {
  background: radial-gradient(circle at 35% 35%, rgba(120, 120, 120, 0.5), rgba(60, 60, 60, 0.3));
  animation: none;
  opacity: 0.5;
}

.ai-core.offline .ai-core-ring {
  border-color: rgba(255, 255, 255, 0.05);
  animation: none;
}

/* --- Status Text --- */
.ai-status-text {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: var(--space-xs);
  transition: color var(--duration-base) var(--ease-out);
}

.ai-core.thinking + .ai-status-text { color: var(--accent); }
.ai-core.speaking + .ai-status-text { color: rgba(0, 255, 200, 0.6); }