/* ================================================================== */
/* kaname_motion2.css — 軽量モーション第2層（2026-07-02）             */
/*   目的:「単調で引き込まれない」の解消。ただし重くしない。           */
/*   方針（60fps原則）:                                                */
/*     ・アニメは transform / opacity のみ（layout/paint を揺らさない） */
/*     ・常時動くものは 1画面 2〜3個まで・小振幅・画面外では停止        */
/*     ・既存レイヤー（lively/pop/ux/delight）は無改変。上に重ねるだけ  */
/*   スコープ: html.kt-m2（kaname_motion2.js が Kaname 画面でだけ付与） */
/*     …ページ遷移（@view-transition）だけは CSS 単独で効く。          */
/*   prefers-reduced-motion で全停止。JS 無効でも一切壊れない。         */
/* ================================================================== */

/* ================================================================== */
/* ① ページ遷移（MPA View Transitions）                                */
/*    対応ブラウザ（Chrome126+/Safari18.2+等）だけ短いクロスフェード＋   */
/*    新画面がわずかに立ち上がる。非対応は従来どおり＝無害スキップ。     */
/*    root のみ・約0.2秒＝スナップショットは一時2枚だけ（軽い）。        */
/* ================================================================== */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: kt-m2-vt-out .16s ease both;
}
::view-transition-new(root) {
  animation: kt-m2-vt-in .26s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes kt-m2-vt-out { to { opacity: 0; } }
@keyframes kt-m2-vt-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* 固定タブバーは画面をまたいで“居続ける”（アプリらしさ・名前は1ページ1個）。 */
.kt-tabbar { view-transition-name: kt-m2-tabbar; }

/* ================================================================== */
/* 共通トークン（pop 由来をフォールバック付きで再利用）                 */
/* ================================================================== */
html.kt-m2 {
  --ktm2-ease:   cubic-bezier(.22, .61, .36, 1);
  --ktm2-bounce: cubic-bezier(.34, 1.56, .64, 1);
}

/* ================================================================== */
/* ② スクロール再入場の“軽いリプレイ”（.kt-m2-again）                  */
/*    既存の kt-rise / kt-pop-rise / kt-ux-reveal は初回のみで終わるため、 */
/*    JS が再入場を検知してこのクラスを一瞬付ける（既存の is-in は不触）。 */
/*    初回よりずっと控えめ＝opacity .5 から・約0.4秒。                   */
/* ================================================================== */
html.kt-m2 .kt-m2-again {
  animation: kt-m2-again .42s var(--ktm2-ease) both;
}
@keyframes kt-m2-again {
  from { opacity: .5; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ================================================================== */
/* ③ 出現アニメの横断適用（.kt-m2-auto）                                */
/*    既存 reveal が付いていない“折り返し以下”のカードへ JS が付与。     */
/*    付与は JS 起動後（描画済み・画面外）なのでチラつかない。            */
/* ================================================================== */
html.kt-m2 .kt-m2-auto {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ktm2-ease), transform .55s var(--ktm2-ease);
}
html.kt-m2 .kt-m2-auto.is-m2in { opacity: 1; transform: none; }

/* ================================================================== */
/* ④ 数字のカウントアップ／変化バンプ                                  */
/*    [data-kt-m2-count]＝サーバ描画の数字（member の連続記録など）。     */
/*    [data-out]/[data-score-out]＝計算機・スコアの動的出力。            */
/*    桁幅を等幅にしてカウント中のガタつきを防ぐ（tabular-nums）。       */
/* ================================================================== */
html.kt-m2 [data-kt-m2-count],
html.kt-m2 [data-out],
html.kt-m2 [data-score-out] {
  font-variant-numeric: tabular-nums;
}
/* 値が変わった瞬間の小さな弾み（transform のみ・0.3秒）。 */
html.kt-m2 .kt-m2-bump {
  display: inline-block;
  animation: kt-m2-bump .32s var(--ktm2-bounce);
}
@keyframes kt-m2-bump {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.13); }
  100% { transform: scale(1); }
}

