/* ============================================================
   cursor.css — マウスストーカー（off&relax 風）
   タッチデバイスでは非表示（responsive.css 側で制御）
   ============================================================ */

@media (hover: hover) and (pointer: fine) {
	html,
	body {
		/* 全体カーソルをドット風に。フォーム要素ではテキストカーソル維持 */
		cursor: none;
	}

	a,
	button,
	[role="button"],
	[data-cursor],
	input,
	textarea,
	select,
	label {
		cursor: none;
	}

	/* form 要素はテキストカーソル維持（一部例外） */
	input[type="text"],
	input[type="tel"],
	input[type="email"],
	input[type="url"],
	input[type="search"],
	input[type="password"],
	textarea {
		cursor: text;
	}
}

/* 中心ドット（即追従） */
.cursor-dot {
	position: fixed;
	top: 0;
	left: 0;
	z-index: var(--z-cursor);
	width: 4px;
	height: 4px;
	margin: -2px 0 0 -2px;
	border-radius: 50%;
	background: var(--color-brand-dark);
	pointer-events: none;
	opacity: 0;
	transform: translate(0, 0);
	transition: opacity var(--duration-fast) ease-out;
}

/* 追従円（遅延追従） */
.cursor-circle {
	position: fixed;
	top: 0;
	left: 0;
	z-index: calc(var(--z-cursor) - 1);
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border: 1px solid var(--color-brand-dark);
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	transform: translate(0, 0);
	transition: transform 0.15s ease-out,
	            width 0.2s ease-out,
	            height 0.2s ease-out,
	            margin 0.2s ease-out,
	            background-color 0.2s ease-out,
	            border-color 0.2s ease-out,
	            opacity var(--duration-fast) ease-out;
}

.cursor-dot.is-visible,
.cursor-circle.is-visible {
	opacity: 1;
}

/* ホバー時: 円が拡大 + 半透明背景 */
.cursor-circle.is-hover {
	transform: scale(1.5);
	background: rgba(0, 60, 44, 0.12);
	border-color: var(--color-brand-dark);
}

.cursor-dot.is-hover {
	opacity: 0;
}