/*
 * View Transitions CSS
 *
 * 画面遷移時のアニメーションを定義
 * - forward（次へ）: bottom → top（下から上にせり上がる）
 * - back（戻る）: top → bottom（上から下に下がる）
 *
 * 対象: main要素のみ（ヘッダー・フッター・オーバーレイは固定）
 *
 * @see https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
 */

/* ============================================
   View Transition 対象要素の定義
   ============================================ */

/* main要素を独立したトランジショングループとして定義 */
main {
  view-transition-name: main-content;
}

/* ============================================
   root（html全体）のアニメーション無効化
   ============================================ */

/* rootはデフォルトでフェードアニメーションが適用されるため無効化 */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

/* ============================================
   View Transition 基本設定（main-content）
   ============================================ */

/* トランジション対象をmain-contentに限定 */
::view-transition-old(main-content),
::view-transition-new(main-content) {
  animation-duration: 300ms;
  animation-timing-function: ease-in-out;
}

/* ============================================
   Forward（次へ）: 下から上にせり上がる
   ============================================ */

/* forward: 古いmainは上に消えていく */
html[data-transition-direction="forward"]::view-transition-old(main-content) {
  animation-name: slide-out-to-top;
}

/* forward: 新しいmainは下から現れる */
html[data-transition-direction="forward"]::view-transition-new(main-content) {
  animation-name: slide-in-from-bottom;
}

/* ============================================
   Back（戻る）: 上から下に下がる
   ============================================ */

/* back: 古いmainは下に消えていく */
html[data-transition-direction="back"]::view-transition-old(main-content) {
  animation-name: slide-out-to-bottom;
}

/* back: 新しいmainは上から現れる */
html[data-transition-direction="back"]::view-transition-new(main-content) {
  animation-name: slide-in-from-top;
}

/* ============================================
   キーフレーム定義
   ============================================ */

/* 上に消える（forward時の古いmain） */
@keyframes slide-out-to-top {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-30%);
    opacity: 0;
  }
}

/* 下から現れる（forward時の新しいmain） */
@keyframes slide-in-from-bottom {
  from {
    transform: translateY(30%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 下に消える（back時の古いmain） */
@keyframes slide-out-to-bottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(30%);
    opacity: 0;
  }
}

/* 上から現れる（back時の新しいmain） */
@keyframes slide-in-from-top {
  from {
    transform: translateY(-30%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ============================================
   フォールバック（View Transitions未サポート時）
   ============================================ */

/* 未サポートブラウザでは通常遷移（アニメーションなし） */
@supports not (view-transition-name: none) {
  /* 特別な処理は不要、通常のページ遷移が行われる */
}