/* =========================================================
   Muraoka Dental — スクロール連動リビール
   opacity + translateY だけで構成する（合成のみでレイアウトを起こさない）。

   安全設計:
   - 隠す指定は html.js-reveal 配下でのみ効く。JSが動かない環境では最初から
     全部見えている（コンテンツが永久に消える事故と、クローラ非表示を防ぐ）。
   - js-reveal の付与は functions.php のインラインスクリプト（wp_head 優先度0）。
     prefers-reduced-motion: reduce の場合はそもそも付与しないので、
     このファイル側に打ち消し規則を書く必要がない。
   - :is() / :where() 非対応ブラウザでは規則ごと無効化される = 「アニメ無しで
     普通に表示」という安全な壊れ方をする。

   非表示側を :where() で包んでいるのは詳細度対策。
   素で `html.js-reveal .info__list > li` と書くと詳細度 (0,2,2) になり、
   出現側の `html.js-reveal .is-visible` (0,2,1) を上回って
   .is-visible が効かず要素が出てこない（実際にこれで特徴リストが消えた）。
   :where() は詳細度0なので非表示側は (0,1,1) に下がり、必ず出現側が勝つ。

   段差（スタッガー）は assets/js/reveal.js が inline style で付ける。
   遅延は「描画前」に決まっている必要がないため、CSSに nth-child を並べるより
   セレクタ一覧の二重管理が減る。

   ※ 対象セレクタは assets/js/reveal.js の SINGLE / STAGGERED と対になっている。
     どちらかを変えたら必ず両方直すこと。
   ========================================================= */

:root {
	/* design.md（Figma）にモーション系トークンが存在しないため、ここで定義する。
	   既存UIの transition が .2〜.25s なので、それと喧嘩しない範囲に収めた。
	   Figma側にモーション定義が追加されたらここを差し替える。 */
	--reveal-distance: 24px;
	--reveal-duration: .7s;
	--reveal-easing: cubic-bezier(.22, .61, .36, 1); /* 減速 = 静かに収まる */
	--reveal-stagger: 90ms;
	--reveal-beat: 120ms; /* 見出し EN → JP の二拍 */
}

@media (max-width: 767px) {
	:root {
		/* SPは視野が狭くスクロールも速いので、距離と時間を詰める */
		--reveal-distance: 16px;
		--reveal-duration: .6s;
		--reveal-stagger: 70ms;
		--reveal-beat: 100ms;
	}
}

/* ---------- 出現前の状態 ---------- */
html.js-reveal :where(
	/* トップ：単体で出る要素 */
	.hero__catch,
	.hero__badges,
	.sec-head__en,
	.sec-head__jp,
	.concerns__en,
	.concerns__title,
	.info__card,
	.info__photo,
	.philosophy__catch,
	.philosophy__text,
	.philosophy__director,
	.case__lead,
	.case__content,
	.case__images,
	.price-banner__link,
	/* 共通パーツ */
	.cta__title,
	.cta__buttons,
	.clinic__map,
	.clinic__detail,
	.more-link,
	.equipment__btn,
	.lower-more,
	/* 下層ページ共通（35個の page-*.php を触らずに全ページ効かせる） */
	.page-hero__title,
	.lower__lead,
	.toc,
	.lower-sec__title,
	.lower-sec__body,
	.lower-sub,
	/* .lower-sub の中の visual は親と二重にフェードするので直下だけ対象にする */
	.lower-sec > .lower-sec__visual,
	/* 兄弟でずらして出る要素（遅延はJSが付ける） */
	.concern-card,
	.concept-card,
	.reason-item,
	.service-card,
	.pickup-card,
	.doctor-card,
	.equipment-card,
	.case-card,
	.news-row,
	.blog-row,
	.news-list__item,
	.info__list > li
) {
	opacity: 0;
	transform: translateY(var(--reveal-distance));
	transition:
		opacity var(--reveal-duration) var(--reveal-easing),
		transform var(--reveal-duration) var(--reveal-easing);
}

/* ---------- 出現後 ----------
   will-change は意図的に使っていない。対象が同時に100要素を超えるため、
   合成レイヤーを増やす方がコストになる。 */
html.js-reveal .is-visible {
	opacity: 1;
	transform: none;
}

/* ---------- 見出しの二拍（EN → JP） ---------- */
html.js-reveal .sec-head__jp {
	transition-delay: var(--reveal-beat);
}

/* ヒーローはファーストビューなので監視が即発火し、そのまま「ロード時演出」になる。
   キャッチコピーの後にバッジが続く。 */
html.js-reveal .hero__badges {
	transition-delay: var(--reveal-beat);
}