/* =========================================================
   Chillarin Blog — home.css
   トップページ専用スタイル (baseof.html で .IsHome 時のみロード)
   - style.css / tokens.css の後に読み込まれる前提
   - Phase B: 静的レイアウト (full-bleed 帯 + カード群)
   - Phase C: スクロール演出 (reveal / ランナー / パララックス) を
     このファイル末尾に追記する
   ========================================================= */

/* ---------- 基本骨格: full-bleed 帯を縦に積む ---------- */

.home {
  position: relative;
  z-index: 2; /* .bg-chinchilla (背景チンチラ層) の上 */
  display: block;
}

/* 全体 .container は左右 16px 固定だが、home はコンテンツが端に寄りすぎる
   ため余白を広めに取る (タイトルが左端に張り付く問題の対策) */
.home .container {
  padding-left: clamp(24px, 4.5vw, 56px);
  padding-right: clamp(24px, 4.5vw, 56px);
}

.home-band {
  padding: 72px 0;
}

.home-band--elev {
  background:
    linear-gradient(180deg, var(--accent-soft) 0, transparent 140px),
    var(--bg-elev);
  background-blend-mode: soft-light, normal;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ---------- セクション見出し (kicker + serif title + more) ---------- */

.home-sec-head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "kicker more"
    "title  more";
  align-items: baseline;
  margin-bottom: 32px;
}

.home-sec-kicker {
  grid-area: kicker;
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}

.home-sec-title {
  grid-area: title;
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  letter-spacing: -0.01em;
  padding-bottom: 14px;
  position: relative;
}

.home-sec-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

