/* ================================================================== */
/* kaname_lively.css — Kaname「引き込む」層                         */
/*   目的: 墨×藍×明朝の“品”は残したまま、地味さを脱却する。           */
/*     ・温かいアクセント（古色の橙＝terra）を最小限に足す             */
/*     ・第一印象（LP ヒーロー）に“生きた間”と動きを作る               */
/*     ・スクロールで要素がふわりと生きて出る（.kt-rise）              */
/*     ・結果の型シンボルに、静かな祝福の出現を与える                  */
/*   すべて .kt-lively スコープの中だけ。Michi/他ルートには無干渉。     */
/*   prefers-reduced-motion を末尾で尊重（動かさず即・静かに表示）。    */
/* ================================================================== */
.kt-lively {
  /* kaname.css の --kt-* を継承しつつ、温かいアクセントを足す。 */
  --ktl2-terra:    #C57B57;   /* 古色の橙（温かい差し色・テラコッタ） */
  --ktl2-terra-d:  #A85F3E;   /* 深い橙（hover・締め） */
  --ktl2-terra-bg: #F6E9DF;   /* 橙のごく薄い面 */
  --ktl2-amber:    #D9A441;   /* 灯（あかり）の金 */
  --ktl2-ease: cubic-bezier(.22, .61, .36, 1);
  --ktl2-ease-soft: cubic-bezier(.33, .9, .42, 1);
}

/* ================================================================== */
/* ① 出現（.kt-rise）：見えたらふわりと立ち上がる。順に少し遅らせる。  */
/*    JS（kaname_lively.js）が .is-in を付ける。no-js では即表示。    */
/* ================================================================== */
.kt-lively .kt-rise {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .85s var(--ktl2-ease), transform .85s var(--ktl2-ease);
  will-change: opacity, transform;
}
.kt-lively .kt-rise.is-in { opacity: 1; transform: none; }
/* JS 無効・未起動でも内容は必ず見える（保険）。 */
.kt-lively.kt-nojs .kt-rise { opacity: 1; transform: none; }

/* ================================================================== */
/* ② 生きたヒーロー（LP）                                              */
/*    ・背後に温かい光のにじみ（藍×橙のグラデが静かに呼吸する）        */
/*    ・ブランドマークが線で“描かれ”、ほのかに灯る                     */
/*    ・見出しの下に藍の一筋が引かれる                                 */
/* ================================================================== */
.kt-lively .kt-hero-stage {
  position: relative;
  margin: 0 0 6px;
  padding: 8px 0 4px;
  isolation: isolate;
  /* にじみ・光が版面の外へ出ても横スクロールを生まないよう内側で抱える。 */
  overflow: clip;
}
/* 光のにじみ（背後）。彩度は抑え、上品な“あたたかさ”だけ置く。 */
.kt-lively .kt-hero-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 44%;
  width: 116%;
  height: 360px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(46% 42% at 38% 38%, rgba(197,123,87,0.18), transparent 70%),
    radial-gradient(50% 46% at 70% 58%, rgba(58,90,130,0.16), transparent 72%);
  filter: blur(6px);
  pointer-events: none;
  animation: kt-aura 13s ease-in-out infinite;
}
@keyframes kt-aura {
  0%,100% { opacity: .85; transform: translate(-50%, -50%) scale(1); }
  50%     { opacity: 1;   transform: translate(-50%, -52%) scale(1.06); }
}

