/* ============================================================
   白背景用 波紋エフェクト(背景レイヤー版)
   - 4秒ごとにカーソル位置から3つの波紋が連続で広がる(JS側で発火)
   - 0px → 600px、3秒かけて拡大しながらフェードアウト
   - backdrop-filter は使わない(コンテンツに影響しないため)
   - 波紋は section の背景(z:0)に潜らせ、コンテンツ(z:2)の下に描画
   ============================================================ */

.ripple-area {
	position: relative;
	/* overflow:hidden で波紋を完全に閉じ込め、
	   波紋(absolute)が html 幅を押し広げて横スクロールが出るのを防ぐ */
	overflow: hidden;
}

/* 通常コンテンツはコンテンツ層(z:2)に
   center-rule(縦線) と ripple-backdrop(波紋) は背面要素なので除外 */
.ripple-area > *:not(.center-rule):not(.ripple-backdrop) {
	position: relative;
	z-index: 2;
}

/* リンク・ボタン・フォーム要素は最前面でクリック有効に */
.ripple-area a,
.ripple-area button,
.ripple-area input,
.ripple-area select,
.ripple-area textarea {
	position: relative;
	z-index: 3;
}

/* 波紋本体: 背景レイヤー(z:0)。コンテンツの後ろにだけ広がる */
.ripple-backdrop {
	position: absolute;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.018);
	border: 1px solid rgba(0, 0, 0, 0.04);
	box-shadow:
		0 4px 16px rgba(0, 0, 0, 0.03),
		inset 0 0 20px rgba(0, 0, 0, 0.018);
	pointer-events: none;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	animation: rippleBackdrop 3s ease-out forwards;
	z-index: 0;
}

@keyframes rippleBackdrop {
	0%   { width: 0;     height: 0;     opacity: 1; }
	100% { width: 600px; height: 600px; opacity: 0; }
}

/* アクセシビリティ: 動きを抑える設定の場合は波紋を無効化 */
@media (prefers-reduced-motion: reduce) {
	.ripple-backdrop {
		animation: none;
		display: none;
	}
}