/* ページ切り替え時の演出（Fade + 下から上へ）。
   縦に長いページなので、少し下にある状態からなめらかに上へ上がりながら
   ふわっと現れる。サイト内リンクで移動するときは、今のページが少し上へ
   上がりながらふわっと消えてから次のページに切り替わる。
   サイト共通の部品なので全ページで読み込む。 */

html {
  background: #FEEA92;
}

/* メニューの丸いボタンと、その中身（.nova-menu__trigger / .nova-menu）、
   スクロールの案内（.scroll-hint）、イベントページのポップアップ
   （.modal-background / .modal）は対象外にして、常にそのまま表示しておく。
   これらは自分自身が transform で位置決め（中央寄せなど）をしているので、
   対象にするとこのアニメーションの transform で上書きされて位置がずれてしまう */
body > *:not(.nova-menu__trigger):not(.nova-menu):not(.scroll-hint):not(.modal-background):not(.modal):not(.nova-faded-in) {
  animation: nova-fade-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.nova-transition-out > *:not(.nova-menu__trigger):not(.nova-menu):not(.scroll-hint):not(.modal-background):not(.modal) {
  animation: nova-fade-out 0.32s ease-in forwards;
}

/* フェードインが終わった後は page-transition.js がこのクラスを付けて、
   アニメーションそのものを止める（理由は page-transition.js 側のコメント参照）。
   animation: none 以外は指定しない。opacity や transform まで決め打ちすると、
   その要素自身が持っている opacity の切り替え（ポップアップのフェード表示など）
   より強く効いてしまい、逆にそちらが動かなくなってしまう */
body > *.nova-faded-in {
  animation: none;
}

@keyframes nova-fade-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    /* translateY(0) ではなく none にする。0px移動でも transform に値があると、
       その中にある position: fixed な要素（ポップアップなど）の基準がアニメーション
       させている要素自身に変わってしまい、画面に固定されなくなる・位置がずれる
       原因になるため */
    transform: none;
  }
}

@keyframes nova-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-14px);
  }
}

/* 動きを減らす設定をしている人には、演出なしで切り替える */
@media (prefers-reduced-motion: reduce) {
  body > *:not(.nova-menu__trigger):not(.nova-menu):not(.scroll-hint):not(.modal-background):not(.modal),
  body.nova-transition-out > *:not(.nova-menu__trigger):not(.nova-menu):not(.scroll-hint):not(.modal-background):not(.modal) {
    animation: none;
  }
}