/**
 * B-pop フロント: ポップアップ/バナーのスタイル（brief §5-4 / brief v1.2 §2）。
 *
 * - 位置9種（top/middle/bottom × left/center/right）。AC-22
 * - 幅は CSS カスタムプロパティ --bpop-width（JS が設定。既定 320px）。AC-23
 * - はみ出し防止（max-width）・縦横比維持。E-9, P-4
 * - 表示アニメーション6種（.bpop-anim-{type}）。位置の transform（中央系の
 *   translate）は --bpop-tx/--bpop-ty に変数化し、keyframes 内で常に
 *   translate(var(--bpop-tx), var(--bpop-ty)) を合成して破綻を防ぐ
 * - 閉じるフェードアウトは全タイプ共通（.bpop-closing の opacity 0.4s）
 */

/*
 * --bpop-edge: コンテナの画面端オフセット。
 * 閉じるボタン（32px）の中心をコンテナ右上角に重ねるため、ボタンは
 * コンテナ外へ半径 16px はみ出す。さらに :focus-visible のリング
 * （outline 2px + offset 2px = 4px）が外側に出るため、
 * 16px + 4px = 20px を確保し、9位置すべてでボタン全体と
 * フォーカスリングが viewport 内に収まるようにする。
 */

.bpop {
	--bpop-edge: 20px;

	/* 位置補正の transform 成分（中央系の位置クラスが上書き）。
	   calc() で使うため単位付きの 0px にする。 */
	--bpop-tx: 0px;
	--bpop-ty: 0px;

	/* slide の開始オフセット（既定: 下から。top 系は上から）。 */
	--bpop-slide: 24px;

	position: fixed;
	z-index: 99999;
	opacity: 0;
	transform: translate(var(--bpop-tx), var(--bpop-ty));
}

.bpop.bpop-visible {
	opacity: 1;
}

.bpop[hidden] {
	display: none;
}

/*
 * 閉じるフェードアウト（0.4s・全アニメーションタイプ共通）。
 * JS は閉じる操作時に .bpop-visible を外して .bpop-closing を付け、
 * コンテナの transition-duration を読んでフェード完了後に hidden にする。
 */
.bpop.bpop-closing {
	opacity: 0;
	transition: opacity 0.4s ease;
}

/* 位置9種（中央系は --bpop-tx/--bpop-ty で補正）。 */

.bpop-pos-top-left {
	top: var(--bpop-edge);
	left: var(--bpop-edge);
}

.bpop-pos-top-center {
	--bpop-tx: -50%;

	top: var(--bpop-edge);
	left: 50%;
}

.bpop-pos-top-right {
	top: var(--bpop-edge);
	right: var(--bpop-edge);
}

.bpop-pos-middle-left {
	--bpop-ty: -50%;

	top: 50%;
	left: var(--bpop-edge);
}

.bpop-pos-middle-center {
	--bpop-tx: -50%;
	--bpop-ty: -50%;

	top: 50%;
	left: 50%;
}

.bpop-pos-middle-right {
	--bpop-ty: -50%;

	top: 50%;
	right: var(--bpop-edge);
}

.bpop-pos-bottom-left {
	bottom: var(--bpop-edge);
	left: var(--bpop-edge);
}

.bpop-pos-bottom-center {
	--bpop-tx: -50%;

	bottom: var(--bpop-edge);
	left: 50%;
}

.bpop-pos-bottom-right {
	bottom: var(--bpop-edge);
	right: var(--bpop-edge);
}

/* slide: top 系の位置は上から、それ以外は下から（brief v1.2 §2）。 */

.bpop-pos-top-left,
.bpop-pos-top-center,
.bpop-pos-top-right {
	--bpop-slide: -24px;
}

/*
 * 表示アニメーション6種（brief v1.2 §2）。
 * .bpop-visible が付いた瞬間に keyframes で入場する。keyframes 内の transform は
 * 必ず translate(var(--bpop-tx), var(--bpop-ty)) を含み、位置9種（中央系）と
 * 合成しても破綻しない。none は宣言なし＝即時表示。
 */

.bpop-visible.bpop-anim-fade {
	animation: bpop-anim-fade 0.4s ease both;
}

.bpop-visible.bpop-anim-slide {
	animation: bpop-anim-slide 0.45s ease both;
}

.bpop-visible.bpop-anim-pop {
	animation: bpop-anim-pop 0.45s ease both;
}

.bpop-visible.bpop-anim-zoom {
	animation: bpop-anim-zoom 0.5s ease both;
}

.bpop-visible.bpop-anim-spin-zoom {
	animation: bpop-anim-spin-zoom 0.7s ease both;
}

@keyframes bpop-anim-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes bpop-anim-slide {
	from {
		opacity: 0;
		transform: translate(var(--bpop-tx), calc(var(--bpop-ty) + var(--bpop-slide)));
	}

	to {
		opacity: 1;
		transform: translate(var(--bpop-tx), var(--bpop-ty));
	}
}

@keyframes bpop-anim-pop {
	0% {
		opacity: 0;
		transform: translate(var(--bpop-tx), var(--bpop-ty)) scale(0.85);
	}

	60% {
		opacity: 1;
		transform: translate(var(--bpop-tx), var(--bpop-ty)) scale(1.04);
	}

	100% {
		opacity: 1;
		transform: translate(var(--bpop-tx), var(--bpop-ty)) scale(1);
	}
}

