/* Cross-document View Transitions（MPA）。
   本体サイトのページだけがこのファイルを読み込む。
   /kaigo/ は読み込まないため、View Transitionに参加しない。
   遷移は旧・新の両ドキュメントがopt-inしたときだけ発生する。 */

@view-transition {
  navigation: auto;
}

/* 旧ページが完全に消えてから、新ページが出る。
   旧ページと新ページを同時に半透明で重ねないため、
   HEROの高さや文字位置が違うページ間でも二重には見えない。
   合計280ms（旧90ms + 新190ms）。 */
@keyframes svl-view-transition-old {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* 32.14%（＝90ms）まで不可視で保持し、旧ページが消えてから登場させる。
   animation-delay では遅延中に開始値が表示され重なってしまうため、
   キーフレーム内で保持する。 */
@keyframes svl-view-transition-new {
  0%,
  32.14% {
    opacity: 0;
    transform: translateY(10px);
  }

  32.15% {
    opacity: .9;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

::view-transition-group(root) {
  animation-duration: 280ms;
}

::view-transition-old(root) {
  animation: svl-view-transition-old 90ms ease-out forwards;
  mix-blend-mode: normal;
  z-index: 2;
}

::view-transition-new(root) {
  animation: svl-view-transition-new 280ms ease-out forwards;
  mix-blend-mode: normal;
  z-index: 1;
}

/* 動きを減らす設定では、遷移そのものを行わない。 */
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}