/* ==========================================================================
   技術の3項目の図（scripts/build-tech-art.mjs が生成するインラインSVG）
   平面のシンプルな線画。線はグレー、要となる線と点は差し色の青。
   図は完成した状態で書かれています。html[data-motion="on"] で .is-drawn になるまでを描き始めの状態にします。
   調整の目安：--ta-line（グレーの線）／--ta-object（スピーカー・頭）／--ta-accent（青）
   ========================================================================== */
.technology .tech-art { display: block; width: 100%; height: clamp(120px, 17vh, 160px); margin: 4px 0 14px; overflow: visible; }
.tech-art { --ta-line: #a6a9ae; --ta-object: var(--ink-soft); --ta-accent: var(--accent); }
:where(.tech-art) :where(path, circle, rect) { fill: none; stroke-linecap: round; stroke-linejoin: round; }
:where(.tech-art) text { stroke: none; }

/* 線 */
.ta-line { stroke: var(--ta-line); stroke-width: 1.6; }
.ta-dash { stroke: var(--ta-line); stroke-width: 1.5; stroke-dasharray: 3 4; }
.ta-object { stroke: var(--ta-object); stroke-width: 1.6; }
.ta-accent { stroke: var(--ta-accent); stroke-width: 2.2; }
.ta-base { stroke: var(--line); stroke-width: 1; }
.ta-cancel { stroke: var(--ta-line); stroke-width: 1.8; }
.ta-pulse { stroke: var(--ta-accent); stroke-width: 3.2; display: none; }

/* 点：音の位置、耳、スピーカーの左右のドライバー */
.ta-dot, .ta-ear, .ta-driver { fill: var(--ta-accent); stroke: none; }
.ta-dot { fill-opacity: .9; }

/* 文字（L・R と凡例だけ） */
.ta-label { font-family: var(--font); font-size: 11px; letter-spacing: .06em; fill: var(--muted); }
.ta-label-strong { font-weight: 600; fill: var(--ink-soft); }

/* ---------- 動き ---------- */
html[data-motion="on"] .tech-art .ta-draw { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease-soft); }
html[data-motion="on"] .tech-art .ta-accent.ta-draw { transition-delay: .3s; }
html[data-motion="on"] .tech-art .ta-arrow { transition-delay: .5s; }
html[data-motion="on"] .tech-item:not(.is-drawn) .tech-art .ta-draw { stroke-dashoffset: 1; transition: none; }
html[data-motion="on"] .tech-art :is(text, .ta-object, .ta-driver, .ta-ear, .ta-legend, .ta-base) { transition: opacity .8s var(--ease-soft); }
html[data-motion="on"] .tech-item:not(.is-drawn) .tech-art :is(text, .ta-object, .ta-driver, .ta-ear, .ta-legend, .ta-base) { opacity: 0; transition: none; }
/* 01：音の位置が、ひとつずつ現れる */
html[data-motion="on"] .tech-art .ta-dot { transform-box: fill-box; transform-origin: center; transition: opacity .7s var(--ease-soft), scale 1s var(--ease); transition-delay: calc(.9s + var(--k, 0) * .11s); }
html[data-motion="on"] .tech-item:not(.is-drawn) .tech-art .ta-dot { opacity: 0; scale: .3; transition: none; }
html[data-motion="on"] .is-drawn .tech-art .ta-dot { animation: ta-breathe 3.4s ease-in-out infinite; animation-delay: calc(2s + var(--k, 0) * -.7s); }
@keyframes ta-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
/* 02：反対の耳へ回り込む音が現れ、逆の波と重なって消える（×） */
html[data-motion="on"] .tech-art .ta-cross { transition: opacity .9s ease .9s; }
html[data-motion="on"] .tech-item:not(.is-drawn) .tech-art .ta-cross { opacity: 0; transition: none; }
html[data-motion="on"] .tech-item.is-settled .tech-art .ta-cross { opacity: .45; transition: opacity 1.2s ease; }
html[data-motion="on"] .tech-art .ta-cancel { transform-box: fill-box; transform-origin: center; transition: opacity .5s ease, scale .8s var(--ease); }
html[data-motion="on"] .tech-item:not(.is-settled) .tech-art .ta-cancel { opacity: 0; scale: .4; }
/* 直接届く音に、静かな脈 */
html[data-motion="on"] .is-settled .tech-art .ta-pulse { display: inline; stroke-dasharray: .06 .94; animation: ta-flow 2.8s linear infinite; }
@keyframes ta-flow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* 03：補正なしの点線は位置によって形が変わる（tech-art.mjs）。点線は線を引かず、ふわりと現れる */
html[data-motion="on"] .tech-art .ta-uncorrected { transition: opacity 1s var(--ease-soft) .6s; }
html[data-motion="on"] .tech-item:not(.is-drawn) .tech-art .ta-uncorrected { opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) { .tech-art * { transition: none !important; animation: none !important; } }

@media (max-width: 700px) { .technology .tech-art { width: min(300px, 100%); height: auto; margin: 4px auto 14px; } }