@keyframes bpop-anim-zoom {
	from {
		opacity: 0;
		transform: translate(var(--bpop-tx), var(--bpop-ty)) scale(0.5);
	}

	to {
		opacity: 1;
		transform: translate(var(--bpop-tx), var(--bpop-ty)) scale(1);
	}
}

@keyframes bpop-anim-spin-zoom {
	from {
		opacity: 0;
		transform: translate(var(--bpop-tx), var(--bpop-ty)) rotate(-540deg) scale(0);
	}

	to {
		opacity: 1;
		transform: translate(var(--bpop-tx), var(--bpop-ty)) rotate(0deg) scale(1);
	}
}

/* 画像: 指定幅・はみ出し禁止（縦横とも）・縦横比維持。 */

/*
 * 縦横とも画面端オフセット（--bpop-edge × 両側）の余白を確保するため
 * max-width / max-height で制限する。閉じるボタンのはみ出し（半径16px +
 * フォーカスリング4px）は --bpop-edge: 20px に織り込み済み。明示 width と
 * max-height が同時に効く縦長画像では object-fit: contain が縦横比を
 * 維持する（歪み禁止・I-1 対応）。
 */

.bpop img {
	display: block;
	width: var(--bpop-width, 320px);
	max-width: calc(100vw - var(--bpop-edge) * 2);
	height: auto;
	max-height: calc(100vh - var(--bpop-edge) * 2);
	object-fit: contain;
	border: 0;

	/*
	 * 角丸（brief v1.4 §2）。JS が --bpop-radius（px）を設定する。
	 * 未設定（旧ペイロード・radius=0）は 0 にフォールバック＝角丸なし。
	 * img 直接の border-radius なので <a> ラッパーの overflow に依存せず
	 * 四隅がクリップされる。max-width/max-height/object-fit と独立。
	 */
	border-radius: var(--bpop-radius, 0);

	/*
	 * ホバー効果（brief v1.4.2 §2）。opacity と translate のみを短く遷移させる。
	 * 入場は .bpop（コンテナ）の keyframes、閉じるは .bpop-closing の opacity
	 * transition で、いずれも img 自身の transition とは対象が別なので干渉しない。
	 */
	transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/*
 * ホバーで不透明度 0.8＋少し右下へ沈み込む（押し込み感）。@media (hover: hover)
 * でホバー可能なポインタ環境に限定し、タッチ端末での誤発火（タップ後の残留）を防ぐ。
 */
@media (hover: hover) {
	.bpop .bpop-body a:hover img {
		opacity: 0.8;
		transform: translate(2px, 2px);
	}

	/*
	 * シャドウ付きバナーでは沈み込みに合わせて影を少し弱め、浮き戻りに見えない
	 * よう自然な押し込み感にする。border-radius に沿うため角丸とも破綻しない。
	 */
	.bpop-shadow .bpop-body a:hover img {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	}
}

/*
 * ドロップシャドウ（brief v1.4 §2）。shadow=true のとき JS がコンテナに
 * .bpop-shadow を付与する。影は画像（img）にのみ付け、コンテナ右上角に
 * transform 配置される閉じるボタンには波及させない。box-shadow は
 * border-radius の角に沿うため角丸との併用も破綻しない。
 */
.bpop-shadow img {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.bpop .bpop-body a {
	display: block;
	line-height: 0;
}

/* href なし（現在画像がリンクなし）の <a> ラッパーはリンク装飾を持たない。 */
.bpop .bpop-body a:not([href]) {
	cursor: default;
}

/*
 * 閉じるボタン: 最小タップ領域 32x32px・コントラスト確保（白 on 黒系 ≒ 15:1）。
 * ボタンの中心をコンテナ右上角に重ねる（translate(50%, -50%)）。
 * コンテナ外へのはみ出し分（半径16px + フォーカスリング4px）は
 * --bpop-edge: 20px で吸収し、画面外には出ない。
 */

.bpop-close {
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(50%, -50%);
	z-index: 1;
	width: 32px;
	height: 32px;
	min-width: 32px;
	min-height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

/*
 * 閉じるボタンの表示遅延（brief v1.2 §2）。
 * display:none ではなく visibility+opacity で領域を維持して非表示にし、
 * クラスが外れたとき（遅延経過後）に軽くフェードして現れる。
 * 遅延中も Esc キーで閉じられる（JS 側で保証）。
 */
.bpop-close.bpop-close-pending {
	visibility: hidden;
	opacity: 0;
}

.bpop-close:hover,
.bpop-close:focus {
	background: #000;
}

.bpop-close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/*
 * 動きの抑制を希望する環境では全タイプ即時表示・即時非表示にする。
 * JS 側は transition-duration が 0 のとき即 hidden にフォールバックする。
 * （ファイル末尾に置き、同詳細度のアニメーション宣言より後勝ちさせる）
 */
@media (prefers-reduced-motion: reduce) {
	.bpop,
	.bpop.bpop-visible,
	.bpop.bpop-closing,
	.bpop-visible.bpop-anim-fade,
	.bpop-visible.bpop-anim-slide,
	.bpop-visible.bpop-anim-pop,
	.bpop-visible.bpop-anim-zoom,
	.bpop-visible.bpop-anim-spin-zoom,
	.bpop .bpop-close {
		transition: none;
		animation: none;
	}

	/*
	 * 動きの抑制環境ではホバーの沈み込み（transform）を無効化する。
	 * opacity 変化は残し、img の transition も切って即時に切り替える。
	 */
	.bpop img {
		transition: none;
	}

	.bpop .bpop-body a:hover img {
		transform: none;
	}
}