/* ====================================================================
 * kaname_diag_anim.css — 診断（/kaname/diagnose）と結果（/kaname/result）の
 *   専用アニメーション層（2026-07-03・オーナー指示「診断にもアニメーションを」）。
 *
 * 読込: kaname_diagnose.html / kaname_result.html の head_extra のみ（base.html 不触）。
 *   cache-bust は kaname_diagnose_version（= kaname_diagnose.js の mtime）に相乗り。
 *   このCSS/JSを変えるときは必ず kaname_diagnose.js も同時に触れて mtime を進めること。
 *
 * 設計原則（motion2 と同じ）:
 *   - transform / opacity のみ（width/height/leftのアニメ禁止・60fps）
 *   - JS の常時 rAF なし（イベント駆動のみ）
 *   - prefers-reduced-motion で全停止（末尾の media で一括）
 *   - 既存レイヤー（kaname.css / lively / pop / result_viz / motion2）は不触・上書きのみ
 *   - keyframes は新名 ktdg-* のみ（既存 ktqEnter/ktqLeave 等と同名再定義しない）
 * ==================================================================== */

/* ====================================================================
 * 1) 設問遷移 — カードが「送られて」次の問いが入る。
 *    既存 kaname.css の .q-enter/.q-leave（translateX 18px・0.42s）を
 *    .kt-pop スコープの後勝ちで診断専用トランジションに強化。
 *    leave .26s / enter 親 .54s（JSのフォールバック解除は 700ms のまま安全圏）。
 * ================================================================== */
