/* スクロール演出（Research一覧・記事ページの試作）
   名前は ah-agents の web-animation スキルの24演出に合わせる。
   初期状態で隠すのは html.motion-ready の下だけ（JSが動かないときは全部そのまま見える）。 */

/* 03 スタッガー：一覧カードが時差で現れる */
html.motion-ready [data-motion="stagger"] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s ease-out, transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--motion-i, 0) * 180ms);
}
html.motion-ready [data-motion="stagger"].is-shown { opacity: 1; transform: none; }

/* 01 フェードイン：見出し・本文ブロック */
html.motion-ready [data-motion="fade"] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
html.motion-ready [data-motion="fade"].is-shown { opacity: 1; transform: none; }

/* 05 マスクリビール：全幅の図が幕を開けるように出る */
html.motion-ready [data-motion="mask"] img {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s cubic-bezier(.7,0,.2,1);
}
html.motion-ready [data-motion="mask"].is-shown img { clip-path: inset(0 0 0 0); }

/* 14 テキストフィル：大きな引用が読み進めるほど濃くなる */
html.motion-ready [data-motion="fill"] p {
  --fill: 0%;
  color: transparent;
  background-image: linear-gradient(90deg, var(--ink, #06131f) var(--fill), rgba(6,19,31,.22) var(--fill));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
html.motion-ready[data-color-mode="dark"] [data-motion="fill"] p {
  background-image: linear-gradient(90deg, var(--ink, #edf4fa) var(--fill), rgba(237,244,250,.24) var(--fill));
}

/* 09 スクロール連動：記事の読了バー */
.motion-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 60;
  background: var(--signal, #0b63ce);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html.motion-ready [data-motion] { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.motion-ready [data-motion="mask"] img { clip-path: none !important; transition: none !important; }
  html.motion-ready [data-motion="fill"] p { color: inherit !important; background: none !important; }
  .motion-progress { display: none; }
}

/* 13 SVGラインドロー：記事の大見出しの下に線が描かれていく */
.motion-rule {
  display: block;
  width: 100%;
  height: 6px;
  margin-top: 8px;
  overflow: visible;
  color: var(--signal, #0b63ce);
}
.motion-rule path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s cubic-bezier(.6,0,.2,1);
}
h2.is-shown .motion-rule path { stroke-dashoffset: 0; }

/* 08 カウントアップ：数字は幅を固定して横揺れを防ぐ */
.motion-count { font-variant-numeric: tabular-nums; }

/* 24 スクロールスパイ：PCの左余白に節の一覧を置き、今読んでいる節を光らせる */
.motion-spy {
  position: fixed;
  top: 120px;
  left: max(16px, calc((100vw - 680px) / 2 - 250px));
  width: 200px;
  max-height: calc(100vh - 160px);
  overflow: auto;
  z-index: 40;
  margin: 0;
  padding: 0 0 0 12px;
  border-left: 1px solid var(--line, rgba(6,19,31,.14));
  list-style: none;
  font-size: 12.5px;
  line-height: 1.5;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.motion-spy.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.motion-spy li { margin: 0 0 8px; }
.motion-spy a {
  display: block;
  color: var(--muted, #5a6875);
  text-decoration: none;
  transition: color .2s ease;
}
.motion-spy a:hover { color: var(--ink, #06131f); }
.motion-spy a.is-current { color: var(--signal, #0b63ce); font-weight: 700; }
.motion-spy a.is-current::before {
  content: "";
  position: absolute;
  margin-left: -13px;
  width: 2px;
  height: 1.5em;
  background: var(--signal, #0b63ce);
}
.toc a.is-current { color: var(--signal, #0b63ce); font-weight: 700; }
@media (max-width: 1239px) { .motion-spy { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .motion-rule path { stroke-dashoffset: 0 !important; transition: none !important; }
  .motion-spy { transition: none !important; }
}

/* 20 カードスタック：論者カード・よくある質問が上に重なっていく（top と縮小率はJSが計算） */
html.motion-ready .motion-stack { position: relative; padding-bottom: 8px; }
html.motion-ready .motion-stack > [data-stack-card]:last-child { position: relative; }
html.motion-ready .motion-stack > [data-stack-card] {
  position: sticky;
  z-index: 1;
  transform-origin: 50% 0;
  will-change: transform;
}
html.motion-ready .article-body .person-card[data-stack-card] {
  background-color: var(--paper, #fff);
  background-image: linear-gradient(rgba(11, 99, 206, 0.035), rgba(11, 99, 206, 0.035));
  box-shadow: 0 -10px 24px rgba(6, 19, 31, 0.07);
}
html.motion-ready[data-color-mode="dark"] .article-body .person-card[data-stack-card] {
  background-color: var(--paper, #0b1520);
  background-image: linear-gradient(rgba(120, 170, 255, 0.06), rgba(120, 170, 255, 0.06));
}
html.motion-ready .faq-list.motion-stack > .faq-item { background-clip: padding-box; }
html.motion-ready .article-body .speaker-profile[data-stack-card] { box-shadow: 0 -10px 24px rgba(6, 19, 31, 0.07); }

/* 論者カードの棒グラフ：カードが見えたら0から伸びる（数字のカウントアップと同時） */
html.motion-ready .person-card .person-gauge-bar {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
html.motion-ready .person-card.is-shown .person-gauge-bar { transform: scaleX(1); }

/* 19 スクロールテリング：番号付きの小見出しが続く節で、今どの項目を読んでいるかを固定表示 */
.motion-scrolly { position: relative; }
.motion-scrolly-panel {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 -4px 18px;
  padding: 10px 4px 8px;
  background: var(--paper, #fff);
  border-bottom: 1px solid var(--line, rgba(6,19,31,.14));
}
.motion-scrolly-title {
  display: block;
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted, #5a6875);
}
.motion-scrolly-steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.motion-scrolly-steps a {
  display: block;
  padding: 6px 4px 5px;
  border-top: 3px solid var(--line, rgba(6,19,31,.14));
  color: var(--muted, #5a6875);
  font-size: 12px;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color .3s ease, color .3s ease;
}
.motion-scrolly-steps b { display: block; font-family: "Roboto Mono", monospace; font-size: 11px; }
.motion-scrolly-steps a.is-done { border-top-color: rgba(11, 99, 206, .4); }
.motion-scrolly-steps a.is-current { border-top-color: var(--signal, #0b63ce); color: var(--ink, #06131f); font-weight: 700; }
.motion-scrolly h3.is-current-step .item-no { box-shadow: 0 0 0 3px rgba(11, 99, 206, .18); }
html[data-color-mode="dark"] .motion-scrolly-panel { background: var(--paper, #0b1520); }
@media (max-width: 560px) {
  .motion-scrolly-steps span { display: none; }
  .motion-scrolly-steps a { text-align: center; }
}
/* PCの広い画面では、本文の右の余白に縦に並べる */
@media (min-width: 1240px) {
  .motion-scrolly-panel {
    top: 110px;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }
  .motion-scrolly-panel > .motion-scrolly-inner {
    position: absolute;
    top: 0;
    left: calc(100% + 48px);
    width: 190px;
    padding-left: 12px;
    border-left: 1px solid var(--line, rgba(6,19,31,.14));
  }
  .motion-scrolly-steps { grid-auto-flow: row; gap: 4px; }
  .motion-scrolly-steps a { border-top: 0; border-left: 3px solid transparent; margin-left: -14px; padding: 4px 0 4px 11px; font-size: 13px; }
  .motion-scrolly-steps a.is-done { border-left-color: rgba(11, 99, 206, .35); }
  .motion-scrolly-steps a.is-current { border-left-color: var(--signal, #0b63ce); }
  .motion-scrolly-steps b { display: inline; margin-right: 6px; }
  html[data-color-mode="dark"] .motion-scrolly-panel { background: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-ready .person-card .person-gauge-bar { transform: none !important; transition: none !important; }
}

/* ===== 図解・図表の演出（記事の図はすべて対象。どの図に何を当てるかは web-animation スキルの対応表） ===== */

/* 02 スライドイン：比較の軸（article-axes）。行ごとに、項目名 → 左の選択肢 → 右の選択肢 → 間の「／」の順に出る
   1行およそ1.6秒。速すぎると何が起きたか分からない（本人指摘）、遅すぎると読む邪魔になるので、この範囲を目安にする */
html.motion-ready .axis-item[data-motion="axes"] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease-out, transform .7s ease-out;
  transition-delay: calc(var(--motion-i, 0) * 450ms);
}
html.motion-ready .axis-item[data-motion="axes"] .axis-choice {
  opacity: 0;
  transform: translateX(var(--axis-from, 48px));
  transition: opacity .8s ease-out, transform .9s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--motion-i, 0) * 450ms + 500ms);
}
html.motion-ready .axis-item[data-motion="axes"] .axis-choice:first-child { --axis-from: -48px; transition-delay: calc(var(--motion-i, 0) * 450ms + 300ms); }
html.motion-ready .axis-item[data-motion="axes"] .axis-vs {
  opacity: 0;
  transform: scale(.3);
  transition: opacity .4s ease-out, transform .5s cubic-bezier(.3,1.6,.5,1);
  transition-delay: calc(var(--motion-i, 0) * 450ms + 1100ms);
}
html.motion-ready .axis-item[data-motion="axes"].is-shown,
html.motion-ready .axis-item[data-motion="axes"].is-shown .axis-choice,
html.motion-ready .axis-item[data-motion="axes"].is-shown .axis-vs { opacity: 1; transform: none; }

/* 13 ラインドロー＋03：流れ図（argument-flow）。行ごとに、番号が点く → カードが入る → 次へ線が伸びる */
html.motion-ready .argument-flow > li[data-motion="flow"]::before {
  transform: scale(.3);
  opacity: 0;
  transition: transform .5s cubic-bezier(.3,1.6,.5,1), opacity .4s ease-out;
  transition-delay: calc(var(--motion-i, 0) * 500ms);
}
html.motion-ready .argument-flow > li[data-motion="flow"] .argument-flow-card {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity .7s ease-out, transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--motion-i, 0) * 500ms + 250ms);
}
html.motion-ready .argument-flow > li[data-motion="flow"]:not(:last-child)::after {
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .8s ease-in-out;
  transition-delay: calc(var(--motion-i, 0) * 500ms + 700ms);
}
html.motion-ready .argument-flow > li[data-motion="flow"].is-shown::before,
html.motion-ready .argument-flow > li[data-motion="flow"].is-shown .argument-flow-card { opacity: 1; transform: none; }
html.motion-ready .argument-flow > li[data-motion="flow"].is-shown:not(:last-child)::after { transform: none; }

/* 03 スタッガー：カード図（visual-card-grid）・表の行 */
html.motion-ready [data-motion="grid"] > * {
  opacity: 0;
  transform: translateY(20px) scale(.98);
  transition: opacity .7s ease-out, transform .7s ease-out;
  transition-delay: calc(var(--motion-i, 0) * 180ms);
}
html.motion-ready [data-motion="grid"].is-shown > * { opacity: 1; transform: none; }

/* 図の見出し（ラベル・題・説明）は先にフェードイン */
html.motion-ready [data-motion="caption"] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
html.motion-ready [data-motion="caption"].is-shown { opacity: 1; transform: none; }
html.motion-ready [data-motion="caption"] .visual-figure-label {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .6s cubic-bezier(.7,0,.2,1) .15s;
}
html.motion-ready [data-motion="caption"].is-shown .visual-figure-label { clip-path: inset(0 0 0 0); }

/* 07 タイプライター：AIサマリーが今生成されているように流れ出る */
.ai-summary.is-generating b::after,
.ai-summary.is-generated b::after {
  margin-left: 10px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .06em;
  vertical-align: 1px;
}
.ai-summary.is-generating b::after {
  content: "生成中…";
  color: #fff;
  background: linear-gradient(90deg, var(--signal, #0b63ce), #6aa8ff, var(--signal, #0b63ce));
  background-size: 200% 100%;
  animation: motion-shimmer 1.1s linear infinite;
}
.ai-summary.is-generated b::after {
  content: "生成完了";
  color: var(--signal, #0b63ce);
  border: 1px solid currentColor;
  animation: motion-fade-out 1.2s ease 1.6s forwards;
}
.ai-summary .motion-type-live { position: relative; }
.ai-summary .motion-caret {
  display: inline-block;
  width: .55em;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--signal, #0b63ce);
  animation: motion-blink .8s steps(1) infinite;
}
.ai-summary .motion-type-ghost { color: transparent; }
.ai-summary .motion-type-fresh {
  background: linear-gradient(90deg, rgba(11,99,206,0), rgba(11,99,206,.16));
  border-radius: 2px;
}
.ai-summary.is-generating {
  box-shadow: 0 0 0 1px rgba(11,99,206,.25), 0 8px 28px rgba(11,99,206,.10);
  transition: box-shadow .6s ease;
}
@keyframes motion-shimmer { to { background-position: -200% 0; } }
@keyframes motion-blink { 50% { opacity: 0; } }
@keyframes motion-fade-out { to { opacity: 0; } }

/* 補足の開閉：開いたときに中身がふわっと出る */
.article-appendix-details[open] > .article-appendix-body,
.article-details[open] > .article-details-body { animation: motion-open .7s ease-out; }
@keyframes motion-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html.motion-ready .article-axes .axis-item,
  html.motion-ready .article-axes .axis-item .axis-choice,
  html.motion-ready .article-axes .axis-item .axis-vs,
  html.motion-ready .argument-flow li::before,
  html.motion-ready .argument-flow li::after,
  html.motion-ready .argument-flow .argument-flow-card,
  html.motion-ready [data-motion="grid"] > *,
  html.motion-ready [data-motion="caption"],
  html.motion-ready [data-motion="caption"] .visual-figure-label { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .article-appendix-details[open] > .article-appendix-body,
  .article-details[open] > .article-details-body { animation: none; }
}

/* 02 スライドイン：対比表（article-compare）の行。行ごとに、観点 → 左の列 → 右の列の順に寄ってくる */
html.motion-ready .cmp-row[data-motion="cmp"] .cmp-label,
html.motion-ready .cmp-row[data-motion="cmp"] .cmp-cell {
  opacity: 0;
  transition: opacity .8s ease-out, transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--motion-i, 0) * 300ms);
}
html.motion-ready .cmp-row[data-motion="cmp"] .cmp-cell.cmp-left { transform: translateX(-40px); transition-delay: calc(var(--motion-i, 0) * 300ms + 250ms); }
html.motion-ready .cmp-row[data-motion="cmp"] .cmp-cell.cmp-right { transform: translateX(40px); transition-delay: calc(var(--motion-i, 0) * 300ms + 500ms); }
html.motion-ready .cmp-row[data-motion="cmp"].is-shown .cmp-label,
html.motion-ready .cmp-row[data-motion="cmp"].is-shown .cmp-cell { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.motion-ready .cmp-row[data-motion="cmp"] .cmp-label,
  html.motion-ready .cmp-row[data-motion="cmp"] .cmp-cell { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ===== AGI Hubが独自に作った案内ページ（main.hub-page。例：/ai-2040）。原作の翻訳ページには付けない ===== */

/* 05 マスクリビール：章見出しの色帯が左から開く。
   見出し自体に clip-path を掛けると IntersectionObserver が「見えていない」と判定して出てこないため、
   紙の色の幕（::after）を右へ縮めて開く */
html.motion-ready .hub-page h2[data-motion="band"] { position: relative; }
html.motion-ready .hub-page h2[data-motion="band"]::after {
  content: "";
  position: absolute;
  inset: -1px -1px -1px -7px;
  background: var(--paper, #fff);
  transform-origin: 100% 50%;
  transition: transform .9s cubic-bezier(.7,0,.2,1);
  pointer-events: none;
}
html.motion-ready .hub-page h2[data-motion="band"].is-shown::after { transform: scaleX(0); }

/* 13 ラインドロー＋03：Plan Aの年表。線が伸び、年 → 出来事の順に時差で出る（4段で約2.5秒） */
html.motion-ready .plan-timeline[data-motion="timeline"]::before {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.8s cubic-bezier(.6,0,.2,1);
}
html.motion-ready .plan-timeline[data-motion="timeline"] .plan-year {
  opacity: 0;
  transform: scale(.6);
  transition: opacity .5s ease-out, transform .6s cubic-bezier(.3,1.5,.5,1);
  transition-delay: calc(var(--step-i, 0) * 420ms + 150ms);
}
html.motion-ready .plan-timeline[data-motion="timeline"] .plan-step > :not(.plan-year) {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .7s ease-out, transform .7s ease-out;
  transition-delay: calc(var(--step-i, 0) * 420ms + 400ms);
}
html.motion-ready .plan-timeline[data-motion="timeline"].is-shown::before,
html.motion-ready .plan-timeline[data-motion="timeline"].is-shown .plan-year,
html.motion-ready .plan-timeline[data-motion="timeline"].is-shown .plan-step > * { opacity: 1; transform: none; }
@media (max-width: 760px) {
  html.motion-ready .plan-timeline[data-motion="timeline"]::before { transform: scaleY(0); transform-origin: 50% 0; }
  html.motion-ready .plan-timeline[data-motion="timeline"] .plan-step > :not(.plan-year) { transform: translateX(16px); }
}

/* 14 テキストフィル：大きな引用（p.pull-quote）。行をまたいで読む順に塗る */
html.motion-ready p.pull-quote[data-motion="fill"] .pq-text {
  color: transparent;
  background-image: linear-gradient(90deg, var(--ink, #06131f) var(--fill, 0%), rgba(6,19,31,.22) var(--fill, 0%));
  -webkit-background-clip: text;
  background-clip: text;
}

/* 10 パララックス：ヒーロー画像を本文より遅く動かす（画像を少し高くして、ずらしても隙間が出ないようにする） */
.page-masthead.motion-parallax .pm-art img {
  height: calc(100% + 72px);
  transform: translateY(-36px);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  html.motion-ready .hub-page h2[data-motion="band"]::after { display: none; }
  html.motion-ready .plan-timeline[data-motion]::before,
  html.motion-ready .plan-timeline[data-motion] .plan-step > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.motion-ready p.pull-quote[data-motion="fill"] .pq-text { color: inherit !important; background: none !important; }
  .page-masthead.motion-parallax .pm-art img { height: 100%; transform: none !important; }
}