@charset "UTF-8";
/* ================================================================
   vt.css — ページ切り替えのアニメーション（View Transitions）
   記事カードを押すと、カードの画像と見出しが、そのまま記事の上部へ移っていく。
   どの要素を移すかは js/vt.js が決める。
   対応ブラウザ: Chrome / Edge 126 以降、Safari 18.2 以降。それ以外は普通にページが切り替わる。
   ================================================================ */
@view-transition {
  navigation: auto;
}

/* ページ全体はさっと入れ替える */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.28s;
}

/* カードの画像 → 記事のアイキャッチ、カードの見出し → 記事のタイトル */
::view-transition-group(wa-hero),
::view-transition-group(wa-title) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* 画像は縦横比を保ったまま広がる */
::view-transition-old(wa-hero),
::view-transition-new(wa-hero) {
  height: 100%;
  object-fit: cover;
  overflow: clip;
}
/* 見出しは引き伸ばさず、古い文字を早めに消して新しい文字に入れ替える */
::view-transition-old(wa-title),
::view-transition-new(wa-title) {
  height: 100%;
  width: auto;
  object-fit: none;
  object-position: left top;
}
::view-transition-old(wa-title) {
  animation-duration: 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}