/* ============================================================
   ページ遷移
   墨色の幕が下から画面を覆い、次のページでは上へ抜けていく（文字・線などは載せない）。
   状態は html のクラスで持つ：
     .pt-leave … 離脱時（幕が上がってきて覆う）
     .pt-enter … 遷移で来たページの初期状態（覆われている）  → .pt-go で幕が抜ける
   ============================================================ */
.pt{
  position:fixed;inset:0;z-index:1000;
  pointer-events:none;
  overflow:hidden;
}
.pt__b{
  position:absolute;inset:0;
  background:#16202A;
  transform:translate3d(0,101%,0);
  will-change:transform;
}

/* ---- 離脱：下から覆う ---- */
.pt-leave .pt{pointer-events:auto}
.pt-leave .pt__b{
  transform:none;
  transition:transform .4s cubic-bezier(.76,0,.24,1);
}

/* ---- 到着：覆われた状態から始めて、上へ抜ける ---- */
.pt-enter .pt__b{transform:none}
.pt-enter.pt-go .pt__b{
  transform:translate3d(0,-101%,0);
  transition:transform .5s cubic-bezier(.76,0,.24,1) .04s;
}

/* ---- スマホ・タブレット：ブラウザ標準のページ間 View Transitions ----
   JS の幕だと、モバイルのブラウザがページ間に挟む白い地で一瞬フラッシュする。
   前のページが上へ抜けて消え、次のページが下から浮かび上がる。
   画面全体を 1 枚で入れ替える（ヘッダーに名前を付けて固定すると、メニューを開いた暗いヘッダーから
   白いヘッダーへ形を変えながら動いてしまうため付けない）。非対応ブラウザは普通に切り替わる。
   判定は main.js の SP 判定と同じ条件にしておくこと（SP では JS の幕は使わない） */
@media (max-width:1024px),(hover:none){
  .pt{display:none}
  @view-transition{navigation:auto}
  /* 前のページは少し上へ抜けながら消え、次のページは下から浮かび上がる。
     重ねるだけ（0.35 秒のクロスフェード）だと目には「パッと」切り替わって見えたため */
  ::view-transition-old(root){animation:thg-vt-out .3s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:thg-vt-in .6s cubic-bezier(.22,.61,.36,1) .12s both}
}

/* View Transitions が中止されたときの代わり（header-group.php の pagereveal で付ける）。動きは thg-vt-in と同じ */
html.vt-fb body{opacity:0;transform:translate3d(0,28px,0)}
html.vt-fb.vt-fb-go body{
  opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);
}

@keyframes thg-vt-out{to{opacity:0;transform:translate3d(0,-14px,0)}}
@keyframes thg-vt-in{from{opacity:0;transform:translate3d(0,28px,0)}}

@media (prefers-reduced-motion:reduce){
  .pt{display:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}