/* =============================================================
   SHISEILABO Core — 子テーマ共通スタイル
   親テーマ Inspiro のスタイルの後に読み込まれます。
   機能別スタイルはセクションコメントで区切って追記します。
   ============================================================= */

:root {
	/* ブランドカラー（必要に応じて調整） */
	--slabo-accent: #0bb4aa;
	--slabo-ink: #1a1a1a;
	--slabo-muted: #6b7280;
	--slabo-card-bg: #ffffff;
	--slabo-card-radius: 14px;
	--slabo-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
	--slabo-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* -------------------------------------------------------------
   スクロール連動アニメーション（HOME 他、JS で付与）
   data-slabo-animate 属性を持つ要素を初期非表示にし、
   .is-visible が付くとフェード/スライドイン。
   ------------------------------------------------------------- */
[data-slabo-animate] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s var(--slabo-ease), transform 0.7s var(--slabo-ease);
	will-change: opacity, transform;
}

[data-slabo-animate].is-visible {
	opacity: 1;
	transform: none;
}

/* アクセシビリティ: モーション削減設定を尊重 */
@media (prefers-reduced-motion: reduce) {
	[data-slabo-animate] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}