/* ===== 2026-09-28 トップ：スクロールで浮かび上がる（試作） =====
 * 岡田さん（9/28）「スクロールした時にコンテンツが次々と浮かび上がるような動きを取りたい。とりあえずトップページでテストしたい。」
 * 読み込みはトップのみ（functions.php「2026-09-28 トップ：スクロールで浮かび上がる」ブロック）。
 * 戻し方＝functions.php のそのブロックを消す（またはフィルタ gasp_top_reveal_enabled で false）。このファイルと top-reveal.js は消してよい。
 *
 * 作法（sekkei 案 9/28）：
 *  - 隠すクラスは JS が付ける。CSS だけでは何も隠さない（JS が落ちても中身は見える）
 *  - 動かすのは opacity と縦の translate だけ（横に動かすと横あふれが出る）
 *  - transform ではなく translate プロパティを使う（要素が元から持つ transform と衝突させないため）
 *  - 表示し終えたら JS がクラスを外す（translate を残すと包含ブロックが変わり sticky や横あふれの条件が変わる）
 */

:root {
	/* 動きの強さはここだけで調整する */
	--gasp-reveal-distance: 56px;
	--gasp-reveal-duration: 900ms;
	--gasp-reveal-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.gasp-reveal-pending {
	opacity: 0;
	translate: 0 var(--gasp-reveal-distance);
}

.gasp-reveal-pending.gasp-reveal-in {
	opacity: 1;
	translate: 0 0;
	transition:
		opacity var(--gasp-reveal-duration) var(--gasp-reveal-ease),
		translate var(--gasp-reveal-duration) var(--gasp-reveal-ease);
	transition-delay: var(--gasp-reveal-delay, 0ms);
}

/* トップでは親テーマの AOS（fade-up・一度きり・600ms）を打ち消し、この仕組みに一本化する。
 * AOS の [data-aos]{pointer-events:none} も外す（動き出すまで押せない件） */
[data-aos] {
	opacity: 1 !important;
	transform: none !important;
	pointer-events: auto !important;
	transition-property: none !important;
}

/* ===== 2026-09-28 末尾CTA：幕が上がる見え方（top-scroll.jsが data-gasp-reveal="wipe" を付ける） =====
 * 岡田さんの回答（4つの質問のうち末尾CTA）：「幕が上がる見え方」。
 * opacity＋translateの既定に対して、こちらは opacity＋clip-path（下→上に開く）に差し替える。
 * PENDING/IN のクラス管理そのものはtop-reveal.jsの通常の仕組みをそのまま使う（一度きり）。 */
[data-gasp-reveal="wipe"].gasp-reveal-pending {
	opacity: 0;
	translate: 0 0;
	clip-path: inset(100% 0 0 0);
}
[data-gasp-reveal="wipe"].gasp-reveal-pending.gasp-reveal-in {
	opacity: 1;
	clip-path: inset(0 0 0 0);
	transition:
		opacity var(--gasp-reveal-duration) var(--gasp-reveal-ease),
		clip-path var(--gasp-reveal-duration) var(--gasp-reveal-ease);
	transition-delay: var(--gasp-reveal-delay, 0ms);
}

/* 2026-09-28：スマホは出現距離だけ短く（28px・実測でない候補） */
@media screen and (max-width: 767px) {
	:root {
		--gasp-reveal-distance: 28px;
	}
}

@media print {
	.gasp-reveal-pending {
		opacity: 1 !important;
		translate: none !important;
		clip-path: none !important;
	}
}