.home-sec-more {
  grid-area: more;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.home-sec-more:hover { color: var(--accent); }

/* AI 生成コンテンツの明示ラベル */
.home-ai-label {
  display: inline-block;
  margin-left: 12px;
  padding: 3px 10px;
  vertical-align: middle;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
}

/* ---------- Hero ---------- */

.home-hero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 96px;
  background:
    radial-gradient(820px 480px at 18% 12%, oklch(0.4 0.07 175 / .35) 0, transparent 65%),
    radial-gradient(700px 520px at 86% 88%, oklch(0.35 0.06 250 / .3) 0, transparent 60%),
    linear-gradient(165deg, #0d141b 0, #070b10 55%, #05080c 100%);
  border-bottom: 1px solid var(--border);
}

:root.light .home-hero {
  background:
    radial-gradient(820px 480px at 18% 12%, oklch(0.92 0.06 175 / .8) 0, transparent 65%),
    radial-gradient(700px 520px at 86% 88%, oklch(0.92 0.05 250 / .7) 0, transparent 60%),
    linear-gradient(165deg, #ffffff 0, #eef5f8 60%, #e8f1f5 100%);
}

/* パララックス対象の背景レイヤ (Phase C で translate)。装飾グリッド */
.home-hero-bg {
  position: absolute;
  inset: -10% 0;
  background-image:
    linear-gradient(var(--accent-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--accent-soft) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.14;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 35%, #000 0, transparent 100%);
  mask-image: radial-gradient(75% 70% at 50% 35%, #000 0, transparent 100%);
  pointer-events: none;
}

/* 砂浴びダスト (Phase C で浮遊アニメ。B では静的な淡い光点) */
.home-hero-dust { position: absolute; inset: 0; pointer-events: none; }
.home-hero-dust span {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.25;
  box-shadow: 0 0 14px var(--accent-glow);
}
.home-hero-dust span:nth-child(1) { top: 22%; left: 8%; }
.home-hero-dust span:nth-child(2) { top: 64%; left: 30%; width: 5px; height: 5px; }
.home-hero-dust span:nth-child(3) { top: 18%; right: 26%; width: 4px; height: 4px; }
.home-hero-dust span:nth-child(4) { top: 70%; right: 9%; }

.home-hero-inner {
  position: relative;
}

.home-hero-main {
  max-width: 640px;
}

.home-hero-kicker {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
}

.home-hero-title {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 6vw, 4.4rem);
  line-height: 1.06;
  letter-spacing: 0.02em;
  color: var(--text);
}

.home-hero-lead {
  margin: 0 0 30px;
  max-width: 34em;
  font-size: 0.98rem;
  line-height: 2;
  color: var(--text-dim);
}

.home-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

.home-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.home-btn:hover { transform: translateY(-2px); text-decoration: none; }

.home-btn--primary {
  background: var(--accent);
  color: var(--accent-on);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.home-btn--primary:hover { box-shadow: 0 6px 22px var(--accent-glow); }

.home-btn--ghost {
  border: 1px solid var(--border-str);
  color: var(--text-dim);
}
.home-btn--ghost:hover { border-color: var(--accent-line); color: var(--accent); }

/* ---------- 背景の大シルエット (静かな紋章) ----------
   旧 hero のシルエットを光・モーションなしで薄く敷く。
   この前を実体のリンちゃんが走り回る構図 */
.home-hero-emblem {
  position: absolute;
  right: 5%;
  bottom: 36px;
  width: min(460px, 32vw);
  aspect-ratio: 511 / 412;
  background-image: url("/images/hero-chinchilla.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  opacity: 0.5;
  pointer-events: none;
}

:root.light .home-hero-emblem { opacity: 0.07; }

@media (max-width: 840px) {
  .home-hero-emblem { width: min(300px, 60vw); bottom: 20px; opacity: 0.4; }
}

/* ---------- 自律ロームするリンちゃん ----------
   home.js のステートマシンが --rin-x / --rin-y / --rin-flip を更新する。
   JS 無し / reduce 時はこの既定 CSS (右下に sit ポーズで静止) のまま。
   位置・反転は CSS 変数合成にして squash keyframes との transform 競合を防ぐ */
.home-hero-rin {
  position: absolute;
  right: 6%;
  bottom: 16px;
  height: clamp(96px, 11vw, 132px);
  width: clamp(120px, 14vw, 165px);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
}

/* JS 制御モード (home.js が is-roaming を付与し right アンカーを解除)。
   --rin-scale は奥行きライン (高い位置 = 奥 = 小さく) の擬似遠近 */
.home-hero-rin.is-roaming {
  right: auto;
  left: 0;
  transform: translate3d(var(--rin-x, 0px), var(--rin-y, 0px), 0) scaleX(var(--rin-flip, 1)) scale(var(--rin-scale, 1));
  transform-origin: bottom center;
  will-change: transform;
}

:root.light .home-hero-rin {
  filter: drop-shadow(0 6px 12px rgba(15, 26, 34, 0.3));
}

.home-hero-rin .rin-pose {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  opacity: 0;
}

/* 走りポーズは体が低く伸びるため表示高さを抑えて体積感を揃える */
.home-hero-rin .rin-pose--run1 { height: 64%; }
.home-hero-rin .rin-pose--run2 { height: 74%; }

/* data-pose によるポーズ切替 (sit / happy / groom1/2 / run1/2) */
.home-hero-rin[data-pose="sit"] .rin-pose--sit,
.home-hero-rin[data-pose="happy"] .rin-pose--happy,
.home-hero-rin[data-pose="groom1"] .rin-pose--groom1,
.home-hero-rin[data-pose="groom2"] .rin-pose--groom2,
.home-hero-rin[data-pose="run1"] .rin-pose--run1,
.home-hero-rin[data-pose="run2"] .rin-pose--run2 { opacity: 1; }

/* 足元のソフトな接地影 */
.home-hero-rin::before {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: -10px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0, transparent 70%);
}

:root.light .home-hero-rin::before {
  background: radial-gradient(ellipse at center, rgba(15, 26, 34, 0.28) 0, transparent 70%);
}

/* ---------- 最新記事フィード ---------- */

.home-latest-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.home-post-card {
  grid-column: span 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.25s ease;
}
.home-post-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-line);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25), 0 0 14px var(--accent-soft);
  text-decoration: none;
}

.home-post-card--featured {
  grid-column: span 2;
  grid-row: span 2;
}

.home-post-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--bg-elev), var(--bg-card));
  overflow: hidden;
}
.home-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.home-post-card:hover .home-post-thumb img { transform: scale(1.05); }

