/*
 * モーション基本形（全ページ共通基盤。DEC-46 U1）
 *
 * 文法：fade＋translateY 24px／560ms／ease-out（cubic-bezier(0.23,1,0.32,1)）。
 * 発火は assets/js/motion.js の IntersectionObserver で1回のみ。
 * 動かすのは transform と opacity のみ。
 *
 * 安全側の作り：
 * - 初期状態の非表示は、header.php のインラインスクリプトが付与する
 *   html.js の下でのみ効く。JS 無効時は全コンテンツが最初から表示される。
 * - prefers-reduced-motion 時は完成形を静止表示する（並行デザイン）。
 * - 遅延は各要素の style="--d:120ms" のように CSS 変数で指定できる。
 */

:root{
  --ease:cubic-bezier(0.23,1,0.32,1);
  --dur:560ms;
}

html.js .rv{
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity var(--dur) var(--ease) var(--d,0ms),
    transform var(--dur) var(--ease) var(--d,0ms);
}
html.js .rv.in{
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
  html.js .rv{
    opacity:1;
    transform:none;
    transition:none;
  }
}