/* ==========================================================
   reactor/reactor.css
   ----------------------------------------------------------
   アークリアクター（components/reactor.blade.php の SVG）の大きさと色（D-49-06）。

   ■ 色
   ・SVG の光の部分は、ここの変数（--reactor-*）を使う。
   ・data-state で、BlogOS の状態の色に変える：
       normal（青）／warning（金）／critical（赤）
   ・金属の部分は状態で変えない。

   ■ 動き
   ・animation/reactor.css で管理する。
   ========================================================== */

.reactor {

    /* 光の色（normal：青） */
    --reactor-glow: #4fd3ff;
    --reactor-bright: #dcf8ff;
    --reactor-deep: #0a5f94;

    /* 光の脈打ちの速さ */
    --reactor-pulse: 3s;

    /* コイルの青い線が流れる速さ（1周期） */
    --reactor-flow: 0.8s;

    /* HUD の円の回転の速さ */
    --reactor-spin-a: 60s;
    --reactor-spin-b: 90s;

    /* 外側に広がる電子の輪（外ほど遅い） */
    --reactor-spin-c: 12s;
    --reactor-spin-d: 18s;
    --reactor-spin-e: 25s;
    --reactor-spin-f: 34s;


    position: relative;
    width: clamp(240px, 30vw, 340px);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}

.reactor[data-state="warning"] {
    --reactor-glow: #ffbf3c;
    --reactor-bright: #fff3d0;
    --reactor-deep: #8a5a00;
}

.reactor[data-state="critical"] {
    --reactor-glow: #ff4a3d;
    --reactor-bright: #ffe0db;
    --reactor-deep: #8e120c;
    --reactor-pulse: 1.5s;
    --reactor-flow: 0.5s;
}

/* ==========================================================
   状態ごとの動きの速さ（D-76。画面「アークリアクターの動き」で見比べられる）
   ・重なったときは、後に書いたものが勝つ（音声 ＞ AI の実行中 ＞ パネル（引き出し）の通常時 ＞ トップページの通常時）。
     どれも .reactor の属性で決め、強さ（詳細度）をそろえて、書いた順で決まるようにする
   ・data-scene・data-voice は、js/script.js が body の drawer-open・voice-* から写す（画面「アークリアクターの動き」では、決めた値を付ける）
   ・data-busy は、トップページを開いたときと、開いている間の確認（api.reactor.status）で付ける
   ========================================================== */

/* パネル（引き出し）を開いている間の通常時 */
.reactor[data-scene="drawer"] {
    --reactor-spin-a: 30s;
    --reactor-spin-b: 45s;
    --reactor-spin-c: 6s;
    --reactor-spin-d: 9s;
    --reactor-spin-e: 12.5s;
    --reactor-spin-f: 17s;
    --reactor-pulse: 1.5s;
    --reactor-flow: 0.4s;
}

/* AI の実行中（同期・定期実行・AI の実行など。音声は除く）。脈打ちはなく、一番明るいまま光らせる（animation/reactor.css） */
.reactor[data-busy="1"] {
    --reactor-spin-a: 12s;
    --reactor-spin-b: 18s;
    --reactor-spin-c: 4s;
    --reactor-spin-d: 6s;
    --reactor-spin-e: 8s;
    --reactor-spin-f: 11s;
    --reactor-flow: 0.2s;
}

/* 音声の操作中：変える値のほかは、トップページの通常時の値にする（ほかの状態と混ざらないようにする） */
.reactor[data-voice] {
    --reactor-spin-a: 60s;
    --reactor-spin-b: 90s;
    --reactor-spin-c: 12s;
    --reactor-spin-d: 18s;
    --reactor-spin-e: 25s;
    --reactor-spin-f: 34s;
    --reactor-pulse: 3s;
    --reactor-flow: 0.8s;
}

/* 聞いている間 */
.reactor[data-voice="listening"] {
    --reactor-pulse: 1s;
}

/* 考えている間 */
.reactor[data-voice="thinking"] {
    --reactor-spin-a: 6s;
    --reactor-spin-b: 9s;
    --reactor-flow: 0.4s;
}

/* 話している間 */
.reactor[data-voice="speaking"] {
    --reactor-pulse: 0.7s;
}

/* 重ねた SVG（D-73-01）。同じ大きさで重ね、回転・脈打ちは SVG そのものに付ける（中心は、SVG の箱の真ん中＝絵の中心 200,200） */
.reactor-layer {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    transform-origin: 50% 50%;
}

/* HUD の円の線 */
.reactor-hud circle {
    stroke: var(--reactor-glow);
}

.reactor-hud-a {
    opacity: 0.7;
}

/* ==========================================================
   コイルの中の電気（外枠の HUD と同じ蛍光色）
   ・base：うっすら光り続ける線
   ・spark-a：短い光（火花）が速く流れる（模様 3 + 13 = 16）
   ・spark-b：長い光がゆっくり流れ、ときどき明滅する（模様 14 + 34 = 48）
   ========================================================== */

.reactor-coil-base use,
.reactor-coil-spark-a use,
.reactor-coil-spark-b use {
    stroke: var(--reactor-glow);
    stroke-linecap: round;
}

.reactor-coil-base use {
    stroke-width: 1.1;
    opacity: 0.35;
}

.reactor-coil-spark-a use {
    stroke-width: 1.8;
    stroke-dasharray: 3 13;
}

.reactor-coil-spark-b use {
    stroke-width: 1.3;
    stroke-dasharray: 14 34;
}