/* ブランドマーク（円相＋足るの一筋）を生かす見せ場。 */
.kt-lively .kt-hero-mark {
  display: block;
  width: 84px;
  height: 84px;
  margin: 2px auto 14px;
}
.kt-lively .kt-hero-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* 円相は描かれる。足るの一筋は遅れて引かれ、点が灯る。 */
.kt-lively .kt-hero-mark .khm-enso {
  fill: none; stroke: var(--kt-ink, #2E2A24); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 250; stroke-dashoffset: 250;
}
.kt-lively .kt-hero-mark .khm-line {
  stroke: var(--kt-accent, #3A5A82); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 56; stroke-dashoffset: 56;
}
.kt-lively .kt-hero-mark .khm-dot { fill: var(--ktl2-terra); opacity: 0; transform-origin: 42px 42px; }
.kt-lively.is-ready .kt-hero-mark .khm-enso { animation: kt-draw 1.5s .15s var(--ktl2-ease) forwards; }
.kt-lively.is-ready .kt-hero-mark .khm-line { animation: kt-draw 1.0s .95s var(--ktl2-ease) forwards; }
.kt-lively.is-ready .kt-hero-mark .khm-dot  { animation: kt-glow 1.3s 1.6s var(--ktl2-ease) forwards; }
@keyframes kt-draw { to { stroke-dashoffset: 0; } }
@keyframes kt-glow {
  0%   { opacity: 0; transform: scale(.3); }
  55%  { opacity: 1; transform: scale(1.35); }
  100% { opacity: 1; transform: scale(1); }
}

/* 見出しの下の一筋（ヒーローの締め・藍が左から引かれる）。 */
.kt-lively .kt-hero-rule {
  display: block;
  width: 0;
  height: 2px;
  margin: 18px auto 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--kt-accent, #3A5A82), var(--ktl2-terra));
  opacity: .9;
}
.kt-lively.is-ready .kt-hero-rule {
  animation: kt-rule 1.1s 1.15s var(--ktl2-ease) forwards;
}
@keyframes kt-rule { to { width: 72px; } }

/* ヒーロー見出し自体を一語ずつでなく一拍で持ち上げる（明朝の品を保つ）。 */
.kt-lively .kt-hero {
  opacity: 0;
  transform: translateY(10px);
}
.kt-lively.is-ready .kt-hero {
  animation: kt-rise-soft 1s .35s var(--ktl2-ease) forwards;
}
@keyframes kt-rise-soft { to { opacity: 1; transform: none; } }

/* 素材（static/kaname_motion / kaname_img）が来たら差し込むスロット。 */
/* 無い間は表示されない（テンプレ側で has-media を付けたときだけ出る）。 */
.kt-lively .kt-hero-media {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 4px auto 18px;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--kt-accent-bg, #EAEEF4), var(--ktl2-terra-bg));
  box-shadow: 0 10px 36px rgba(70,62,48,.12);
}
.kt-lively .kt-hero-media img,
.kt-lively .kt-hero-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ================================================================== */
/* ③ CTA ボタンに“生きた手応え”（Kanameの藍ボタンへ温かい縁取り光）  */
/* ================================================================== */
.kt-lively .kt-btn--primary {
  position: relative;
  overflow: hidden;
  transition: transform .25s var(--ktl2-ease-soft), box-shadow .3s var(--ktl2-ease-soft);
}
/* 静かに呼吸する灯（押したくなる手応え・煽らない強さ）。 */
.kt-lively .kt-btn--primary::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(197,123,87,0);
  animation: kt-pulse 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes kt-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(197,123,87,0); }
  50%     { box-shadow: 0 0 0 6px rgba(197,123,87,.10); }
}
.kt-lively .kt-btn--primary:hover { transform: translateY(-2px); }
.kt-lively .kt-btn--primary:active { transform: translateY(0) scale(.99); }
/* タップで光が走る（sheen）。 */
.kt-lively .kt-btn--primary::before {
  content: "";
  position: absolute; top: 0; left: -40%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg);
  opacity: 0;
}
.kt-lively .kt-btn--primary:hover::before { animation: kt-sheen 1.1s var(--ktl2-ease) forwards; }
@keyframes kt-sheen { from { left: -40%; opacity: 1; } to { left: 130%; opacity: 0; } }

/* 提案カードを少し温かく（左に橙の細い一筋＝差し色）。 */
.kt-lively .kt-lp .kt-card--soft {
  border-left: 3px solid var(--ktl2-terra);
}
.kt-lively .kt-card-kicker {
  display: inline-block;
  background: var(--ktl2-terra-bg);
  color: var(--ktl2-terra-d);
  padding: 4px 14px;
  border-radius: 999px;
  letter-spacing: .16em;
}

/* プロミスの点を、温かい橙へ（生き生きと出る）。 */
.kt-lively .kt-promise li .kt-dot {
  background: var(--ktl2-terra);
  box-shadow: 0 0 0 3px var(--ktl2-terra-bg);
}
.kt-lively .kt-promise li { transition: transform .3s var(--ktl2-ease); }
.kt-lively .kt-promise li:hover { transform: translateX(3px); }

