/* luna-fk05.css — FK05「待つ星・離れる星の天秤」 視覚レイヤー（オプトイン表示層）
 * fk05_mock.html の天秤意匠を、既存 diagnosis UI（モーダル駆動）の背面に敷く。
 * ロジック・テンプレは不変。scope は .luna-fx-stage--fk05 / .luna-fx--fk05 配下に限定。 */

.luna-fx-stage--fk05 {
  position: fixed; inset: 0; z-index: 1; overflow: hidden;
  container-type: size; pointer-events: none; isolation: isolate; background: #05060e;
}
.luna-fx-stage--fk05 .layer { position: absolute; pointer-events: none; background-repeat: no-repeat; background-position: center; background-size: cover; }

/* 背景 */
.luna-fx-stage--fk05 .fk05-bg-hall { inset: 0; z-index: 0; animation: fk05-hall-zoom 50s ease-in-out infinite alternate; }
.luna-fx-stage--fk05 .fk05-bg-nebula { inset: 0; z-index: 5; mix-blend-mode: screen; opacity: .5; animation: fk05-nebula-drift 40s ease-in-out infinite; }
.luna-fx-stage--fk05 .fk05-stars {
  inset: 0; z-index: 6; mix-blend-mode: screen; opacity: .5; animation: fk05-twinkle 7s ease-in-out infinite;
  background:
    radial-gradient(1.4px 1.4px at 16% 20%,#fff,transparent 60%), radial-gradient(1.2px 1.2px at 72% 14%,#fff,transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 32%,#fff,transparent 60%), radial-gradient(1.1px 1.1px at 60% 50%,#fff,transparent 60%),
    radial-gradient(1.3px 1.3px at 24% 66%,#fff,transparent 60%), radial-gradient(1.2px 1.2px at 86% 72%,#fff,transparent 60%),
    radial-gradient(1.4px 1.4px at 10% 84%,#fff,transparent 60%), radial-gradient(1.1px 1.1px at 54% 88%,#fff,transparent 60%);
}

/* 前景の柱 */
.luna-fx-stage--fk05 .fk05-foreground { position: absolute; inset: 0; z-index: 40; pointer-events: none; transition: opacity .8s ease; }
.luna-fx-stage--fk05 .fk05-pillar { z-index: 41; }
.luna-fx-stage--fk05 .fk05-pillar--l { left: 0; bottom: 0; width: 22%; height: 92%; }
.luna-fx-stage--fk05 .fk05-pillar--r { right: 0; bottom: 0; width: 22%; height: 92%; }

/* 天秤群（KFで移動/縮小） */
.luna-fx-stage--fk05 .fk05-scale {
  position: absolute; left: 50%; top: 53%;
  width: min(90cqw, 520px); height: min(108cqw, 620px);
  transform: translate(-50%, -50%) scale(1);
  transition: top .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
  will-change: top, transform; z-index: 25;
}
.luna-fx-stage--fk05 .fk05-base { left: 50%; bottom: 4%; width: 60%; height: 15%; transform: translateX(-50%); z-index: 26; }
.luna-fx-stage--fk05 .fk05-column {
  position: absolute; left: 50%; bottom: 16%; width: 4%; height: 44%; transform: translateX(-50%); z-index: 27;
  background: linear-gradient(90deg, oklch(0.28 0.03 84 / .4), oklch(0.55 0.05 84 / .7) 45%, oklch(0.28 0.03 84 / .4));
  border-radius: 3px;
}
/* 竿（beam）: 中心ピボットで --beam-angle 回転 */
.luna-fx-stage--fk05 .fk05-beam {
  left: 8%; top: 26%; width: 84%; height: 8%; z-index: 28;
  transform-origin: center; transform: rotate(var(--beam-angle, 0deg));
  transition: transform .85s cubic-bezier(.34,.9,.4,1);
}
/* 皿の吊り下げ: beam端に付き、逆回転で常に水平 */
.luna-fx-stage--fk05 .fk05-hang { position: absolute; top: 90%; width: 34%; height: 0; transform-origin: top center; transform: rotate(calc(-1 * var(--beam-angle, 0deg))); }
.luna-fx-stage--fk05 .fk05-hang--l { left: 4%; }
.luna-fx-stage--fk05 .fk05-hang--r { right: 4%; }
.luna-fx-stage--fk05 .fk05-hang::before { /* 鎖（V字） */
  content: ""; position: absolute; left: 50%; top: -2px; width: 60%; height: 42px; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, oklch(0.7 0.05 84 / .5)); clip-path: polygon(0 0, 100% 0, 55% 100%, 45% 100%);
}
.luna-fx-stage--fk05 .fk05-pan { position: absolute; left: 50%; top: 40px; width: 100%; height: 60%; transform: translateX(-50%); z-index: 2; }
.luna-fx-stage--fk05 .fk05-glow { inset: -30%; width: 160%; height: 160%; mix-blend-mode: screen; opacity: 0; transition: opacity .5s ease; animation: fk05-orb-pulse 5s ease-in-out infinite; }
.luna-fx-stage--fk05 .fk05-orb { left: 50%; top: 0; width: 64%; height: 64%; transform: translateX(-50%); opacity: 0; transition: opacity .5s ease; }

/* 傾き光条（result で点灯） */
.luna-fx-stage--fk05 .fk05-tilt { top: 8%; width: 46%; height: 66%; z-index: 20; opacity: 0; transition: opacity .8s ease; mix-blend-mode: screen; }
.luna-fx-stage--fk05 .fk05-tilt--l { left: 2%; }
.luna-fx-stage--fk05 .fk05-tilt--r { right: 2%; }

/* ===== KF 状態 ===== */
.luna-fx-stage--fk05[data-fx-state="intro"] .fk05-scale { top: 53%; transform: translate(-50%,-50%) scale(1); }
.luna-fx-stage--fk05[data-fx-state="quiz"] .fk05-scale { top: 21%; transform: translate(-50%,-50%) scale(.58); }
.luna-fx-stage--fk05[data-fx-state="quiz"] .fk05-scale { opacity: 0; }
.luna-fx-stage--fk05[data-fx-state="gathering"] .fk05-scale { top: 45%; transform: translate(-50%,-50%) scale(1.03); }
.luna-fx-stage--fk05[data-fx-state="result"] .fk05-scale { top: 31%; transform: translate(-50%,-50%) scale(.82); }
.luna-fx-stage--fk05[data-fx-state="quiz"] .fk05-foreground { opacity: .3; }
.luna-fx-stage--fk05[data-fx-state="gathering"] .fk05-foreground { opacity: .2; }
.luna-fx-stage--fk05[data-fx-state="result"] .fk05-foreground { opacity: .16; }
.luna-fx-stage--fk05[data-fx-state="result"] .fk05-tilt { opacity: .7; }

/* ===== 既存モーダルUIを天秤に載せる（fk05のみ） ===== */
.luna-fx--fk05 .luna-diagnosis__veil { background: none; }
.luna-fx--fk05 .luna-modal, .luna-fx--fk05 .luna-imm .luna-modal { background: rgba(6,7,16,.44); backdrop-filter: blur(12px); }
.luna-fx--fk05 .luna-gather { background: transparent; }
.luna-fx--fk05 .luna-question {
  background: linear-gradient(180deg, rgba(24,20,46,.96), rgba(13,11,29,.98));
  border: 1px solid rgba(216,184,120,.36);
  padding: clamp(22px,4vh,42px) clamp(20px,5vw,54px); border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
.luna-fx--fk05 .luna-result {
  background: linear-gradient(180deg, rgba(16,14,34,.62), rgba(10,9,26,.72));
  border: 1px solid rgba(212,180,106,.22); border-radius: 20px;
  padding: clamp(20px,4vh,40px) clamp(18px,5vw,44px); backdrop-filter: blur(3px);
}

/* ===== keyframes（fk05接頭辞） ===== */
@keyframes fk05-hall-zoom { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes fk05-nebula-drift { 0% { transform: translate(0,0); } 50% { transform: translate(3%,-2%); } 100% { transform: translate(-2%,2%); } }
@keyframes fk05-twinkle { 0%,100% { opacity: .4; } 50% { opacity: .62; } }
@keyframes fk05-orb-pulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.16); } }

/* ===== reduced-motion（最終角度へ即時・動き停止） ===== */
@media (prefers-reduced-motion: reduce) {
  .luna-fx-stage--fk05 .fk05-bg-hall, .luna-fx-stage--fk05 .fk05-bg-nebula,
  .luna-fx-stage--fk05 .fk05-stars, .luna-fx-stage--fk05 .fk05-glow { animation: none !important; }
  .luna-fx-stage--fk05 .fk05-scale, .luna-fx-stage--fk05 .fk05-beam,
  .luna-fx-stage--fk05 .fk05-hang, .luna-fx-stage--fk05 .fk05-foreground,
  .luna-fx-stage--fk05 .fk05-tilt, .luna-fx-stage--fk05 .fk05-orb, .luna-fx-stage--fk05 .fk05-glow { transition: none !important; }
}

/* 設問モーダル中は背景ステージをぼかして手前のパネルを強調（2026-07-19 人間指示）。result では解除 */
.luna-fx-stage--fk05 { transition: filter .5s ease; }
.luna-fx-stage--fk05[data-fx-quizmode="1"] { filter: blur(18px) brightness(.58); }