.home-post-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-on);
  background: var(--accent);
  border-radius: 999px;
}

.home-post-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px;
  flex: 1;
}

.home-post-title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.5;
}
.home-post-card--featured .home-post-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  line-height: 1.45;
}
.home-post-card:hover .home-post-title { color: var(--accent); }

.home-post-excerpt {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-dim);
}

.home-post-meta {
  margin-top: auto;
  display: flex;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
}

/* グリッド末尾の「すべての記事」導線カード (4 列時の残りスロットを埋める) */
.home-post-more {
  grid-column: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 96px;
  border: 1px dashed var(--border-str);
  border-radius: 14px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.home-post-more:hover {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-soft);
  text-decoration: none;
}
.home-post-more-arrow { font-size: 1.2rem; transition: transform 0.18s ease; }
.home-post-more:hover .home-post-more-arrow { transform: translateX(4px); }

/* ---------- トピックハブ ---------- */

.home-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.home-hub-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.25s ease;
}
.home-hub-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-line);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25), 0 0 14px var(--accent-soft);
}

.home-hub-card-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
  text-decoration: none;
}
.home-hub-card-main:hover { text-decoration: none; }

.home-hub-image {
  height: 150px;
  background-image: var(--hub-img-dark);
  background-size: cover;
  background-position: center;
  transition: transform 0.35s ease;
}
:root.light .home-hub-image {
  background-image: var(--hub-img-light, var(--hub-img-dark));
}
.home-hub-card:hover .home-hub-image { transform: scale(1.04); }

/* 画像未整備ハブ: グラデ + 連番 (画像生成は別タスク) */
.home-hub-image--gradient {
  display: flex;
  align-items: flex-end;
  background-image:
    radial-gradient(120% 130% at 85% 15%, var(--accent-soft) 0, transparent 55%),
    linear-gradient(150deg, var(--bg-elev) 0, var(--bg-card) 60%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
}
.home-hub-num {
  padding: 0 18px 8px;
  font-family: var(--font-mono);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  opacity: 0.5;
  letter-spacing: 0.04em;
}

.home-hub-body { padding: 16px 18px 14px; }

.home-hub-kicker {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.home-hub-title {
  margin: 0 0 8px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-serif);
  font-size: 1.2rem;
}

.home-hub-count {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

.home-hub-desc {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--text-dim);
}

.home-hub-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 18px 16px;
}
.home-hub-links a {
  font-size: 0.76rem;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.home-hub-links a:hover { color: var(--accent); border-color: var(--accent-line); }

/* ---------- News ---------- */

.home-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.home-news-item { border-bottom: 1px solid var(--border); }

.home-news-link {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  padding: 16px 6px;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.home-news-link:hover { background: var(--bg-card); text-decoration: none; }

.home-news-date {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  padding-top: 2px;
}

.home-news-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}
.home-news-link:hover .home-news-title { color: var(--accent); }

/* ---------- About ---------- */

.home-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(260px, 1fr);
  gap: 28px;
  align-items: start;
}

.home-about-body {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 28px;
  font-size: 0.95rem;
  line-height: 1.95;
}
.home-about-body p { margin: 0 0 14px; }
.home-about-body p:last-child { margin-bottom: 0; }
.home-about-body a { color: var(--accent); text-decoration: none; }
.home-about-body a:hover { text-decoration: underline; }

.home-about-profile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 22px;
  text-align: center;
}

.home-about-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent-line);
  box-shadow: 0 0 18px var(--accent-soft);
}

.home-about-name {
  margin: 12px 0 6px;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
}

.home-about-bio {
  margin: 0 0 16px;
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--text-dim);
  text-align: left;
}

.home-about-social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.home-about-social a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 0.8rem;
  color: var(--text-dim);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.home-about-social a:hover { color: var(--accent); border-color: var(--accent-line); }
.home-about-social .social-icon { width: 16px; height: 16px; }

/* ---------- レスポンシブ ---------- */