/* ================================================================== */
/* ④ 結果：型シンボルの“静かな祝福”                                    */
/*    シンボルが浮かび上がり、藍と橙の波紋がひと呼吸広がる。           */
/* ================================================================== */
.kt-lively .kt-type-sym {
  position: relative;
}
.kt-lively .kt-type-sym img {
  position: relative;
  z-index: 2;
  width: 96px; height: 96px;
  opacity: 0;
  transform: scale(.82);
}
.kt-lively.is-ready .kt-type-sym img {
  animation: kt-sym-in 1s .25s var(--ktl2-ease) forwards;
}
@keyframes kt-sym-in {
  0%   { opacity: 0; transform: scale(.82); }
  60%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
/* 波紋（祝福・煽らず一度だけ広がる）。藍→橙の二重リング。 */
.kt-lively .kt-type-sym::before,
.kt-lively .kt-type-sym::after {
  content: "";
  position: absolute;
  top: 48px; left: 50%;
  width: 96px; height: 96px;
  margin: -48px 0 0 -48px;
  border-radius: 50%;
  border: 1.5px solid var(--kt-accent, #3A5A82);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
.kt-lively .kt-type-sym::after { border-color: var(--ktl2-terra); }
.kt-lively.is-ready .kt-type-sym::before { animation: kt-ripple 1.8s .5s var(--ktl2-ease) forwards; }
.kt-lively.is-ready .kt-type-sym::after  { animation: kt-ripple 1.8s .72s var(--ktl2-ease) forwards; }
@keyframes kt-ripple {
  0%   { opacity: .55; transform: scale(.6); }
  100% { opacity: 0;   transform: scale(2.1); }
}

/* 型名・一言を、シンボルに続けて静かに持ち上げる。 */
.kt-lively .kt-result-kicker,
.kt-lively .kt-type,
.kt-lively .kt-type-oneline {
  opacity: 0;
  transform: translateY(10px);
}
.kt-lively.is-ready .kt-result-kicker { animation: kt-rise-soft .9s .15s var(--ktl2-ease) forwards; }
.kt-lively.is-ready .kt-type          { animation: kt-rise-soft .9s .55s var(--ktl2-ease) forwards; }
.kt-lively.is-ready .kt-type-oneline  { animation: kt-rise-soft .9s .8s var(--ktl2-ease) forwards; }

/* 強みブロックに温かい縁（必ず良い面から＝価値の瞬間を温める）。 */
.kt-lively .kt-block--strength {
  background: linear-gradient(160deg, var(--kt-accent-bg, #EAEEF4), var(--ktl2-terra-bg));
  position: relative;
  overflow: hidden;
}
.kt-lively .kt-block--strength::before {
  content: "";
  position: absolute; top: -30px; right: -30px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217,164,65,.18), transparent 70%);
  pointer-events: none;
}
/* “整える一歩”を少し温かく強調（行動の背を押す・煽らない）。 */
.kt-lively .kt-step {
  border-left: 3px solid var(--ktl2-amber);
}
.kt-lively .kt-step-label::before { background: var(--ktl2-amber); }

/* evidence（本人の根拠）に、静かな出現の手応え。 */
.kt-lively .kt-evidence { transition: transform .3s var(--ktl2-ease); }

/* ================================================================== */
/* ⑤ 浮遊する微粒（ambient）：LP/結果の背後にひと粒ふた粒、静かに漂う。 */
/*    過剰にしない（数を絞る）。reduced-motion で消える。              */
/* ================================================================== */
.kt-lively .kt-motes {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.kt-lively .kt-mote {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ktl2-terra);
  opacity: 0;
  animation: kt-float 16s linear infinite;
}
.kt-lively .kt-mote:nth-child(1) { left: 14%; bottom: -10px; width: 5px; height: 5px; background: var(--kt-accent, #3A5A82); animation-delay: 0s; animation-duration: 18s; }
.kt-lively .kt-mote:nth-child(2) { left: 42%; bottom: -10px; width: 7px; height: 7px; animation-delay: 4s; animation-duration: 21s; }
.kt-lively .kt-mote:nth-child(3) { left: 68%; bottom: -10px; width: 4px; height: 4px; background: var(--ktl2-amber); animation-delay: 8s; animation-duration: 19s; }
.kt-lively .kt-mote:nth-child(4) { left: 86%; bottom: -10px; width: 5px; height: 5px; background: var(--kt-accent, #3A5A82); animation-delay: 12s; animation-duration: 23s; }
@keyframes kt-float {
  0%   { opacity: 0; transform: translateY(0) translateX(0); }
  12%  { opacity: .5; }
  88%  { opacity: .4; }
  100% { opacity: 0; transform: translateY(-104vh) translateX(18px); }
}
/* 本文を必ず前面に（微粒は背後の装飾）。 */
.kt-lively .kt-inner { position: relative; z-index: 1; }

/* ================================================================== */
/* ⑥ 診断画面：選択肢の手応えを温かく（タップで橙のさざ波）。          */
/* ================================================================== */
.kt-lively.kt-diagnose .option-item--probe {
  transition: transform .22s var(--ktl2-ease-soft), border-color .25s var(--ktl2-ease), background .25s var(--ktl2-ease);
}
.kt-lively.kt-diagnose .option-item--probe:active { transform: scale(.985); }
.kt-lively.kt-diagnose .option-item--probe.selected,
.kt-lively.kt-diagnose .option-item--probe.tapped {
  border-color: var(--ktl2-terra);
  box-shadow: 0 6px 22px rgba(197,123,87,.16);
}

/* 締めの一拍（handoff）の珠に、温かい灯をひとつ足す。
   handoff は .kt-wrap の外（兄弟）なので .kt-handoff 直接スコープで当てる。 */
.entry-handoff.kt-handoff .entry-handoff-orb {
  background: radial-gradient(circle at 38% 36%, var(--ktl2-amber), var(--kt-accent, #3A5A82));
  box-shadow: 0 0 18px rgba(217,164,65,.45), 0 0 44px rgba(58,90,130,.3);
}

/* ================================================================== */
/* ⑦ 学習（.ktl）への温かさの足し（学習JSは触らず、CSSだけで彩る）。   */
/*    地味さ脱却: 道の節・カードのホバー・図解枠に橙の灯をひとつ。      */
/* ================================================================== */
/* 学びの道: 進んだ線を藍→橙のグラデへ（前に進むのが楽しい色）。 */
.ktl .ktl-path::after {
  background: linear-gradient(var(--kt-accent, #3A5A82), var(--ktl2-terra, #C57B57));
}
/* 完了した節は橙の灯で満ちる（達成の温かさ）。 */
.ktl .ktl-node.is-done .ktl-node-dot {
  background: var(--ktl2-terra, #C57B57);
  border-color: var(--ktl2-terra, #C57B57);
  box-shadow: 0 0 0 4px var(--ktl2-terra-bg, #F6E9DF);
}
/* カードのホバーに温かい持ち上がり。 */
.ktl .ktl-card:hover {
  box-shadow: 0 10px 30px rgba(197,123,87,.16);
}
.ktl .ktl-card:hover .ktl-card-no { color: var(--ktl2-terra-d, #A85F3E); transition: color .35s ease; }
/* 図解枠（プレースホルダ）に、ごく薄い温かいにじみ（白い空白を温める）。 */
.ktl .ktl-figure-ph {
  background:
    radial-gradient(120% 80% at 50% 0%, var(--ktl2-terra-bg, #F6E9DF), transparent 60%),
    var(--kt-bg-soft, #FBF9F4);
}
/* レッスンの「次へ」ボタンも、引き込む手応え（呼吸する灯）を共有。 */
.ktl .kt-btn--primary { position: relative; overflow: hidden; }
.ktl .kt-btn--primary::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(197,123,87,0);
  animation: kt-pulse 3.2s ease-in-out infinite; pointer-events: none;
}

@media (max-width: 380px) {
  .kt-lively .kt-hero-mark { width: 74px; height: 74px; }
  .kt-lively .kt-hero-stage::before { height: 300px; }
}

/* ================================================================== */
/* prefers-reduced-motion: すべての動きを止め、最終状態で静かに見せる。 */
/* ================================================================== */
@media (prefers-reduced-motion: reduce) {
  .kt-lively .kt-rise,
  .kt-lively .kt-hero,
  .kt-lively .kt-result-kicker,
  .kt-lively .kt-type,
  .kt-lively .kt-type-oneline,
  .kt-lively .kt-type-sym img {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .kt-lively .kt-hero-stage::before,
  .kt-lively .kt-btn--primary::after,
  .ktl .kt-btn--primary::after,
  .kt-lively .kt-type-sym::before,
  .kt-lively .kt-type-sym::after,
  .kt-lively .kt-motes { animation: none !important; display: none; }
  .kt-lively .kt-hero-mark .khm-enso,
  .kt-lively .kt-hero-mark .khm-line { stroke-dashoffset: 0 !important; animation: none !important; }
  .kt-lively .kt-hero-mark .khm-dot { opacity: 1 !important; transform: none !important; animation: none !important; }
  .kt-lively .kt-hero-rule { width: 72px !important; animation: none !important; }
}