/* ==========================================================
   animation/reactor.css
   ----------------------------------------------------------
   アークリアクターの動き（D-49-06）。

   ・金属（外枠・ボルト・コイルの枠・内側の輪）は動かさない
   ・光（コア・三角・中心・コイルの窓・金属に映る光）は、ゆっくり脈打つ（--reactor-pulse）
   ・コイルの中の電気は、円に沿って流れ、ときどき明滅する（--reactor-flow）
   ・コイルの中の電気と周りの HUD の円も、三角のコアと同じ間合いで脈打つ（--reactor-pulse）
   ・周りの HUD の円は、ゆっくり回る（--reactor-spin-a・b。逆向きに2つ）
   ・形 2 のコアの背面のコイルは、金属は回さず、中の電気を外側のコイルと逆向きに流す
   ・速さは reactor/reactor.css の変数で、状態ごとに変える
   ========================================================== */

@keyframes reactorPulse {

    0%,
    100% {
        opacity: 0.72;
    }

    50% {
        opacity: 1;
    }

}

/* 線の模様の長さの分だけずらすと、切れ目なく流れ続ける（短い光：16、長い光：48） */
@keyframes reactorFlow {

    to {
        stroke-dashoffset: -32;
    }

}

@keyframes reactorFlowLong {

    to {
        stroke-dashoffset: -96;
    }

}

/* 電気の明滅（不規則に見えるよう、段階的に変える） */
@keyframes reactorFlicker {

    0%, 100% { opacity: 1; }
    12% { opacity: 0.55; }
    18% { opacity: 1; }
    46% { opacity: 0.8; }
    52% { opacity: 0.4; }
    56% { opacity: 1; }
    83% { opacity: 0.7; }

}

@keyframes reactorSpin {

    to {
        transform: rotate(360deg);
    }

}

.reactor-halo,
.reactor-reflect {
    animation: reactorPulse var(--reactor-pulse) ease-in-out infinite;
}

/* コア（中心の光とコアの光）：明るさを大きく変え、光が少しふくらむ。速く明るくなり、ゆっくり落ちる */
@keyframes reactorCorePulse {

    0%,
    100% {
        opacity: 0.45;
        transform: scale(0.9);
        filter: brightness(0.85);
    }

    35% {
        opacity: 1;
        transform: scale(1.08);
        filter: brightness(1.6);
    }

}

/* 重ねた SVG（.reactor-layer）に付けるため、ふくらむ中心は SVG の箱の真ん中（reactor/reactor.css。D-73-01） */
.reactor-core-glow,
.reactor-center {
    animation: reactorCorePulse var(--reactor-pulse) ease-in-out infinite;
}

/* 三角のコア：コアと同じ間合いで、明るさを大きく変える（形は崩さない） */
@keyframes reactorGlow {

    0%,
    100% {
        opacity: 0.7;
        filter: brightness(0.9);
    }

    35% {
        opacity: 1;
        filter: brightness(1.7);
    }

}

.reactor-tri {
    animation: reactorGlow var(--reactor-pulse) ease-in-out infinite;
}

/* 電気（コイルの中の電気・周りの HUD の円）も、三角のコアと同じ間合いで脈打つ。
   コイルの電気は、にじみ（SVG の filter neon）を線ごとに付けているため、まとまり（g）の明るさを CSS の filter で変えられる。
   暗いときはほとんど消え、明るいときは強く光る（変化が分かるよう、HUD の円より幅を大きくする） */
@keyframes reactorElectricPulse {

    0%,
    100% {
        opacity: 0.15;
        filter: brightness(0.7) saturate(1) drop-shadow(0 0 0 var(--reactor-glow));
    }

    /* 明るさを上げすぎると白に近づくため、明るさは控えめにし、色の濃さと状態の色の光で目立たせる */
    35% {
        opacity: 1;
        filter: brightness(1.25) saturate(1.8) drop-shadow(0 0 4px var(--reactor-glow));
    }

}

@keyframes reactorHudPulse {

    0%,
    100% {
        opacity: 0.45;
        filter: brightness(0.9) saturate(1) drop-shadow(0 0 0 var(--reactor-glow));
    }

    /* コイルの電気と同じく、明るさは控えめにし、色の濃さと状態の色の光で目立たせる（白っぽくしない） */
    35% {
        opacity: 1;
        filter: brightness(1.15) saturate(1.8) drop-shadow(0 0 3px var(--reactor-glow));
    }

}

.reactor-coil-base,
.reactor-coil-spark-a,
.reactor-coil-spark-b {
    animation: reactorElectricPulse var(--reactor-pulse) ease-in-out infinite;
}

/* コイルは1つずつずらして脈打つ（ずらす時間は SVG の style="animation-delay"） */
.reactor-coil-lights use {
    animation: reactorPulse var(--reactor-pulse) ease-in-out infinite;
}

.reactor-coil-spark-a use {
    animation: reactorFlow var(--reactor-flow) linear infinite;
}

