/*
 * 写真の出し方「幕下ろし」
 * 1. 写真の枠が、紺の幕をかぶった状態で上から下へ伸びる（.75秒）
 * 2. 幕が下へ抜けていき、写真が少し寄った状態から元の大きさに戻る
 * 3. キャプションがあとから浮かぶ
 * html.ts50-pr-on のときだけ隠す（JSが動かないときは写真はそのまま）
 */
.ts50-pr { display: block; position: relative; overflow: hidden; border-radius: 3px; }

.ts50-pr-on .ts50-pr::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #001040;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  pointer-events: none;
}
/* 議長の写真（座談会の話し手も）は特色の青の幕 */
.ts50-pr-on .ts50-chair-portrait .ts50-pr::after, .ts50-pr-on .ts50-rt-person .ts50-pr::after { background: #15a8e2; }

/* 出る前 */
/* 伸びる動きは clip-path で（transform だと枠の大きさが0になり、画面に入ったことを検知できない） */
.ts50-pr-on .ts50-pr:not(.is-in) { clip-path: inset(0 0 100% 0); }
.ts50-pr-on .ts50-pr:not(.is-in)::after { transform: scaleY(1); }
.ts50-pr-on .ts50-pr:not(.is-in) img { transform: scale(1.18); }
.ts50-pr-on .ts50-pr:not(.is-in) + figcaption { opacity: 0; transform: translateY(12px); }

/* 出るとき（終わったら元のスタイルに戻すので、アルバムのホバーの拡大はそのまま効く） */
.ts50-pr-on .ts50-pr.is-in {
  animation: ts50PrGrow .75s cubic-bezier(.76, 0, .24, 1) var(--pr-d, 0s) backwards;
}
.ts50-pr-on .ts50-pr.is-in::after {
  animation: ts50PrLift .85s cubic-bezier(.76, 0, .24, 1) calc(var(--pr-d, 0s) + .8s) backwards;
}
.ts50-pr-on .ts50-pr.is-in img {
  animation: ts50PrSettle 1.6s cubic-bezier(.2, .7, .2, 1) calc(var(--pr-d, 0s) + .8s) backwards;
}
.ts50-pr-on .ts50-pr.is-in + figcaption {
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--pr-d, 0s) + 1.3s);
}

@keyframes ts50PrGrow { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ts50PrLift { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes ts50PrSettle { from { transform: scale(1.18); } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .ts50-pr-on .ts50-pr, .ts50-pr-on .ts50-pr img, .ts50-pr-on .ts50-pr + figcaption { transform: none !important; clip-path: none !important; opacity: 1 !important; animation: none !important; }
  .ts50-pr-on .ts50-pr::after { display: none; }
}