/* ============================================================
   AWASE — Home (site/index.html)
   SSOT: docs/design/05-wireframes.html WF-01,
         docs/design/04-ia-structure.md §3-2 S1・§7,
         docs/design/02-brand-design.md §B案（天秤ロゴ・五味データカラー）。
   このファイルは `@layer pages` に載せる（base.css の
   `@layer reset, base, layout, components, pages, utilities;` 宣言順に従う）。
   新規クラスのみを追加し、tokens/base/layout/components.css の
   既存クラス・変数はそのまま再利用する（コア変更禁止）。

   `.balance*` は「天秤インタラクティブ」共通コンポーネント。ホームのHero（本ファイル）
   と /start/ のSTEP2（縮約版・start.js が同名クラスを再利用するため本ファイルを
   <link> する）の両方で使う視覚/物理デモ。判定エンジンは使わない単純な
   重さ比較（gap = dish - drink）で天秤の傾きを決める（06 pairing-engine.js の
   cutPower等は使わない簡略モデル。詳細な中和計算はLesson2本編の役割）。
   ============================================================ */
@layer pages {

  /* ---------------------------------------------------------------
     Hero
  --------------------------------------------------------------- */
  .home-hero-copy { max-width: 46ch; }
  #hero-cta { min-height: 44px; }
  .home-hero-demo { display: grid; gap: var(--sp-2); justify-items: center; }
  .home-hero-demo__intro { text-align: center; max-width: 40ch; }

  /* ---------------------------------------------------------------
     天秤インタラクティブ（.balance）— Hero本体＋/start/ STEP2で共有
  --------------------------------------------------------------- */
  .balance { display: grid; gap: var(--sp-2); width: 100%; }
  .balance__sides { display: grid; gap: var(--sp-2); }
  @media (min-width: 480px) { .balance__sides { grid-template-columns: 1fr 1fr; } }
  .balance__side-label { font-weight: 600; font-size: .85rem; margin-block-end: 6px; display: block; }

  /* 見た目はpill、実体はネイティブradio（lesson.css .pill-radio と同じ手法：
     :has()で見た目だけ反応させ、キーボード操作・スクリーンリーダー読み上げは
     ネイティブ実装に任せる。独自ARIA roving-tabindexは実装しない） */
  .balance-radio { display: flex; flex-wrap: wrap; gap: 6px; }
  .balance-radio__option {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 8px 14px; border-radius: var(--radius-pill);
    background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border);
    cursor: pointer; font-size: .85rem; text-align: center;
    transition: background var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
  }
  .balance-radio__option:has(input:checked) { background: var(--brand); color: #fff; box-shadow: none; }
  .balance-radio__option:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
  .balance-radio__option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; min-height: 0; }

  .balance__stage { display: grid; justify-items: center; gap: 6px; padding-block: var(--sp-3); overflow-x: clip; }
  .balance__beam-wrap { width: min(420px, 100%); }
  .balance__beam {
    display: flex; justify-content: space-between; align-items: center;
    transform: rotate(var(--tilt, 0deg)); transform-origin: center;
    transition: transform var(--dur-ui) var(--ease);
  }
  .balance__pan {
    flex: 0 0 auto; width: 128px; padding: var(--sp-2); border-radius: var(--radius-m);
    background: var(--surface); box-shadow: var(--shadow-md); text-align: center;
    transition: box-shadow var(--dur-ui) var(--ease);
  }
  .balance__pan-label { font-size: .74rem; color: var(--text-muted); }
  .balance__pan-value { font-family: var(--font-num); font-size: 1.2rem; font-weight: 700; color: var(--brand); }
  .balance__pan-example { font-size: .74rem; color: var(--text-muted); margin-block-start: 2px; }
  .balance__fulcrum-line { flex: 1; height: 6px; background: var(--brand); border-radius: var(--radius-pill); margin-inline: 10px; }
  .balance__pivot { width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 24px solid var(--brand-900); }
  .balance__readout { text-align: center; font-size: .9rem; max-width: 46ch; }
  .balance__readout strong { color: var(--brand); }

  /* 釣り合った瞬間：カチッと止まる合図（色以外にテキストでも必ず伝える＝WCAG 1.4.1） */
  @keyframes balance-settle { 0% { transform: scale(1); } 45% { transform: scale(1.035); } 100% { transform: scale(1); } }
  .balance.is-balanced .balance__pan { box-shadow: 0 0 0 3px var(--ok), var(--shadow-lg); }
  .balance.is-balanced .balance__fulcrum-line { background: var(--ok); }
  .balance.is-balanced .balance__beam-wrap { animation: balance-settle var(--dur-ui) var(--ease); }

  /* ---------------------------------------------------------------
     Resumeカード（再訪時のみ・hidden切替はJS）
  --------------------------------------------------------------- */
  .home-resume-card .bar { width: min(240px, 100%); display: inline-block; vertical-align: middle; }
  .home-resume-card__meta { margin-block-start: 6px; }

  /* ---------------------------------------------------------------
     今日のあわせ カード
  --------------------------------------------------------------- */
  .home-daily-card { display: grid; gap: 6px; align-content: start; }

  /* Resume + 今日のあわせ の2カラム帯 */
  .home-band { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
  @media (min-width: 900px) { .home-band { grid-template-columns: 1.4fr 1fr; align-items: start; } }

  /* ---------------------------------------------------------------
     学習マップ（12 Lessonミニカード）
  --------------------------------------------------------------- */
  .learning-map { --col: 130px; }
  .learning-map__card { display: grid; gap: 4px; padding: var(--sp-2); min-height: 100%; }
  .learning-map__no { font-size: .8rem; color: var(--text-muted); letter-spacing: .03em; }
  .learning-map__title { font-size: .86rem; font-weight: 600; color: var(--text); }
  .learning-map__count { font-size: .7rem; align-self: start; }
  .learning-map__card--done { box-shadow: inset 3px 0 0 var(--ok), var(--shadow-md); }
  .learning-map__card--done .learning-map__no { color: var(--ok); }
  .learning-map__card--current { box-shadow: inset 3px 0 0 var(--accent), var(--shadow-md); }
  .learning-map__card--todo .learning-map__count { opacity: .6; filter: grayscale(.4); }
  /* MVP段階の「準備中」Lesson（L4-12・data.mvp===false）。完成Lessonと同格に
     見せない muted 表現（UX-H2対応）。 */
  .learning-map__card--upcoming { opacity: .6; }
  .learning-map__card--upcoming .learning-map__count { filter: grayscale(.4); }

  /* ---------------------------------------------------------------
     3本柱の入口（静的・JS不要）
  --------------------------------------------------------------- */
  .pillar-card { display: grid; gap: 6px; }
  .pillar-card__title { font-size: var(--fs-h3); }

  /* ---------------------------------------------------------------
     モーション：スクロール進入 stagger（reduced-motion は base.css の
     グローバルルールが自動的に無効化するため分岐コードは不要）
  --------------------------------------------------------------- */
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); }
  .reveal.is-visible { opacity: 1; transform: none; }
}