:root {
  --ai-primary: #9933ff;
  --ai-secondary: #00ccff;
  --ai-tertiary: #ff3366;
  --ai-bg: #030005;
}

.ai-brain-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -10;
  background:
    radial-gradient(circle at 50% 40%, rgba(153, 51, 255, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 30% 70%, rgba(0, 204, 255, 0.08) 0%, transparent 35%),
    radial-gradient(circle at 80% 20%, rgba(255, 51, 102, 0.06) 0%, transparent 30%),
    var(--ai-bg);
  overflow: hidden;
}

.ai-brain-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(55vw, 55vh);
  height: min(55vw, 55vh);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 40%, rgba(153,51,255,0.25) 0%, transparent 50%),
    radial-gradient(circle at 60% 60%, rgba(0,204,255,0.18) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(255,51,102,0.1) 0%, transparent 60%);
  filter: blur(1px);
  animation: aiBrainPulse 6s ease-in-out infinite;
}

.ai-brain-core::before,
.ai-brain-core::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(153, 51, 255, 0.15);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ai-brain-core::before {
  width: 120%;
  height: 120%;
  border-color: rgba(0, 204, 255, 0.1);
  animation: aiBrainSpin 25s linear infinite;
}

.ai-brain-core::after {
  width: 160%;
  height: 160%;
  border: 1px dashed rgba(255, 51, 102, 0.08);
  animation: aiBrainSpinReverse 40s linear infinite;
}

.ai-brain-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(75vw, 75vh);
  height: min(75vw, 75vh);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}

.ai-brain-orbit::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(153, 51, 255, 0.06);
  animation: aiBrainSpin 60s linear infinite;
}

.ai-brain-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ai-brain-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(0, 204, 255, 0.8);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 204, 255, 0.8);
  animation: aiParticleFloat linear infinite;
}

.ai-brain-neural-line {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(153, 51, 255, 0.3), transparent);
  height: 1px;
  transform-origin: left center;
  animation: aiNeuralPulse 3s ease-in-out infinite;
  pointer-events: none;
}

.ai-brain-scanline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(153, 51, 255, 0.03) 2px,
    rgba(153, 51, 255, 0.03) 4px
  );
  pointer-events: none;
  animation: aiScanlineMove 8s linear infinite;
}

.ai-brain-noise {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes aiBrainPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
  50% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
}

@keyframes aiBrainSpin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes aiBrainSpinReverse {
  0% { transform: translate(-50%, -50%) rotate(360deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}

@keyframes aiParticleFloat {
  0% { transform: translateY(110vh) scale(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

@keyframes aiNeuralPulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.6; }
}

@keyframes aiScanlineMove {
  0% { transform: translateY(0); }
  100% { transform: translateY(4px); }
}

/* 讓主要內容浮於背景之上 */
body.ai-brain-theme {
  background: var(--ai-bg);
  color: #e0d0ff;
}