.reactor-coil-spark-b use {
    animation:
        reactorFlowLong calc(var(--reactor-flow) * 2.2) linear infinite,
        reactorFlicker 1.3s steps(1) infinite;
}

/* HUD の円は、重ねた SVG（.reactor-layer）ごと、SVG の箱の真ん中で回す（reactor/reactor.css。D-73-01。
   以前の SVG の中の座標（200px 200px）での指定は、Safari で拡大すると中心がずれていた） */
.reactor-core-coils {
    transform-origin: 200px 200px;
}

/* 形 2 のコアの背面のコイル：金属は回さず、中の電気を外側のコイルと逆向きに流す（D-49-06） */
.reactor-core-coils .reactor-coil-spark-a use {
    animation-direction: reverse;
}

.reactor-core-coils .reactor-coil-spark-b use {
    animation-direction: reverse, normal;
}

/* 回りながら、三角のコアと同じ間合いで脈打つ（reactorHudPulse） */
.reactor-hud-a {
    animation:
        reactorSpin var(--reactor-spin-a) linear infinite,
        reactorHudPulse var(--reactor-pulse) ease-in-out infinite;
}

.reactor-hud-b {
    animation:
        reactorSpin var(--reactor-spin-b) linear infinite reverse,
        reactorHudPulse var(--reactor-pulse) ease-in-out infinite;
}

/* 外側に広がる電子の輪：右回り・左回りを交互にする（b が左回りのため、c は右回りから） */
.reactor-hud-c {
    animation:
        reactorSpin var(--reactor-spin-c) linear infinite,
        reactorHudPulse var(--reactor-pulse) ease-in-out infinite;
}

.reactor-hud-d {
    animation:
        reactorSpin var(--reactor-spin-d) linear infinite reverse,
        reactorHudPulse var(--reactor-pulse) ease-in-out infinite;
}

.reactor-hud-e {
    animation:
        reactorSpin var(--reactor-spin-e) linear infinite,
        reactorHudPulse var(--reactor-pulse) ease-in-out infinite;
}

.reactor-hud-f {
    animation:
        reactorSpin var(--reactor-spin-f) linear infinite reverse,
        reactorHudPulse var(--reactor-pulse) ease-in-out infinite;
}

/* ==========================================================
   AI の実行中（.reactor の data-busy。D-76）：脈打ちを止め、一番明るいところ（各動きの 35%・50%）のまま光らせる。
   回転・コイルの電気の流れ・電気の明滅はそのまま。音声の操作中（data-voice）は、音声の動き（脈打ちあり）にする
   ========================================================== */

.reactor[data-busy="1"]:not([data-voice]) .reactor-halo,
.reactor[data-busy="1"]:not([data-voice]) .reactor-reflect,
.reactor[data-busy="1"]:not([data-voice]) .reactor-coil-lights use {
    animation: none;
    opacity: 1;
}

.reactor[data-busy="1"]:not([data-voice]) .reactor-core-glow,
.reactor[data-busy="1"]:not([data-voice]) .reactor-center {
    animation: none;
    opacity: 1;
    transform: scale(1.08);
    filter: brightness(1.6);
}

.reactor[data-busy="1"]:not([data-voice]) .reactor-tri {
    animation: none;
    opacity: 1;
    filter: brightness(1.7);
}

.reactor[data-busy="1"]:not([data-voice]) .reactor-coil-base,
.reactor[data-busy="1"]:not([data-voice]) .reactor-coil-spark-a,
.reactor[data-busy="1"]:not([data-voice]) .reactor-coil-spark-b {
    animation: none;
    opacity: 1;
    filter: brightness(1.25) saturate(1.8) drop-shadow(0 0 4px var(--reactor-glow));
}

.reactor[data-busy="1"]:not([data-voice]) .reactor-hud {
    opacity: 1;
    filter: brightness(1.15) saturate(1.8) drop-shadow(0 0 3px var(--reactor-glow));
}

.reactor[data-busy="1"]:not([data-voice]) .reactor-hud-a {
    animation: reactorSpin var(--reactor-spin-a) linear infinite;
}

.reactor[data-busy="1"]:not([data-voice]) .reactor-hud-b {
    animation: reactorSpin var(--reactor-spin-b) linear infinite reverse;
}

.reactor[data-busy="1"]:not([data-voice]) .reactor-hud-c {
    animation: reactorSpin var(--reactor-spin-c) linear infinite;
}

.reactor[data-busy="1"]:not([data-voice]) .reactor-hud-d {
    animation: reactorSpin var(--reactor-spin-d) linear infinite reverse;
}

.reactor[data-busy="1"]:not([data-voice]) .reactor-hud-e {
    animation: reactorSpin var(--reactor-spin-e) linear infinite;
}

.reactor[data-busy="1"]:not([data-voice]) .reactor-hud-f {
    animation: reactorSpin var(--reactor-spin-f) linear infinite reverse;
}