/* 企画一覧：写真研究会のカードの演出「シャッター」（動きは fx.js）
   カメラの絞りの羽根がカード全体で回りながら閉じ、開くと写真研究会のサイトのオープニング（黒い画面に生成りの線のロゴ）が現れる。
   カードの上に重ねるだけで、カードの大きさは変えない（一覧の並びがずれない）。ロゴは写真研究会のサイトの絵そのまま */
.pcard--fx { isolation: isolate; }
.pfx { position: absolute; inset: 0; z-index: 2; overflow: hidden; border-radius: inherit; pointer-events: none; }

/* 黒い画面（サイトのオープニングと同じ #050505）。絞りが閉じきったところで見えるようにする */
.pfx__stage { position: absolute; inset: 0; background: #050505; opacity: 0; }
/* ロゴは、もとの写真の部分の真ん中に置く（X・Instagram のアイコンの行より上。margin-top の % はカードの幅に対する割合：写真の高さの半分 28.1% − ロゴの高さの半分 14%） */
.pfx__logo { display: block; width: 84%; margin: 14% auto 0; }
.pfx__logo svg { display: block; width: 100%; height: auto; overflow: visible; }
.pfx__logo .outB { fill: none; stroke: #efe7da; stroke-width: 4.5; stroke-linejoin: round; }
.pfx__logo .sinceB { fill: #efe7da; }

/* どの企画のカードか：下に企画番号・企画名・団体名を小さく残す */
.pfx__cap { position: absolute; inset: auto 0 22px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: rgba(239, 231, 218, 0.78); text-align: center; }
.pfx__cap-no { font-family: var(--goth); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: rgba(239, 231, 218, 0.55); }
.pfx__cap-ti { font-family: var(--mincho); font-size: 16px; font-weight: 700; letter-spacing: 0.08em; }
.pfx__cap-gr { font-size: 12px; letter-spacing: 0.08em; color: rgba(239, 231, 218, 0.6); }

/* スマホで1回目のタップのあと、カードに青い枠が残らないようにする（キーボードで選んだときだけ枠を出す） */
.pcard--fx:focus-within { outline: none; }
.pcard--fx:has(:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }

/* 絞りの羽根：黒い板に、回りながら縮む八角形の穴（穴の大きさと向きは fx.js が属性で入れる） */
.pfx__iris { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }

/* 演出のあいだも X・Instagram のアイコンは同じ場所で押せるまま。黒い画面のあいだ（is-on。fx.js が黒い画面に切り替わるところで付け外しする）は生成りの色にする */
.pcard--fx .pcard__sns { z-index: 3; }
.pcard--fx .sns { transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease), transform .2s var(--ease); }
.pcard--fx.is-on .sns { color: #efe7da; border-color: rgba(239, 231, 218, 0.45); background: rgba(5, 5, 5, 0.35); }
.pcard--fx.is-on .sns:hover { background: #efe7da; border-color: #efe7da; color: #050505; }

/* 「視差効果を減らす」の設定では動かさない（公式サイトのほかの動きと同じ決まり） */
@media (prefers-reduced-motion: reduce) {
  .pfx { display: none; }
}