/* ==========================================================================
   Utilities
   ========================================================================== */

/*
 * サイト全体に漂うアンビエントブロブ（inc/template-tags.php の
 * ktd_render_ambient_blobs() が出力）。position:fixedでビューポートに
 * 固定し、スクロールしてもどのページ・どのセクションでも背後に見える
 * ようにする。transform/opacityのみのアニメーションでGPU描画。
 */
.ambient-blobs {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.ambient-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.28;
	animation-name: ktd-ambient-float;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	will-change: transform;
}

.ambient-blob--primary {
	background: radial-gradient(circle at 30% 30%, var(--color-primary), transparent 70%);
}

.ambient-blob--accent {
	background: radial-gradient(circle at 60% 40%, var(--color-accent), transparent 70%);
}

@keyframes ktd-ambient-float {
	0%, 100% { transform: translate(0, 0) scale(1); }
	25% { transform: translate(4%, -6%) scale(1.06); }
	50% { transform: translate(-5%, 5%) scale(0.94); }
	75% { transform: translate(3%, 4%) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
	.ambient-blob {
		animation: none;
	}
}

/*
 * スクロールインアニメーション（data-animate属性 + IntersectionObserver）。
 * JS未実行時は常に表示状態（opacity:1）を保つプログレッシブエンハンスメント
 * 設計にするため、html.jsクラスが付いた場合のみ初期状態を隠す。
 * html.jsクラスはheader.php内の同期インラインスクリプトで最速付与する。
 */
.js [data-animate] {
	opacity: 0;
	transform: translateY(28px) scale(0.96);
	filter: blur(6px);
	transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out), filter 600ms var(--ease-out);
}

.js [data-animate].is-visible {
	opacity: 1;
	transform: none;
	filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
	.js [data-animate] {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}
}