@charset "UTF-8";
/*
 * スクロール表示アニメーション（2026-08-19）
 * 配布先: themes/swell_child/assets/css/acm-reveal.css
 * 対象面: 投稿ページの本文（.post_content）／TOPページのセクション（.main-area > section）
 *
 * ⚠ 触る前に読むこと。この4点が守れていないと SEO・レイアウトに実害が出る。
 *
 * 1. 初期の非表示状態は **JS が付けた .acm-rv にだけ** 効かせている。
 *    CSS に無条件で opacity:0 を書くと、JS が落ちた／IntersectionObserver が
 *    発火しなかったときに中身が永久に見えなくなる（レンダリング結果が空扱いになる）。
 *    既存の /speed-test/ の .st-reveal はこの弱点を持っているので真似しないこと。
 * 2. animate するのは transform と opacity だけ。
 *    height / margin / top を動かすとレイアウトが動いて CLS が悪化する。
 * 3. ファーストビューの要素は JS 側で対象外にしている（LCP を遅らせないため）。
 * 4. **横方向の動きは overflow-x: clip とセット**。全幅の要素を translateX すると
 *    画面外にはみ出して横スクロールバーが出る。TOPのセクションに clip を掛けて封じている。
 *
 * 停止方法は functions.php の acm-reveal ブロックのコメントを参照。
 */

.acm-rv {
	opacity: 0;
	transition: opacity .5s cubic-bezier(.22, .61, .36, 1),
	            transform .5s cubic-bezier(.22, .61, .36, 1);
}

.acm-rv.is-revealed {
	opacity: 1;
	transform: none;
}

/* ── 動きの種類 ───────────────────────────────
   JS が .acm-rv--{name} を付ける。TOPはセクションごとに配り分ける。 */
.acm-rv--up    { transform: translateY(24px); }
.acm-rv--up-lg { transform: translateY(48px); }
.acm-rv--left  { transform: translateX(-36px); }
.acm-rv--right { transform: translateX(36px); }
.acm-rv--zoom  { transform: scale(.93); }
.acm-rv--fade  { transform: none; }

/* TOPは動きを一段大きく・ゆっくり（記事本文は読み物なので控えめのまま） */
body.home .acm-rv {
	transition-duration: .62s;
}
body.home .acm-rv--up    { transform: translateY(34px); }
body.home .acm-rv--up-lg { transform: translateY(60px); }

/* ⚠ 横方向の動きが横スクロールバーを作らないようにする。
   clip はスクロールコンテナを作らないので、hidden と違って position:sticky を壊さない。
   非対応ブラウザ向けに hidden を先に置いて上書きする。 */
body.home .main-area > section {
	overflow-x: hidden;
	overflow-x: clip;
}

/* ── TOPのメインビジュアル：Ken Burns（ゆっくり寄りながら流れる）─────────
   SWELL のメインビジュアル機能が出す単一画像（#main_visual > … > img.p-mainVisual__img）。
   マークアップはテンプレ外で生成されるので、CSSだけで動かす。

   ⚠ LCP を壊さないための条件:
   ・**opacity は触らない**。フェードインさせると LCP がその分だけ後ろにずれる。
     transform だけならペイント自体は即座に起きるので LCP に影響しない。
   ・キーフレームの開始が scale(1)＝アニメーション無しと同じ絵から始まる。
   ・scale で画像がコンテナからはみ出すため、.p-mainVisual__slide に overflow:hidden を掛ける。
   動きを止めたいときはこのブロックを消すか、下の acm_reveal オプションで面ごと止める。 */
@media (prefers-reduced-motion: no-preference) {
	body.home .p-mainVisual__slide {
		overflow: hidden;
	}
	body.home .p-mainVisual__img {
		transform-origin: 50% 50%;
		animation: acmKenBurns 26s ease-in-out infinite alternate;
	}
	@keyframes acmKenBurns {
		from { transform: scale(1)    translate3d(0, 0, 0); }
		to   { transform: scale(1.08) translate3d(-1.2%, -0.8%, 0); }
	}
}

/* 動きを減らす設定を尊重する（JS 側でも早期 return しているが、二重に担保する） */
@media (prefers-reduced-motion: reduce) {
	.acm-rv,
	.acm-rv.is-revealed,
	body.home .acm-rv {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		transition-delay: 0s !important;
	}
}

/* 印刷時は必ず見えるようにする */
@media print {
	.acm-rv {
		opacity: 1 !important;
		transform: none !important;
	}
}