/*
 * 2026-10-31 東京UBA：② 押した写真が、次のページの表紙になって移る（見た目。仕組みは uba/fx-transition.php）
 * - 人間「他のページもどんどんブラッシュアップしていこう。デザイン、アニメーション提案して欲しい」→ 提案①〜⑪を全部
 * - 写真は0.5秒で、今の位置と大きさから次の位置と大きさへ。角は、押した写真の角丸（前後のメンバーの丸い顔なら丸）から行き先の角丸へ
 * - まわりの画面は0.25秒で入れ替わる（歴代会長のページの中の移り方は style.css「⑥」のまま）
 * - 着いたら動かない：移ってきた扉の写真・顔写真は、最初の動き（ubaHeaderSettle・uba4In）を省く
 * - 動きを減らす設定では、移り方そのものを出さない（宣言も @media の中）
 */
@media (prefers-reduced-motion:no-preference) {
  ::view-transition-group(*.uba18-photo) { animation-duration:.5s; animation-timing-function:cubic-bezier(.2,.7,.2,1); }
  /* 移るあいだも角丸のまま（丸い顔は、丸から角丸の四角へ）。overflow と border-radius で切ると、入れ替わりの途中に四角い細い線が残るので clip-path で */
  ::view-transition-image-pair(*.uba18-photo) { clip-path:inset(0 round var(--uba18-r1,16px)); animation:uba18Round .5s cubic-bezier(.2,.7,.2,1) both; }
  /* 縦横の比が違っても（一覧3:2→扉の横長、丸い顔→4:5）、ゆがめずに切り抜いて見せる。入れ替わりは前半の0.3秒で */
  ::view-transition-old(*.uba18-photo), ::view-transition-new(*.uba18-photo) { inline-size:100%; block-size:100%; object-fit:cover; animation-duration:.3s; }
  /* 行き先の写真がまだ読み込めていないあいだは、押した写真を見せたまま移る */
  html.uba18-wait::view-transition-old(*.uba18-photo) { animation:uba18Keep 1s linear both; }
  html.uba18-wait::view-transition-new(*.uba18-photo) { animation:uba18Hide 1s linear both; }
  /* まわりの画面は0.25秒でさっと入れ替わる */
  html:not([data-uba-pres])::view-transition-old(root), html:not([data-uba-pres])::view-transition-new(root) { animation-duration:.25s; }
  /* 行き先に同じ写真がない写真も、まわりと一緒に0.25秒で消える。押した写真（uba18-…）のほか、
     歴代会長の一覧・二十代のページから会長挨拶へ移るときの顔の札（uba-pres-21。行き先に同じ名前がない）も。
     歴代会長のページ同士（行き先がある・data-uba-pres のページ）は style.css「⑥」のまま */
  html:not([data-uba-pres])::view-transition-old(*):only-child,
  html:not([data-uba-pres])::view-transition-new(*):only-child { animation-duration:.25s; }
}
@keyframes uba18Round { from { clip-path:inset(0 round var(--uba18-r0,16px)); } to { clip-path:inset(0 round var(--uba18-r1,16px)); } }
@keyframes uba18Keep { from, to { opacity:1; } }
@keyframes uba18Hide { from, to { opacity:0; } }

/* 移ってきた写真は、扉の「少し大きいところから落ち着く」と、メンバーの顔写真の「下からふわっと」を省く（二度動かない） */
html.uba18-vt body #page_header .image,
html.uba18-vt body #page_header .image img,
html.uba18-vt body .uba4-ahero,
html.uba18-vt body .uba4-ahero img,
html.uba18-vt body .uba4-phero__photo,
html.uba18-vt body .uba4-phero__face { animation:none !important; }

/* 押した瞬間：カード・顔の壁で、マウスを乗せて出ていた活動の写真を引っ込め、顔を前に（その顔が次のページへ移る） */
.uba18-go .is-scene { opacity:0 !important; transition:opacity .2s ease !important; }