/* ============================================================
   core.css — AIコアの器（描画本体は js/core.js の Canvas）
   ============================================================ */
#core-wrap{ position:relative; width:min(46vh, 340px); aspect-ratio:1; display:grid; place-items:center; }
#core{ position:relative; z-index:2; width:100%; height:100%; display:block; }

/* コアを取り巻くホログラムリング（CSSで回す。Canvasの負荷を上げない） */
#core-ring{ position:absolute; inset:-6%; z-index:1; pointer-events:none; }
#core-ring span{ position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(94,234,255,.18); }
#core-ring span:nth-child(1){
  border-top-color:rgba(34,211,238,.75); border-bottom-color:rgba(34,211,238,.4);
  animation:spinA 14s linear infinite; }
#core-ring span:nth-child(2){ inset:9%;
  border-left-color:rgba(167,139,250,.6); border-right-color:transparent;
  animation:spinB 9s linear infinite reverse; }
#core-ring span:nth-child(3){ inset:-9%;
  border:1px dashed rgba(94,234,255,.14);
  animation:spinA 34s linear infinite reverse; }
@keyframes spinA{ to{ transform:rotate(360deg); } }
@keyframes spinB{ to{ transform:rotate3d(1,.3,0,360deg); } }

/* 状態に応じてリングの色味と速度を変える */
#core-wrap[data-mode="listening"] #core-ring span:nth-child(1){
  border-top-color:rgba(251,191,36,.85); border-bottom-color:rgba(251,191,36,.45);
  animation-duration:5s; }
#core-wrap[data-mode="listening"] #core-ring span:nth-child(2){ border-left-color:rgba(251,191,36,.6); }
#core-wrap[data-mode="thinking"] #core-ring span:nth-child(1){
  border-top-color:rgba(167,139,250,.9); border-bottom-color:rgba(167,139,250,.4);
  animation-duration:2.4s; }
#core-wrap[data-mode="speaking"] #core-ring span:nth-child(1){ animation-duration:7s; }

@media (max-width:860px), (pointer:coarse) and (max-width:1200px){
  #core-wrap{ width:min(38vh, 230px); }
}
@media (prefers-reduced-motion:reduce){
  #core-ring span{ animation:none !important; }
}