/* Kirin OS の計器：キリンの目と石の VU（2026-10-07）
   どちらも毎フレームの処理を持たない。目は開く時だけ CSS で一度動き、VU の針は 100 ms ごとの値へ CSS の遷移で寄っていく。
   純白は使わない。橙の文字は使わない（金か象牙）。 */

/* ── キリンの目 ── */
[data-kirin-eye-frame] { display: inline-grid; place-items: center; padding: 0; margin: 0; border: 0; background: none; border-radius: 50%; line-height: 0; }
button[data-kirin-eye-frame] { cursor: pointer; }
button[data-kirin-eye-frame]:focus-visible { outline: 1px solid rgb(233 203 147 / .8); outline-offset: 3px; }
[data-kirin-eye] { display: block; overflow: visible; }
[data-kirin-eye-bezel] { fill: none; stroke-width: 3.2; }
[data-kirin-eye-sky] { opacity: .72; }
[data-kirin-eye-open="true"] [data-kirin-eye-sky] { opacity: .2; transition: opacity .6s ease; }
[data-kirin-eye-base] { animation: kirin-eye-fade .9s ease both; }
[data-kirin-eye-fibers] line { stroke-linecap: round; stroke-dasharray: 1; animation: kirin-eye-draw .55s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms) both; }
[data-kirin-eye-fibers] line[data-thin] { opacity: .55; }
[data-kirin-eye-collar] { stroke-width: 1.3; stroke-linejoin: round; stroke-dasharray: 1; animation: kirin-eye-draw .9s ease 600ms both, kirin-eye-fill .8s ease 1100ms both; }
[data-kirin-eye-limbus] { fill: none; stroke: rgb(3 5 11 / .9); stroke-width: 3.4; animation: kirin-eye-fade .8s ease 330ms both; }
[data-kirin-eye-pupil-live] { transform-box: view-box; transform-origin: 0 0; transform: scale(var(--kirin-eye-pupil-live, 1)); transition: transform .16s linear; }
[data-kirin-eye-pupil] { transform-box: view-box; transform-origin: 0 0; animation: kirin-eye-pupil 1s cubic-bezier(.2, .9, .2, 1) 1220ms both; }
[data-kirin-eye-star] { fill: rgb(250 243 228); transform-box: fill-box; transform-origin: center; animation: kirin-eye-star .55s cubic-bezier(.2, .9, .3, 1.45) 1520ms both; }
[data-kirin-eye-catch] { opacity: .82; }
[data-kirin-eye-spark] { fill: rgb(255 250 240 / .92); transform-box: fill-box; transform-origin: center; }
[data-kirin-eye-open="true"] [data-kirin-eye-spark] { animation: kirin-eye-glint 1.1s ease-out 2000ms both; }
[data-kirin-eye-position] circle { fill: #fff6df; }
[data-kirin-eye-position] circle[data-glow] { fill: rgb(255 244 214 / .35); }

@keyframes kirin-eye-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes kirin-eye-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kirin-eye-fill { from { fill-opacity: 0; } to { fill-opacity: 1; } }
@keyframes kirin-eye-pupil { from { transform: scale(.16); } to { transform: scale(1); } }
@keyframes kirin-eye-star { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes kirin-eye-glint { 0% { transform: scale(1); } 30% { transform: scale(2.4); } 100% { transform: scale(1); } }

/* ── 石の VU（左右） ── */
[data-kirin-vu-pair] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; width: max-content; max-width: 100%; margin: 0 0 10px; }
[data-kirin-vu-meters] { display: flex; gap: 6px; }
[data-kirin-vu-meter] {
  position: relative; display: block; flex: none; width: 128px; height: 60px; border-radius: 10px; overflow: hidden;
  background: radial-gradient(130% 150% at 50% 115%, #f1e9d8 0%, #e7ddc8 58%, #d6caaf 100%);
  box-shadow: inset 0 1px 2px rgb(30 22 10 / .42), inset 0 -1px 0 rgb(250 244 230 / .5), 0 0 0 1px rgb(201 167 104 / .28);
}
[data-kirin-vu-meter] svg { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-vu-part="scale"] { fill: none; stroke: rgb(46 36 20 / .55); stroke-width: 1; }
[data-vu-part="scale-hot"] { fill: none; stroke: #8a6a2e; stroke-width: 1.8; }
[data-vu-part="tick"] { stroke: rgb(46 36 20 / .6); stroke-width: 1; }
[data-vu-part="tick-hot"] { stroke: #8a6a2e; stroke-width: 1.3; }
[data-kirin-vu-meter] text { font: 500 6.6px var(--font-mono, monospace); fill: rgb(46 36 20 / .78); text-anchor: middle; }
[data-vu-part="number-hot"] { fill: #6f5320; }
[data-vu-part="label"] { font-weight: 600; font-size: 7.5px; letter-spacing: .16em; fill: rgb(46 36 20 / .5); }
[data-vu-part="channel"] { text-anchor: start; font-weight: 600; font-size: 7px; fill: rgb(46 36 20 / .55); }
[data-vu-part="reference"] { text-anchor: end; font-size: 6px; fill: rgb(46 36 20 / .55); }
[data-kirin-vu-meter] [data-vu-hl] { stroke: rgb(255 250 238 / .9); fill: none; }
[data-kirin-vu-meter] text[data-vu-hl] { fill: rgb(255 250 238 / .9); stroke: none; }
[data-kirin-vu-needle], [data-kirin-vu-needle-shadow] {
  position: absolute; left: 63.3px; top: 18px; width: 1.4px; height: 54px; border-radius: 1px; pointer-events: none;
  transform-origin: 50% 100%; transform: rotate(var(--kirin-vu-angle, -47deg));
  transition: transform .3s cubic-bezier(.3, .85, .35, 1.06);
}
[data-kirin-vu-needle] { background: linear-gradient(#b08a45, #6e5222 60%, #3a2b12); }
/* 影はぼかし（filter）を使わず、縁の柔らかい帯で描く。ぼかしと常時の will-change は、スクロールの合成を約 1.7 倍にした（2026-10-08 計測）。 */
[data-kirin-vu-needle-shadow] { left: 62.6px; width: 2.8px; background: linear-gradient(90deg, rgb(30 22 10 / 0), rgb(30 22 10 / .22) 50%, rgb(30 22 10 / 0)); transform: translate(calc(var(--sx, .35) * 2.6px), calc(var(--sy, 1.05) * 1.25px)) rotate(var(--kirin-vu-angle, -47deg)); } /* 針の影は白い石の光の向き（--sx・--sy）に落ちる */
[data-kirin-vu-lamp] { position: absolute; left: 114.6px; top: 8.6px; width: 4.8px; height: 4.8px; border-radius: 50%; background: rgb(46 36 20 / .2); transition: background-color .12s ease, box-shadow .12s ease; }
[data-kirin-vu-lamp="on"] { background: #c7a04a; box-shadow: 0 0 6px 2px rgb(199 160 74 / .65); }

/* 感度のつまみ（実機の Sensitivity と同じ 12〜20）。目盛りは象牙、選んだ値は金。つまみは刻みのある黒い金属で、押すと回る。 */
[data-kirin-vu-sensitivity] { position: relative; flex: none; width: 78px; height: 68px; }
[data-kirin-vu-sensitivity-label] { position: absolute; left: 0; right: 0; top: 0; text-align: center; font: italic 500 9.5px/1 Georgia, 'Times New Roman', serif; letter-spacing: .02em; color: rgb(233 223 202 / .8); }
[data-kirin-vu-sensitivity-mark] {
  position: absolute; transform: translate(-50%, -50%); padding: 2px 3px; margin: 0; border: 0; border-radius: 4px; background: none;
  font: 500 9px/1 Georgia, 'Times New Roman', serif; color: rgb(233 223 202 / .6); cursor: pointer; transition: color .15s ease;
}
[data-kirin-vu-sensitivity-mark]:hover { color: rgb(242 234 216 / .95); }
[data-kirin-vu-sensitivity-mark][aria-checked="true"] { color: #e9cb93; }
[data-kirin-vu-sensitivity-mark]:focus-visible, [data-kirin-vu-knob]:focus-visible { outline: 1px solid rgb(233 203 147 / .8); outline-offset: 1px; }
[data-kirin-vu-knob] {
  position: absolute; left: 50%; top: 62%; width: 24px; height: 24px; margin: -12px 0 0 -12px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  box-shadow: 0 2px 3px rgb(0 0 0 / .55), 0 0 0 1px rgb(0 0 0 / .35);
}
/* ジャングルの全ボタン共通の淡い光（NatureScene の [data-jungle="true"] button、!important）を、計器の部品には乗せない。 */
[data-kirin-vu-sensitivity] [data-kirin-vu-knob] { box-shadow: 0 2px 3px rgb(0 0 0 / .55), 0 0 0 1px rgb(0 0 0 / .35); }
[data-jungle="true"] [data-kirin-vu-sensitivity] [data-kirin-vu-sensitivity-mark],
[data-jungle="true"] [data-kirin-vu-sensitivity] [data-kirin-vu-sensitivity-mark]:hover,
[data-jungle="true"] [data-kirin-eye-frame][data-kirin-eye-frame],
[data-jungle="true"] [data-kirin-eye-frame][data-kirin-eye-frame]:hover { box-shadow: none !important; }
[data-jungle="true"] [data-kirin-vu-sensitivity] [data-kirin-vu-knob],
[data-jungle="true"] [data-kirin-vu-sensitivity] [data-kirin-vu-knob]:hover { box-shadow: 0 2px 3px rgb(0 0 0 / .65), 0 0 0 1px rgb(0 0 0 / .45) !important; }
[data-kirin-vu-knob] i {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, #34363c 0 56%, #1c1d21 58% 61%, transparent 62%), repeating-conic-gradient(#3d3f45 0deg 6deg, #24262b 6deg 12deg);
  transform: rotate(var(--kirin-vu-knob-angle, 0deg)); transition: transform .28s cubic-bezier(.3, .8, .3, 1);
}
[data-kirin-vu-knob] i::before { content: ""; position: absolute; left: 50%; top: 3px; width: 1.6px; height: 8px; margin-left: -.8px; border-radius: 1px; background: #efe6d2; }
[data-kirin-vu-knob]::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 35% 28%, rgb(255 250 238 / .26), rgb(255 250 238 / 0) 52%); }


[data-kirin-vu-knob] i { transition: transform .28s cubic-bezier(.3, .8, .3, 1) !important; }
[data-kirin-eye-pupil-live] { transition: transform .16s linear !important; }
[data-kirin-eye-open="true"] [data-kirin-eye-sky] { transition: opacity .6s ease !important; }
[data-kirin-eye-base] { animation: kirin-eye-fade .9s ease both !important; }
[data-kirin-eye-fibers] line { animation: kirin-eye-draw .55s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms) both !important; }
[data-kirin-eye-collar] { animation: kirin-eye-draw .9s ease 600ms both, kirin-eye-fill .8s ease 1100ms both !important; }
[data-kirin-eye-limbus] { animation: kirin-eye-fade .8s ease 330ms both !important; }
[data-kirin-eye-pupil] { animation: kirin-eye-pupil 1s cubic-bezier(.2, .9, .2, 1) 1220ms both !important; }
[data-kirin-eye-star] { animation: kirin-eye-star .55s cubic-bezier(.2, .9, .3, 1.45) 1520ms both !important; }
[data-kirin-eye-open="true"] [data-kirin-eye-spark] { animation: kirin-eye-glint 1.1s ease-out 2000ms both !important; }
@media (prefers-reduced-motion: reduce) {
  [data-kirin-eye] *, [data-kirin-eye-open="true"] [data-kirin-eye-spark] { animation: none !important; transition: none !important; }
  [data-kirin-vu-needle], [data-kirin-vu-needle-shadow] { transition: transform .12s linear !important; }
  [data-kirin-vu-knob] i, [data-kirin-vu-lamp] { transition: none !important; }
}
[data-kirin-vu-needle], [data-kirin-vu-needle-shadow] { transition: transform .3s cubic-bezier(.3, .85, .35, 1.06) !important; }
@media (prefers-reduced-motion: reduce) { [data-kirin-vu-needle], [data-kirin-vu-needle-shadow] { transition: transform .12s linear !important; } }