@keyframes ktdg-qout {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(-30px) scale(.985); }
}
@keyframes ktdg-qin {
  from { opacity: 0; transform: translateX(38px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* 送り: 去る問いは重ね（絶対配置）にして、次の問いを押し下げない
   （既存の q-leave は display:block のまま流れに残るため縦ズレが出る）。 */
.kt-pop .kt-diagnose #diagnose-form { position: relative; }
.kt-pop .kt-diagnose .q-step.q-leave {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  animation: ktdg-qout .26s cubic-bezier(.4, 0, .7, 1) both;
  pointer-events: none;
}
.kt-pop .kt-diagnose .q-step.q-enter {
  animation: ktdg-qin .54s cubic-bezier(.18, .8, .28, 1) both;
}
/* 子ステッガー: 問い文→選択肢1→選択肢2 の順にふわっと（親 .54s 内に完了）。 */
@keyframes ktdg-childin {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kt-pop .kt-diagnose .q-step.q-enter .q-text {
  animation: ktdg-childin .3s .04s cubic-bezier(.2, .7, .3, 1) both;
}
.kt-pop .kt-diagnose .q-step.q-enter .option-item--probe {
  animation: ktdg-childin .32s cubic-bezier(.2, .7, .3, 1) both;
}
.kt-pop .kt-diagnose .q-step.q-enter .option-item--probe:nth-child(1) { animation-delay: .10s; }
.kt-pop .kt-diagnose .q-step.q-enter .option-item--probe:nth-child(2) { animation-delay: .18s; }
.kt-pop .kt-diagnose .q-step.q-enter .option-item--probe:nth-child(n+3) { animation-delay: .22s; }

/* ====================================================================
 * 2) 選択の確定感 — 選ばなかったカードがすっと退く（選んだ方が主役に）。
 *    .has-pick は kaname_diagnose.js が selectOption で option-list に付与。
 * ================================================================== */
.kt-pop .kt-diagnose .option-list.has-pick .option-item--probe:not(.selected) {
  opacity: .38;
  transform: scale(.965);
  transition: opacity .22s ease, transform .22s ease;
}

/* ====================================================================
 * 3) 進捗バー — 回答のたびに要（かなめ）色のバーが伸びる。
 *    .ktdg-bar はテンプレの track、fill は JS が transform:scaleX を更新
 *    （width アニメ禁止のため transform で伸ばす）。
 * ================================================================== */
/* no-JS（全問スタック表示）ではバーは出さない（進捗の意味が無いため）。 */
.kt-diagnose.kt-nojs .ktdg-bar { display: none; }
.kt-pop .kt-diagnose .ktdg-bar {
  width: min(210px, 60%);
  height: 6px;
  margin: 2px auto 8px;
  border-radius: 99px;
  background: var(--ktp-indigo-bg, #E3ECFB);
  overflow: hidden;
}
.kt-pop .kt-diagnose .ktdg-bar-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--ktp-coral, #FF7A59), var(--ktp-mint, #2BB68A));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s cubic-bezier(.22, .9, .32, 1.08);
}
/* 済んだ粒は1回だけ「ぽん」と弾む（class done が付いた瞬間のみ発火）。 */
@keyframes ktdg-dotpop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}
.kt-pop .kt-diagnose .entry-dot.done { animation: ktdg-dotpop .38s ease-out; }
/* 「あと○問」ピルの小さな弾み（JSが文言更新時に付け直す）。 */
@keyframes ktdg-remainbump {
  0%   { transform: translateY(0) scale(1); }
  45%  { transform: translateY(-3px) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}
.kt-pop .kt-diagnose .entry-remain.ktdg-bump { animation: ktdg-remainbump .4s ease-out; }

/* ====================================================================
 * 4) 「見立て中」— 扇の要（かなめ）が骨を束ねるブランドモチーフ。
 *    handoff は .kt-wrap の外なので #entry-handoff 直スコープ。
 *    偽の進捗バー/パーセントは出さない（実待機は JS 側 1.4s のみ）。
 * ================================================================== */
#entry-handoff.kt-handoff .ktdg-fan {
  position: relative;
  width: 88px;
  height: 56px;
}
#entry-handoff.kt-handoff .ktdg-fan i {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 5px;
  height: 42px;
  margin-left: -2.5px;
  border-radius: 99px;
  background: var(--ktp-coral, #FF7A59);
  transform-origin: 50% 100%;
  transform: rotate(var(--a, 0deg));
  animation: ktdg-fanfold 1.5s cubic-bezier(.45, 0, .35, 1) infinite alternate;
}
/* handoff は .kt-pop の外＝トークン非到達のためブランド実色を直書き（kaname_pop.css と同値）。 */
#entry-handoff.kt-handoff .ktdg-fan i:nth-child(1) { --a: -52deg; background: #18C7AE; animation-delay: 0s; }    /* mint */
#entry-handoff.kt-handoff .ktdg-fan i:nth-child(2) { --a: -26deg; background: #FFC53D; animation-delay: .06s; }  /* sun */
#entry-handoff.kt-handoff .ktdg-fan i:nth-child(3) { --a: 0deg;   background: #FF7A59; animation-delay: .12s; }  /* coral */
#entry-handoff.kt-handoff .ktdg-fan i:nth-child(4) { --a: 26deg;  background: #2B6CF6; animation-delay: .18s; }  /* indigo */
#entry-handoff.kt-handoff .ktdg-fan i:nth-child(5) { --a: 52deg;  background: #FF6FB5; animation-delay: .24s; }  /* pink */
/* 開いた骨が要へ束ねられ、また開く（見立ての呼吸）。 */
@keyframes ktdg-fanfold {
  0%   { transform: rotate(var(--a, 0deg)); opacity: .92; }
  100% { transform: rotate(0deg); opacity: 1; }
}
/* 要の点（束ねる軸）: 静かに脈打つ。 */
#entry-handoff.kt-handoff .ktdg-fan-pivot {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--kt-ink, #2E2A24);
  animation: ktdg-pivot 1.5s ease-in-out infinite;
}
@keyframes ktdg-pivot {
  0%, 100% { transform: scale(1); opacity: .8; }
  50%      { transform: scale(1.25); opacity: 1; }
}
#entry-handoff.kt-handoff .entry-handoff-text {
  font-family: var(--kt-display, inherit);
  font-weight: 800;
  color: var(--kt-ink, #2E2A24);
}

/* ====================================================================
 * 5) 結果ヒーローのリビール — 「1回だけ・再訪時は静的」。
 *    html.ktdg-play は kaname_result.html の head 内スクリプトが
 *    sessionStorage の合図（診断フローからの到着・TTL60秒）でだけ付与。
 *    無ければ既存の lively/pop の入場アニメを静的最終状態に固定する
 *    ＝リビールの本体は既存アニメの「点火制御」（二重実装しない）。
 *    specificity: html:not(.ktdg-play) .kt-pop.kt-lively … ＝(0,4,1) で
 *    既存 .kt-pop.kt-lively.is-ready …（0,4,0）に勝つ。
 * ================================================================== */
html:not(.ktdg-play) .kt-pop.kt-lively .kt-result-kicker,
html:not(.ktdg-play) .kt-pop.kt-lively .kt-type,
html:not(.ktdg-play) .kt-pop.kt-lively .kt-type-oneline {
  animation: none;
  opacity: 1;
  transform: none;
}
html:not(.ktdg-play) .kt-pop.kt-lively .kt-type-sym img {
  animation: none;
  opacity: 1;
  transform: none;
}
/* 波紋（祝福リング）も再訪時は出さない（最終状態＝透明のまま）。 */
html:not(.ktdg-play) .kt-pop.kt-lively .kt-type-sym::before,
html:not(.ktdg-play) .kt-pop.kt-lively .kt-type-sym::after {
  animation: none;
}

/* リビール時の追い演出（既存の kicker→シンボル→型名→一言 に続けて）。
   ヒーロー領域のみ・fill both で開始前は隠れ、終了後は据わる。 */
@keyframes ktdg-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
html.ktdg-play .kt-rsec--hero .kt-sticker-row {
  animation: ktdg-rise .5s .32s ease-out both;
}
html.ktdg-play .kt-rsec--hero .kt-rsec-evidence {
  animation: ktdg-rise .55s 1.05s ease-out both;
}

/* ====================================================================
 * 6) 6軸レーダーの強化 — 面（.9s・result_viz 既存）に続き頂点の点が順に灯る。
 *    診断フロー由来（html.ktdg-play）の1回だけ＝再訪/直リンクは点も即表示
 *    （既存の面アニメは result_viz の設計のまま・不触）。
 *    reduced-motion では ktdg-play 自体が付かない＝即・全表示。
 * ================================================================== */
html.ktdg-play .kt-lively:not(.kt-nojs) .kt-radar-dot {
  opacity: 0;
  transition: opacity .35s ease;
}
html.ktdg-play .kt-lively:not(.kt-nojs) .kt-radar.is-in .kt-radar-dot { opacity: 1; }
html.ktdg-play .kt-lively:not(.kt-nojs) .kt-radar.is-in .kt-radar-dot:nth-of-type(1) { transition-delay: .50s; }
html.ktdg-play .kt-lively:not(.kt-nojs) .kt-radar.is-in .kt-radar-dot:nth-of-type(2) { transition-delay: .58s; }
html.ktdg-play .kt-lively:not(.kt-nojs) .kt-radar.is-in .kt-radar-dot:nth-of-type(3) { transition-delay: .66s; }
html.ktdg-play .kt-lively:not(.kt-nojs) .kt-radar.is-in .kt-radar-dot:nth-of-type(4) { transition-delay: .74s; }
html.ktdg-play .kt-lively:not(.kt-nojs) .kt-radar.is-in .kt-radar-dot:nth-of-type(5) { transition-delay: .82s; }
html.ktdg-play .kt-lively:not(.kt-nojs) .kt-radar.is-in .kt-radar-dot:nth-of-type(6) { transition-delay: .90s; }

/* ====================================================================
 * reduced-motion — この層の動きをすべて止める（表示は完全）。
 * ================================================================== */
@media (prefers-reduced-motion: reduce) {
  .kt-pop .kt-diagnose .q-step.q-enter,
  .kt-pop .kt-diagnose .q-step.q-leave,
  .kt-pop .kt-diagnose .q-step.q-enter .q-text,
  .kt-pop .kt-diagnose .q-step.q-enter .option-item--probe,
  .kt-pop .kt-diagnose .entry-dot.done,
  .kt-pop .kt-diagnose .entry-remain.ktdg-bump,
  #entry-handoff.kt-handoff .ktdg-fan i,
  #entry-handoff.kt-handoff .ktdg-fan-pivot,
  html.ktdg-play .kt-rsec--hero .kt-sticker-row,
  html.ktdg-play .kt-rsec--hero .kt-rsec-evidence {
    animation: none;
  }
  .kt-pop .kt-diagnose .option-list.has-pick .option-item--probe:not(.selected) {
    transition: none;
    transform: none;
  }
  .kt-pop .kt-diagnose .ktdg-bar-fill { transition: none; }
  html.ktdg-play .kt-lively:not(.kt-nojs) .kt-radar-dot,
  html.ktdg-play .kt-lively:not(.kt-nojs) .kt-radar.is-in .kt-radar-dot {
    opacity: 1;
    transition: none;
  }
}