/* ================================================================== */
/* ⑤ 常時の“生きてる感”（控えめ・transform のみ・画面外で停止）         */
/* ================================================================== */
/* ヒーローの浮遊: LPのブランドマーク／結果の型シンボル／memberの一歩アイコン。
   どれも既存アニメと衝突しない要素（自身に animation を持たない）に限定。 */
html.kt-m2 .kt-hero-mark,
html.kt-m2 .kt-type-sym,
html.kt-m2 .kt-nx-icon {
  animation: kt-m2-float 5.6s ease-in-out infinite alternate;
}
html.kt-m2 .kt-nx-icon { display: block; } /* span でも transform が効くように（既存も block） */
@keyframes kt-m2-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-5px); }
}
/* member の連続記録の炎は、ごくゆっくり“灯る”ゆらぎ（scaleのみ）。 */
html.kt-m2 .kt-streak-fire {
  display: inline-block;
  animation: kt-m2-flicker 3.2s ease-in-out infinite;
}
@keyframes kt-m2-flicker {
  0%, 100% { transform: scale(1) rotate(0deg); }
  35%      { transform: scale(1.08) rotate(-3deg); }
  70%      { transform: scale(.97) rotate(2deg); }
}

/* タブバーのアクティブ演出:
   ・現在地アイコンが読込時に一度だけ“ぽん”と弾む
   ・現在地の下で小さな点が静かに呼吸する（5px・opacity/transformのみ） */
html.kt-m2 .kt-tabbar-item { position: relative; }
html.kt-m2 .kt-tabbar-item[aria-current="page"] .kt-tabbar-icon {
  display: inline-block;
  animation: kt-m2-tab-pop .55s var(--ktm2-bounce) .12s backwards;
}
@keyframes kt-m2-tab-pop {
  0%   { transform: scale(.6); }
  55%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
html.kt-m2 .kt-tabbar-item[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--kt-accent, #2B6CF6);
  pointer-events: none;
  animation: kt-m2-dot 2.6s ease-in-out infinite;
}
@keyframes kt-m2-dot {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%      { opacity: .9;  transform: scale(1.3); }
}

/* 画面外に出た常時アニメは停止（電池・合成コスト対策。JS がクラスを付ける）。 */
html.kt-m2 .kt-m2-off,
html.kt-m2 .kt-m2-off *,
html.kt-m2 .kt-m2-off::before,
html.kt-m2 .kt-m2-off::after {
  animation-play-state: paused;
}

/* ================================================================== */
/* ⑥ タップの手応え（リップル）                                        */
/*    JS が .kt-btn / .kt-tabbar-item / .kt-nx-cta に、押した位置から     */
/*    広がる波を足す。クリップは“ラッパー”側で行い、ボタン本体の         */
/*    overflow は変えない（既存 ::after の光る輪を壊さない）。            */
/* ================================================================== */
.kt-m2-ripwrap {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.kt-m2-ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: .22;
  transform: translate(-50%, -50%) scale(0);
  animation: kt-m2-rip .5s ease-out forwards;
  will-change: transform, opacity;
}
@keyframes kt-m2-rip {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ================================================================== */
/* prefers-reduced-motion: この層の“動き”を全停止（表示は最終状態）      */
/* ================================================================== */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }

  html.kt-m2 .kt-m2-again,
  html.kt-m2 .kt-m2-bump,
  html.kt-m2 .kt-hero-mark,
  html.kt-m2 .kt-type-sym,
  html.kt-m2 .kt-nx-icon,
  html.kt-m2 .kt-streak-fire,
  html.kt-m2 .kt-tabbar-item[aria-current="page"] .kt-tabbar-icon,
  html.kt-m2 .kt-tabbar-item[aria-current="page"]::after,
  .kt-m2-ripple {
    animation: none !important;
  }
  html.kt-m2 .kt-m2-auto {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}