/**
 * Block Scroll Visibility — フロントエンドCSS
 *
 * has-scroll-visibility が付与された universal-block を画面下に固定追従させる。
 * 表示状態は JS が is-visible クラスのトグルで制御する。
 */

.wp-block-flavor-universal-block.has-scroll-visibility {
	/* 自動配置（位置設定 Extension の代わりに自動適用 / 案B） */
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;

	/* 初期状態: 画面外（下方向）に隠す */
	transform: translateY(100%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	/* visibility を opacity 完了後に切り替えるための合成トランジション */
	transition:
		transform 0.3s ease,
		opacity 0.3s ease,
		visibility 0s 0.3s;

	/* 既存の universal-block 配下の中身は中央寄せされやすいよう、
	   max-width で必要なら絞れるようにしておく（運用者が cancel したい場合は CSS変数や
	   universal-block の size Extension で上書き） */
	max-width: 100%;
}

.wp-block-flavor-universal-block.has-scroll-visibility.is-visible {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;

	/* 表示中は visibility を即時 visible に */
	transition:
		transform 0.3s ease,
		opacity 0.3s ease,
		visibility 0s;
}

/* prefers-reduced-motion: アニメーションを抑制 */
@media (prefers-reduced-motion: reduce) {
	.wp-block-flavor-universal-block.has-scroll-visibility {
		transition-duration: 0s;
	}
}