/* トランジション・アニメーション（JA/EN 共通・単一ソース）
   - 動きを伴う演出はすべて prefers-reduced-motion: no-preference 配下に置く
   - opacity / transform のみを使用し、レイアウトに影響させない（CLS を発生させない）
   - 非表示クラス（.motion-hidden）は motion.js が付与する。
     JS 無効・読み込み失敗時や IntersectionObserver 非対応環境では
     クラスが付かず、全コンテンツが最初から表示される

   責務の境界:
   - このファイル … 読み込み時の登場演出・スクロール連動表示・ページ間遷移
   - 各ページのインライン CSS … 配色・レイアウト・コンポーネント単体のホバー表現 */

/* reduce 環境ではインライン CSS のスムーススクロールも無効化する */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media (prefers-reduced-motion: no-preference) {

  /* --- ページ読み込み時の登場アニメーション --- */
  @keyframes motion-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }

  /* 印章マーク: 印を押すように少し大きい状態から収まる */
  @keyframes motion-stamp {
    0%   { opacity: 0; transform: scale(1.2) rotate(-4deg); }
    60%  { opacity: 1; transform: scale(0.98) rotate(0.5deg); }
    100% { opacity: 1; transform: none; }
  }

  /* 朱の罫: 左端から引く */
  @keyframes motion-rule {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  /* ナビゲーション（固定ヘッダー） */
  .nav .mark        { animation: motion-stamp 0.5s  cubic-bezier(0.2, 0.7, 0.3, 1) both; }
  .nav__name        { animation: motion-rise  0.55s ease-out 0.10s both; }
  .nav__links       { animation: motion-rise  0.55s ease-out 0.18s both; }
  .nav .lang        { animation: motion-rise  0.55s ease-out 0.24s both; }

  /* ヒーロー */
  .hero h1          { animation: motion-rise  0.6s  ease-out 0.16s both; }
  .hero__rule       { animation: motion-rule  0.5s  cubic-bezier(0.2, 0.7, 0.3, 1) 0.42s both; }
  .hero .tagline    { animation: motion-rise  0.6s  ease-out 0.52s both; }
  .hero .tagline-en { animation: motion-rise  0.6s  ease-out 0.62s both; }
  .nowbar-wrap      { animation: motion-rise  0.6s  ease-out 0.74s both; }

  /* --- スクロールに応じた表示 --- */
  .rv {
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  .rv.motion-hidden {
    opacity: 0;
    transform: translateY(18px);
  }

  /* --- ページ間トランジション（言語切替 / ⇔ /en/） ---
     クロスドキュメント View Transitions。非対応ブラウザでは無視され通常遷移になる */
  @view-transition { navigation: auto; }
  .nav .mark { view-transition-name: sealmark; }
  .hero h1   { view-transition-name: site-title; }

  /* View Transition 経由の遷移（.motion-vt は motion.js が付与）では
     登場アニメーションを重ねず、コンテンツも最初から表示する */
  html.motion-vt .nav .mark,
  html.motion-vt .nav__name,
  html.motion-vt .nav__links,
  html.motion-vt .nav .lang,
  html.motion-vt .hero h1,
  html.motion-vt .hero__rule,
  html.motion-vt .hero .tagline,
  html.motion-vt .hero .tagline-en,
  html.motion-vt .nowbar-wrap {
    animation: none;
  }
  html.motion-vt .rv.motion-hidden {
    opacity: 1;
    transform: none;
    transition: none;
  }
}