@media (max-width: 1020px) {
  .home-latest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-post-card--featured { grid-column: span 2; grid-row: span 1; }
  .home-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 840px) {
  .home-band { padding: 56px 0; }
  /* モバイルは下端に小さめの散歩スペース */
  .home-hero { padding: 48px 0 118px; }
  .home-about-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .home-latest-grid { grid-template-columns: 1fr; }
  .home-post-card--featured { grid-column: span 1; }
  .home-post-more { grid-column: span 1; }
  .home-hub-grid { grid-template-columns: 1fr; }
  .home-news-link { grid-template-columns: 1fr; gap: 4px; }
  .home-sec-head {
    grid-template-columns: 1fr;
    grid-template-areas: "kicker" "title" "more";
  }
  .home-sec-more { margin-top: 10px; }
}

/* =========================================================
   Phase C: スクロール演出
   - すべて html.has-motion (home.js が付与) 配下でのみ有効。
     JS が読めない環境では以下は一切適用されず全コンテンツが見える。
   - prefers-reduced-motion: reduce は末尾の media query で全停止
     (home.js 側も起動しない二重ガード)
   ========================================================= */

/* ---------- reveal 基盤 ([data-rv] + .is-in) ----------
   一覧ページ (posts / categories / tags) と共通化のため style.css へ移設。
   JS 側も assets/js/reveal.js に切り出し済み (home.js は演出専任)。 */

/* reveal とカード hover の transform が競合しないように、
   .is-in 後は hover 側 transition に引き継ぐ */
.has-motion .home-post-card.is-in,
.has-motion .home-hub-card.is-in {
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.25s ease;
}

/* ---------- スクロールランナー (画面下端) ---------- */

.home-runner {
  position: fixed;
  left: 0;
  bottom: 10px;
  z-index: 3;
  pointer-events: none;
  will-change: transform;
}
.home-runner img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
  opacity: 0.85;
  filter: var(--bg-chinchilla-glow);
}

/* ---------- セクションダッシュ (見出し可視化時に 1 回横切る) ---------- */

.home-band { overflow: hidden; } /* ダッシュが画面外へ出る間の横スクロール防止 */

.home-dash {
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 44px;
  height: 44px;
  opacity: 0;
  pointer-events: none;
}
.home-sec-head { position: relative; }

.has-motion .home-sec-head.is-in .home-dash {
  opacity: 1;
  animation: home-dash-x 1.25s cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.35s 1 both;
}
.home-dash img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: var(--bg-chinchilla-glow);
  opacity: 0;
}
.has-motion .home-sec-head.is-in .home-dash img:nth-child(1) {
  animation: home-dash-flip 0.24s linear 0.35s 6;
}
.has-motion .home-sec-head.is-in .home-dash img:nth-child(2) {
  animation: home-dash-flip 0.24s linear 0.47s 6;
}

@keyframes home-dash-x {
  from { transform: translateX(-90px); }
  to   { transform: translateX(calc(100vw + 90px)); }
}
@keyframes home-dash-flip {
  0%, 49.9% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ---------- Hero ロードアニメーション (CSS のみ・1 回) ---------- */

.has-motion .home-hero-kicker {
  animation: hero-kicker 1s cubic-bezier(0.22, 0.9, 0.34, 1) both;
}
.has-motion .home-hero-title {
  clip-path: inset(-10% 0 -10% 0);
  animation: hero-title 0.95s cubic-bezier(0.22, 0.9, 0.34, 1) 0.15s both;
}
.has-motion .home-hero-lead {
  animation: hero-fade-up 0.8s ease 0.55s both;
}
.has-motion .home-hero-cta {
  animation: hero-fade-up 0.8s ease 0.75s both;
}
@keyframes hero-kicker {
  from { opacity: 0; letter-spacing: 0.6em; }
  to   { opacity: 1; letter-spacing: 0.32em; }
}
@keyframes hero-title {
  from { opacity: 0; clip-path: inset(-10% 100% -10% 0); transform: translateY(14px); }
  to   { opacity: 1; clip-path: inset(-10% 0 -10% 0); transform: none; }
}
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
/* ---------- なでなで (クリック/タップ) ----------
   squash は roaming の位置変数 (--rin-x/y/flip) を keyframes 内で合成して
   transform 競合を防ぐ (is-roaming 時のみ squash を有効化) */

.has-motion .home-hero-rin { cursor: grab; }
.has-motion .home-hero-rin[data-pose="happy"] { cursor: grabbing; }

.has-motion .home-hero-rin.is-roaming.is-squash {
  animation: pet-squash 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) 1;
}
@keyframes pet-squash {
  0%   { transform: translate3d(var(--rin-x, 0px), var(--rin-y, 0px), 0) scaleX(var(--rin-flip, 1)) scale(var(--rin-scale, 1)) scale(1, 1); }
  35%  { transform: translate3d(var(--rin-x, 0px), var(--rin-y, 0px), 0) scaleX(var(--rin-flip, 1)) scale(var(--rin-scale, 1)) scale(1.07, 0.9); }
  70%  { transform: translate3d(var(--rin-x, 0px), var(--rin-y, 0px), 0) scaleX(var(--rin-flip, 1)) scale(var(--rin-scale, 1)) scale(0.96, 1.05); }
  100% { transform: translate3d(var(--rin-x, 0px), var(--rin-y, 0px), 0) scaleX(var(--rin-flip, 1)) scale(var(--rin-scale, 1)) scale(1, 1); }
}

