/* ============================================================
   スクロールreveal（investalk.jp の "appear" 相当）

   ★方針（ユーザー決定 2026-06-15）: 全要素への自動付与はしない。
     「指定した箇所だけ」に適用する opt-in 方式。
     現在の対象 = トップページFVの右側（イラスト＋装飾）のみ。
     他はご依頼に応じて、対象セレクタ（CSS規則）と scroll-reveal.js の
     収集セレクタを 1 件ずつ追加していく。

   ★白画面/フラッシュ防止: 初期非表示は html.js-reveal（JSが付与）でゲート。
     JS未動作・JSエラー時は js-reveal が付かず何も隠れない。
   ★transition は「基底ルール」に置く（:not(.is-revealed) に入れると reveal時に
     transition が外れて opacity/transform が一瞬でジャンプ＝フェードしない）。
   ============================================================ */

:root {
	/* investalk.jp(STUDIO "appear") 実測準拠の標準reveal:
	   左下(transform-origin: left bottom)を軸に
	   translate(32,32) rotate(20deg) scale(0.9) から transform:none・opacity1 へ、
	   1s cubic-bezier(.4,.4,0,1) でフェードイン。 */
	--reveal-dur: 1s;
	--reveal-ease: cubic-bezier(0.4, 0.4, 0, 1);
	--reveal-tf: translate(32px, 32px) rotate(20deg) scale(0.9);
}

/* === 対象1: トップFVの右側（メインイラスト＋フローティングアイコン＋人物） ===
   絶対配置の装飾も対象（FV画像群は基底transform無しを実測。translateY/rotate適用OK）。
   トップページ限定（.page-id-8）。 */
html.js-reveal .page-id-8 .post_content:not(.p-blogParts) > .swell-block-fullWide:nth-of-type(1) figure.wp-block-image {
	opacity: 0;
	transform: var(--reveal-tf);
	transform-origin: left bottom;
	transition: opacity var(--reveal-dur) var(--reveal-ease), transform var(--reveal-dur) var(--reveal-ease);
	transition-delay: var(--reveal-delay, 0s);
}
html.js-reveal .page-id-8 .post_content:not(.p-blogParts) > .swell-block-fullWide:nth-of-type(1) figure.wp-block-image.is-revealed {
	opacity: 1;
	transform: none;
}

/* === 対象2: トップFVの左カラム（見出しグループ＋2ボタン）= 右にずれた位置から左へスライドインしてフェード ===
   transform: translateX(32px)（右にずれた位置）→ none。回転は無し。 */
html.js-reveal .page-id-8 .post_content:not(.p-blogParts) > .swell-block-fullWide:nth-of-type(1) .wp-block-flavor-universal-block:has(> .wp-block-heading),
html.js-reveal .page-id-8 .post_content:not(.p-blogParts) > .swell-block-fullWide:nth-of-type(1) [data-block-link] {
	opacity: 0;
	transform: translateX(32px);
	transition: opacity var(--reveal-dur) var(--reveal-ease), transform var(--reveal-dur) var(--reveal-ease);
	/* フェード開始を遅らせる: ベース0.6s ＋ 要素ごとのstagger(--reveal-delay) */
	transition-delay: calc(0.6s + var(--reveal-delay, 0s));
}
html.js-reveal .page-id-8 .post_content:not(.p-blogParts) > .swell-block-fullWide:nth-of-type(1) .wp-block-flavor-universal-block:has(> .wp-block-heading).is-revealed,
html.js-reveal .page-id-8 .post_content:not(.p-blogParts) > .swell-block-fullWide:nth-of-type(1) [data-block-link].is-revealed {
	opacity: 1;
	transform: none;
}

/* === 対象3: 人気記事カード（1枚ずつ）＋カテゴリー別グループ（白カード単位）= グローバル(左下回転) ===
   - 人気記事: .investalk-cards--popular 内の各カードを個別に。
   - カテゴリー別: 各カテゴリの白カード .investalk-cards--category をグループ単位で（内部カードは個別にしない）。 */
html.js-reveal .post_content .investalk-cards--popular .investalk-cards__card,
html.js-reveal .post_content .investalk-cards--category {
	opacity: 0;
	transform: var(--reveal-tf);
	transform-origin: left bottom;
	transition: opacity var(--reveal-dur) var(--reveal-ease), transform var(--reveal-dur) var(--reveal-ease);
	transition-delay: var(--reveal-delay, 0s);
}
html.js-reveal .post_content .investalk-cards--popular .investalk-cards__card.is-revealed,
html.js-reveal .post_content .investalk-cards--category.is-revealed {
	opacity: 1;
	transform: none;
}

/* === 対象4: お問い合わせCTA（共通ブログパーツ .p-blogParts）= 下からフェードイン ===
   画像（街並みシルエット figure.wp-block-image）は除外。見出しグループ＋2ボタンのみ。
   グローバル(左下回転)は使わず、translateY(32px)→none の素直な下からスライドアップ。 */
html.js-reveal .p-blogParts .wp-block-flavor-universal-block:has(> .wp-block-heading),
html.js-reveal .p-blogParts [data-block-link] {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity var(--reveal-dur) var(--reveal-ease), transform var(--reveal-dur) var(--reveal-ease);
	transition-delay: var(--reveal-delay, 0s);
}
html.js-reveal .p-blogParts .wp-block-flavor-universal-block:has(> .wp-block-heading).is-revealed,
html.js-reveal .p-blogParts [data-block-link].is-revealed {
	opacity: 1;
	transform: none;
}

/* === TB/SP(≤959px): FV左テキスト(見出し＋ボタン)を先にフェードイン ===
   TB/SPは縦積み（テキストが上・イラストが下）になるため、PCの0.6sベース遅延を外して
   テキストを先に出す。イラスト(下)は後からスクロールで出るので自然に後追いになる。 */
@media (max-width: 959px) {
	html.js-reveal .page-id-8 .post_content:not(.p-blogParts) > .swell-block-fullWide:nth-of-type(1) .wp-block-flavor-universal-block:has(> .wp-block-heading),
	html.js-reveal .page-id-8 .post_content:not(.p-blogParts) > .swell-block-fullWide:nth-of-type(1) [data-block-link] {
		transition-delay: var(--reveal-delay, 0s);
	}
}

/* 本番方針（ユーザー決定）: reduced-motion でも全員にアニメを表示する（investalk.jp/STUDIO相当）。
   そのため prefers-reduced-motion による無効化規則は置かない。 */