/* ===== CORE ENGINE motion package =====
   軽量・外部ライブラリなし。prefers-reduced-motion を尊重（JSでクラス付与）。 */

/* --- スクロール出現（fade-up） --- */
html.motion .rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
html.motion .rv.in {
  opacity: 1;
  transform: none;
}

/* --- ヒーロー：映画タイトル風の段階フェード --- */
html.motion .hero h1 {
  animation: heroUp 1s .3s cubic-bezier(.22, .61, .36, 1) both;
  letter-spacing: .18em;
}
html.motion .hero .lead { animation: heroUp 1s .75s cubic-bezier(.22, .61, .36, 1) both; }
html.motion .hero .hero-ctas { animation: heroUp 1s 1.15s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes heroUp {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

/* 下層ページのヒーロー */
html.motion .page-hero h1 { animation: heroUp .9s .15s cubic-bezier(.22, .61, .36, 1) both; }
html.motion .page-hero p { animation: heroUp .9s .45s cubic-bezier(.22, .61, .36, 1) both; }

/* --- 実績サムネイル：ホバーでゆっくりズーム --- */
html.motion .work-thumb { overflow: hidden; }
html.motion .work-thumb img { transition: transform .9s cubic-bezier(.22, .61, .36, 1); }
html.motion .work-card:hover .work-thumb img { transform: scale(1.06); }
html.motion .work-thumb .play::after { transition: background-color .3s ease, transform .3s ease; }
html.motion .work-card:hover .play::after { transform: scale(1.08); }

/* --- ヘッダー：スクロールで沈み込み --- */
html.motion .site-header { transition: padding .35s ease, box-shadow .35s ease, background .35s ease; }
html.motion .site-header.scrolled {
  padding: 8px 24px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .09);
  background: rgba(250, 250, 248, .97);
}

/* --- ライトボックス：フェード＋ポップ --- */
html.motion .vmodal-bg { animation: fadeIn .3s ease both; }
html.motion .vmodal-box { animation: popIn .42s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to { opacity: 1; transform: none; }
}

/* --- ボタン：ホバーの艶 --- */
html.motion .btn { transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
html.motion .btn-primary:hover { box-shadow: 0 10px 26px rgba(46, 110, 126, .35); }

/* --- セクションラベルの下線がすっと伸びる --- */
html.motion .sec-label { position: relative; display: inline-block; padding-bottom: 4px; }
html.motion .sec-label::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--gold); transition: width .8s cubic-bezier(.22, .61, .36, 1) .2s;
}
html.motion .sec-label.rv.in::after { width: 100%; }