/* ================================================================== */
/* kaname_delight.css — Kaname 演出強化（上品なマイクロインタラクション）*/
/*   世界観: 墨(#2b2b2b) ＋ コーラル(#FF7A59)・和モダン・扇の要・足るを知る */
/*   目的: ボタン/カードのやわらかな手応え・上品なフォーカスリング・      */
/*        既存の出現(kt-rise/kt-pop-rise)を邪魔しない従属的な演出。       */
/*   方針: 新クラス中心(kt-dl-*)で既存を上書きしない。過剰にしない。      */
/*        prefers-reduced-motion を尊重(末尾で全停止)。                  */
/*   スコープ: すべて .kt-wrap 配下に閉じる(他レイヤーと非干渉)。         */
/* ================================================================== */

:root {
  --ktdl-coral:      #FF7A59;
  --ktdl-coral-soft: rgba(255, 122, 89, .16);
  --ktdl-ink:        #2b2b2b;
  --ktdl-ease:       cubic-bezier(.22, .61, .36, 1); /* やわらかく減速 */
}

/* ── ボタン/リンクの押下：ごく浅く沈む「やわらかな手応え」 ──
   既存 :hover の transform は壊さない。押下(:active)だけ従属的に添える。 */
.kt-wrap .kt-btn:active,
.kt-wrap .kt-lp-cta-main:active,
.kt-wrap .kt-rm-next-cta:active,
.kt-wrap .kt-rm-link:active {
  transform: translateY(1px) scale(.992);
  transition: transform .12s var(--ktdl-ease);
}

/* ── カードのホバ/タップフィードバック（上品・微小） ──
   専用クラス kt-dl-lift を付けた要素だけ反応（既存カードを勝手に動かさない）。 */
.kt-wrap .kt-dl-lift {
  transition: transform .28s var(--ktdl-ease), box-shadow .28s var(--ktdl-ease);
  will-change: transform;
}
@media (hover: hover) {
  .kt-wrap .kt-dl-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(43, 43, 43, .10);
  }
}
.kt-wrap .kt-dl-lift:active {
  transform: translateY(0) scale(.996);
}

/* ── 上品なフォーカスリング（アクセシビリティ）──
   キーボード操作時のみ（:focus-visible）コーラルのやわらかな輪。マウスでは出さない。 */
.kt-wrap a:focus-visible,
.kt-wrap button:focus-visible,
.kt-wrap .kt-btn:focus-visible,
.kt-wrap [tabindex]:focus-visible {
  outline: none;
  border-radius: 12px;
  box-shadow: 0 0 0 3px var(--ktdl-coral-soft),
              0 0 0 1.5px var(--ktdl-coral);
}

/* ── 円相の一筋：見出し脇にそっと添える扇の要の点（装飾・任意） ──
   kt-dl-dot を span に付けるとコーラルの小さな要石が息づく。 */
.kt-wrap .kt-dl-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ktdl-coral);
  vertical-align: middle;
  margin: 0 2px;
  animation: ktdl-pulse 3.6s var(--ktdl-ease) infinite;
}
@keyframes ktdl-pulse {
  0%, 100% { transform: scale(1);    opacity: .9; }
  50%      { transform: scale(1.28); opacity: .55; }
}

/* ── セクション見出しイラストの静かな呼吸（従属・微小） ──
   kt-dl-breathe を付けた装飾イラストがゆっくり上下に揺れる。主張しない。 */
.kt-wrap .kt-dl-breathe {
  animation: ktdl-breathe 6s ease-in-out infinite;
}
@keyframes ktdl-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* ── ロードマップの節（現在地）：やわらかな鼓動を添える ──
   既存 .kt-rm-node の見た目は壊さず、is-current にのみ従属アニメを重ねる。 */
.kt-wrap .kt-rm-stage.is-current .kt-rm-node {
  animation: ktdl-node-glow 2.6s var(--ktdl-ease) infinite;
}
@keyframes ktdl-node-glow {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 122, 89, .16); }
  50%      { box-shadow: 0 0 0 7px rgba(255, 122, 89, .08); }
}

/* ── ステージのイラスト枠（roadmap 各Stage・LP セクション用） ──
   自己完結の小枠。既存レイアウトに従属し、幅は固定px（可変幅リテラルは使わない）。 */
.kt-wrap .kt-dl-art {
  display: block;
  flex: 0 0 auto;
}
.kt-wrap .kt-dl-art svg,
.kt-wrap .kt-dl-art img {
  display: block;
  width: auto;
  height: auto;
}

/* ロードマップ Stage の象徴イラスト（カード右上へそっと寄せる・従属装飾）。 */
.kt-wrap .kt-rm-card--art { position: relative; }
.kt-wrap .kt-rm-art {
  position: absolute;
  top: 12px;
  right: 13px;
  width: 44px;
  height: 44px;
  opacity: .9;
  pointer-events: none;
}
.kt-wrap .kt-rm-art img,
.kt-wrap .kt-rm-art svg { display: block; width: 44px; height: 44px; }
.kt-wrap .kt-rm-stage.is-current .kt-rm-art { opacity: 1; }
/* イラストと重ならないよう、カード見出し右側に控えめの余白（badge は下段でも可読）。 */
.kt-wrap .kt-rm-card--art .kt-rm-card-head { padding-right: 50px; }

/* セクション見出しに添えるイラスト（LP）。中央寄せ・上品な余白。 */
.kt-wrap .kt-dl-sechead {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 6px;
  opacity: .94;
}
.kt-wrap .kt-dl-sechead img,
.kt-wrap .kt-dl-sechead svg { display: block; width: 64px; height: 64px; }

/* 空状態（データ無し）イラスト。中央・やわらかな存在感。 */
.kt-wrap .kt-dl-empty {
  display: block;
  width: 120px;
  height: 120px;
  margin: 8px auto 10px;
  opacity: .9;
}
.kt-wrap .kt-dl-empty svg { display: block; width: 120px; height: 120px; }

/* ── ゴール（円相/鳩）：静かな余韻の光（従属・かすか） ── */
.kt-wrap .kt-rm-goal .kt-dl-art {
  margin: 0 auto 6px;
  width: 56px;
  height: 56px;
}
.kt-wrap .kt-rm-goal .kt-dl-art img,
.kt-wrap .kt-rm-goal .kt-dl-art svg { width: 56px; height: 56px; }

/* ================================================================== */
/* prefers-reduced-motion: この層の“動き”をすべて止める（最終状態で静止）*/
/*   ※末尾に置く。トランジション/アニメを無効化し、静かに見せる。       */
/* ================================================================== */
@media (prefers-reduced-motion: reduce) {
  .kt-wrap .kt-btn:active,
  .kt-wrap .kt-lp-cta-main:active,
  .kt-wrap .kt-rm-next-cta:active,
  .kt-wrap .kt-rm-link:active,
  .kt-wrap .kt-dl-lift,
  .kt-wrap .kt-dl-lift:hover,
  .kt-wrap .kt-dl-lift:active {
    transition: none;
    transform: none;
  }
  .kt-wrap .kt-dl-dot,
  .kt-wrap .kt-dl-breathe,
  .kt-wrap .kt-rm-stage.is-current .kt-rm-node {
    animation: none;
  }
  /* フォーカスリングはアクセシビリティのため残す（動きではないので維持）。 */
}