/* なでなでで舞うハート / 砂浴びダスト */
.home-pet-spark {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  font-size: 17px;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 10px var(--accent-glow);
  animation: pet-float 0.9s ease-out forwards;
}
@keyframes pet-float {
  from { opacity: 0.95; transform: translate(0, 0) scale(0.7); }
  to   { opacity: 0; transform: translate(var(--dx, 0px), -64px) scale(1.2); }
}

/* 砂浴びダスト: ゆっくり浮遊 + 明滅 */
.has-motion .home-hero-dust span {
  animation:
    dust-float var(--dust-dur, 14s) ease-in-out var(--dust-delay, 0s) infinite alternate,
    dust-twinkle calc(var(--dust-dur, 14s) / 2) ease-in-out var(--dust-delay, 0s) infinite alternate;
}
.home-hero-dust span:nth-child(1) { --dust-dur: 13s; --dust-delay: 0s; }
.home-hero-dust span:nth-child(2) { --dust-dur: 17s; --dust-delay: -4s; }
.home-hero-dust span:nth-child(3) { --dust-dur: 11s; --dust-delay: -2s; }
.home-hero-dust span:nth-child(4) { --dust-dur: 19s; --dust-delay: -7s; }

@keyframes dust-float {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(22px, -30px, 0); }
}
@keyframes dust-twinkle {
  from { opacity: 0.12; }
  to   { opacity: 0.4; }
}

/* ---------- ネットワーク指南書 導線 (home/study-guide.html) ---------- */

.home-study-lead {
  margin: 0 0 28px;
  max-width: 760px;
  font-size: 0.98rem;
  line-height: 1.9;
  color: var(--text-dim);
}
.home-study-lead a { color: var(--accent); text-decoration: none; }
.home-study-lead a:hover { text-decoration: underline; }

.home-study-sections {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 18px;
}
.home-study-sections-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.home-study-sections-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.home-study-sections-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  font-size: 0.85rem;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.home-study-sections-list a:hover {
  border-color: var(--accent-line);
  color: var(--accent);
}
.home-study-sections-chapter {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
}

/* ---------- prefers-reduced-motion: 全演出停止 (二重ガードの CSS 側) ---------- */

@media (prefers-reduced-motion: reduce) {
  /* [data-rv] の全停止は style.css 側 (共通基盤) が担当 */
  .home-runner,
  .home-dash,
  .home-pet-spark { display: none !important; }
  .has-motion .home-hero-kicker,
  .has-motion .home-hero-title,
  .has-motion .home-hero-lead,
  .has-motion .home-hero-cta,
  .has-motion .home-hero-rin,
  .has-motion .home-hero-dust span { animation: none !important; }
  .has-motion .home-hero-title { clip-path: none; }
  /* リンちゃんは右下に sit ポーズで静止 (home.js は起動しない) */
  .home-hero-rin.is-roaming {
    left: auto !important;
    right: 6% !important;
    transform: none !important;
  }
}