/* ===== ページの切り替え ===== */
/* ブラウザ標準の View Transitions を使う。対応していないブラウザでは今までどおり普通に切り替わる。 */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root){ animation-duration:.34s; animation-timing-function:cubic-bezier(.22,.61,.36,1) }
::view-transition-old(root){ animation-name:flxPageOut }
::view-transition-new(root){ animation-name:flxPageIn }
@keyframes flxPageOut{ from{opacity:1} to{opacity:0} }
@keyframes flxPageIn{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }

/* ヘッダーとスマホの固定バーは動かさない（同じサイトの中を移動している感じを保つ） */
header, .spBar{ view-transition-name:flxHeader }
.spBar{ view-transition-name:flxBar }
::view-transition-group(flxHeader),
::view-transition-group(flxBar){ animation-duration:0s }
::view-transition-old(flxHeader), ::view-transition-new(flxHeader),
::view-transition-old(flxBar), ::view-transition-new(flxBar){ animation:none; mix-blend-mode:normal }

/* 「動きを減らす」設定の端末では切り替えの演出をしない */
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root), ::view-transition-new(root){ animation:none }
}