/* luna-fk01.css — FK01「月影の本気度鑑定」 視覚レイヤー（オプトイン表示層）
 * fk01_mock.html / fk01_NSK_layermap.md の意匠を、既存 diagnosis UI（モーダル駆動）の
 * 背面に敷く方式へ移植。ロジック・テンプレは不変。scope は .luna-fx--fk01 配下に限定。 */

/* ===== FX ステージ（全UIの背面・full-screen） ===== */
.luna-fx-stage--fk01 {
  position: fixed; inset: 0; z-index: 1; overflow: hidden;
  container-type: size; pointer-events: none; isolation: isolate;
  background: #05060c;
}
.luna-fx-stage--fk01 .layer {
  position: absolute; pointer-events: none;
  background-repeat: no-repeat; background-position: center; background-size: cover;
}
/* 月まわりは 1 グループで移動/縮小（NSK KF） */
.luna-fx-stage--fk01 .celestial {
  position: absolute; left: 50%; top: 26%;
  width: min(64cqw, 560px); height: min(64cqw, 560px);
  transform: translate(-50%, -50%) scale(1);
  transition: top .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1), opacity .6s ease;
  will-change: top, transform; z-index: 25;
}
.luna-fx-stage--fk01 .celestial .layer { inset: 0; width: 100%; height: 100%; }

/* 背景: bg_night_garden 画像は 2026-07-19 人間指示で不採用。CSS グラデの夜空で描く
   （再受領画像で差し替えるまでの正）。 */
/* 背景: 再受領した夜の庭画像を敷く（visual.js が outfile で background-image を設定）。
   画像未読込/404時のフォールバックとして暗い夜色を background-color に残す。 */
.luna-fx-stage--fk01 .l-bg {
  inset: 0; z-index: 0; animation: fk01-bg-zoom 46s ease-in-out infinite alternate;
  background-color: #0d0a24;
}
.luna-fx-stage--fk01 .l-stars {
  inset: 0; z-index: 5; mix-blend-mode: screen; opacity: .5; animation: fk01-star-blink 6.5s ease-in-out infinite;
  background:
    radial-gradient(1.4px 1.4px at 12% 18%,#fff,transparent 60%),
    radial-gradient(1.2px 1.2px at 78% 12%,#fff,transparent 60%),
    radial-gradient(1.6px 1.6px at 42% 30%,#fff,transparent 60%),
    radial-gradient(1.1px 1.1px at 62% 46%,#fff,transparent 60%),
    radial-gradient(1.3px 1.3px at 27% 62%,#fff,transparent 60%),
    radial-gradient(1.2px 1.2px at 88% 70%,#fff,transparent 60%),
    radial-gradient(1.5px 1.5px at 8% 82%,#fff,transparent 60%),
    radial-gradient(1.1px 1.1px at 52% 88%,#fff,transparent 60%);
}
.luna-fx-stage--fk01 .l-mist {
  left: -6%; top: 44%; width: 112%; height: 38%; z-index: 10;
  mix-blend-mode: screen; opacity: .42; animation: fk01-mist-drift 26s ease-in-out infinite alternate;
}
.luna-fx-stage--fk01 .l-shadow { z-index: 26; opacity: 0; transition: opacity .5s ease; }

.luna-fx-stage--fk01 .l-water { left: 0; top: 55%; width: 100%; height: 30%; z-index: 30; opacity: 0; transition: opacity .7s ease; }
.luna-fx-stage--fk01 .l-ripple { left: 50%; top: 62%; width: 40cqw; height: 20cqw; transform: translate(-50%,-50%); z-index: 31; opacity: 0; }

.luna-fx-stage--fk01 .foreground { position: absolute; inset: 0; z-index: 40; pointer-events: none; transition: opacity .8s ease; }
.luna-fx-stage--fk01 .l-branches { left: 0; top: 0; width: 100%; height: 36%; z-index: 41; }
.luna-fx-stage--fk01 .l-flowers-l { left: 0; bottom: 0; width: 34%; height: 44%; z-index: 42; }
.luna-fx-stage--fk01 .l-flowers-r { right: 0; bottom: 0; width: 34%; height: 44%; z-index: 42; }

/* ===== NSK キーフレーム状態（4状態） ===== */
.luna-fx-stage--fk01[data-fx-state="intro"] .celestial { top: 26%; transform: translate(-50%,-50%) scale(1); }
.luna-fx-stage--fk01[data-fx-state="quiz"] .celestial { top: 15%; transform: translate(-50%,-50%) scale(.5); }
.luna-fx-stage--fk01[data-fx-state="quiz"] .celestial { opacity: 0; }
.luna-fx-stage--fk01[data-fx-state="gathering"] .celestial { top: 31%; transform: translate(-50%,-50%) scale(.82); }
.luna-fx-stage--fk01[data-fx-state="result"] .celestial { opacity: 0; }
.luna-fx-stage--fk01[data-fx-state="quiz"] .foreground { opacity: .34; }
.luna-fx-stage--fk01[data-fx-state="gathering"] .foreground { opacity: .2; }
.luna-fx-stage--fk01[data-fx-state="result"] .foreground { opacity: .12; }
.luna-fx-stage--fk01[data-fx-state="gathering"] .l-water { opacity: .9; }
.luna-fx-stage--fk01[data-fx-state="gathering"] .l-ripple { opacity: .7; animation: fk01-ripple 1.4s ease-out infinite; }

/* ===== 既存モーダルUIを月シーンに載せる（fk01のみ・他占い不変） ===== */
.luna-fx--fk01 .luna-diagnosis__veil { background: none; }
.luna-fx--fk01 .luna-modal { background: rgba(6,7,14,.44); backdrop-filter: blur(12px); }
.luna-fx--fk01 .luna-gather { background: transparent; }
.luna-fx--fk01 .luna-imm .luna-modal { background: rgba(6,7,14,.44); backdrop-filter: blur(12px); }
/* 月由来の地紙を使わず、背景から分離した暗色パネルで質問を読ませる。 */
.luna-fx--fk01 .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--fk01 .luna-result {
  background: linear-gradient(180deg, rgba(18,14,34,.62), rgba(12,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（fk01接頭辞・衝突なし） ===== */
@keyframes fk01-mist-drift { from { transform: translateX(-5%); } to { transform: translateX(5%); } }
@keyframes fk01-bg-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes fk01-star-blink { 0%,100% { opacity: .35; } 50% { opacity: .62; } }
@keyframes fk01-ripple { from { transform: translate(-50%,-50%) scale(.6); opacity: .7; } to { transform: translate(-50%,-50%) scale(1.25); opacity: 0; } }

/* ===== reduced-motion（過剰な動きを停止） ===== */
@media (prefers-reduced-motion: reduce) {
  .luna-fx-stage--fk01 .l-bg,
  .luna-fx-stage--fk01 .l-stars,
  .luna-fx-stage--fk01 .l-mist,
  .luna-fx-stage--fk01 .l-ripple { animation: none !important; }
  .luna-fx-stage--fk01 .celestial,
  .luna-fx-stage--fk01 .foreground,
  .luna-fx-stage--fk01 .l-water,
  .luna-fx-stage--fk01 .l-shadow { transition: none !important; }
}

/* 設問中は夜空を深く沈め、質問パネルと選択肢だけを前面に残す。 */
.luna-fx-stage--fk01 { transition: filter .5s ease; }
.luna-fx-stage--fk01[data-fx-quizmode="1"] { filter: blur(18px) brightness(.58); }