/* inview.css — スクロール連動の fade-up
   assets/js/inview.js が各セクション内の要素へ .ic-fade-up を付け、
   ビューポートに入った時点で .is-inview を足して再生する。
   ※ 初期状態（非表示）を作るのは JS が .ic-fade-up を付けた要素だけなので、
     JS が動かない環境ではコンテンツはそのまま表示される。
   ※ prefers-reduced-motion: reduce の場合は JS 側でクラス付与ごと行わない。 */

.ic-fade-up {
  opacity: 0;
  transform: translateY(var(--motion-shift));
  transition:
    opacity var(--motion-duration) var(--motion-ease-out) var(--ic-inview-delay, 0s),
    transform var(--motion-duration) var(--motion-ease-out) var(--ic-inview-delay, 0s);
  will-change: opacity, transform;
}

/* ファーストビュー（MV）の初期状態。
   スクロール連動と違い、MVは最初から画面内にあるため「JSがクラスを付けてから隠す」では
   一度表示された後に消えることになり、演出が成立しない（実際にはtransitionが
   1→0へ動き出した直後に1へ戻るため、ほとんど何も起きない）。
   そのため初期状態だけはマークアップ側（*--fv）＋CSSで持ち、最初の描画から隠しておく。
   ・.ic-js ゲート：JSが無い環境では隠れたままにならないように
   ・reduced-motion：演出を止める設定の人には隠さない（JS側も再生しない）
   ・transition を持たせない：ここで opacity を動かしてしまうと上記の取りこぼしが起きる */
@media (prefers-reduced-motion: no-preference) {
  .ic-js .ic-fade-up--fv {
    opacity: 0;
    transform: translateY(var(--motion-shift));
  }
}

/* 再生後は transform を none に戻し、スタッキングコンテキストを残さない
   （はみ出し装飾の重なり順が変わらないようにするため） */
.ic-fade-up.is-inview {
  opacity: 1;
  transform: none;
  will-change: auto;
}