/* ============================================================
   QUINSEL 5AI アイデンティティ（色とアバターの唯一の定義）

   ここを直せば LP / Scan結果 / Map読み込み / Map結果 / ヘッダー の
   5AIの色が全部そろう。個別CSSで --ai-* を再定義しないこと。
   PHP側の正は quinsel/functions/ai-identity.php。
   ============================================================ */

:root{
  --ai-log:    #3B82F6; /* 構造AI（ログ）    ： 青 */
  --ai-emo:    #E84393; /* 感情観測AI（エモ）： ピンク */
  --ai-guard:  #F59E0B; /* 現実AI（ガード）  ： アンバー */
  --ai-vision: #8B5CF6; /* 未来予測AI（ビジョン）： 紫 */
  --ai-midori: #10B981; /* 統合バランスAI（ミドリ）： 緑 */

  /* 旧クラス名からの参照用エイリアス（新規コードでは使わない）
     ※ reality=現実AI=ガード / risk=構造AI=ログ。以前は逆に紐づいていた */
  --ai-emotion: var(--ai-emo);
  --ai-reality: var(--ai-guard);
  --ai-risk:    var(--ai-log);
  --ai-future:  var(--ai-vision);
  --ai-balance: var(--ai-midori);
}

/* ------------------------------------------------------------
   アバター（インラインSVG・画像ファイルなし）
   ------------------------------------------------------------ */
.qa{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 0;
}
.qa svg{ display: block; overflow: visible; }

.qa--log{    color: var(--ai-log); }
.qa--emo{    color: var(--ai-emo); }
.qa--guard{  color: var(--ai-guard); }
.qa--vision{ color: var(--ai-vision); }
.qa--midori{ color: var(--ai-midori); }

/* ミドリの周囲にある「4視点」のドット */
.qa .qa-d--log{    fill: var(--ai-log); }
.qa .qa-d--emo{    fill: var(--ai-emo); }
.qa .qa-d--guard{  fill: var(--ai-guard); }
.qa .qa-d--vision{ fill: var(--ai-vision); }

/* 暗い背景（ヘッダー・ネイビーのセクション）に置くとき */
.qa--on-dark svg [fill-opacity="0.13"],
.qa--on-dark svg [fill-opacity=".13"]{ fill-opacity: .22; }

/* ふわっと呼吸するモーション（読み込み中などで使う） */
@keyframes qa-breathe{
  0%, 100%{ transform: translateY(0)   scale(1); }
  50%     { transform: translateY(-2px) scale(1.04); }
}
.qa--breathe svg{ animation: qa-breathe 2.6s ease-in-out infinite; }
.qa--breathe.qa--emo svg{    animation-delay: -.5s; }
.qa--breathe.qa--guard svg{  animation-delay: -1s;  }
.qa--breathe.qa--vision svg{ animation-delay: -1.5s;}
.qa--breathe.qa--midori svg{ animation-delay: -2s;  }

@media (prefers-reduced-motion: reduce){
  .qa--breathe svg{ animation: none !important; }
}