/**
 * サイト全体共通のカスタムカーソル（2026-09-16、ユーザー指示によりcursor-feather.webpへ刷新）。
 * ネイティブの矢印カーソルの代わりに羽ペン（cursor-feather.webp）を表示し、その後ろに
 * キラキラ光るスパーク＋淡いグロウを添える。位置追従・演出はcustom-cursor.js（JS必須）が担当し、
 * このCSSは見た目の定義のみを持つ。
 * JSが動かない環境（読み込み失敗等）ではhtmlに.has-custom-cursorが付与されないため、
 * ネイティブの矢印カーソルのままになる（WebGL/JS Fallback原則）。
 * ポインター精度のあるマウス操作時のみ有効にし、タッチ端末には影響させない。
 */
@media (hover: hover) and (pointer: fine) {
	html.has-custom-cursor,
	html.has-custom-cursor a,
	html.has-custom-cursor button,
	html.has-custom-cursor [role="button"],
	html.has-custom-cursor .btn,
	html.has-custom-cursor label {
		cursor: none;
	}

	/* テキスト入力欄はブラウザ標準のテキストカーソルを維持する（従来仕様を踏襲）。 */
	html.has-custom-cursor.is-text-hover,
	html.has-custom-cursor.is-text-hover input,
	html.has-custom-cursor.is-text-hover textarea {
		cursor: text;
	}
}

.custom-cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	z-index: 10000;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--duration-fast) var(--ease-standard);
	will-change: transform;
}

.custom-cursor.is-visible {
	opacity: 1;
}

.custom-cursor.is-text-hover {
	opacity: 0;
}

/* 羽の後ろに添える淡いグロウ。羽そのものより一段大きく、ぼかして「光っている」印象を作る。 */
.custom-cursor__glow {
	position: absolute;
	top: 0;
	left: 0;
	width: 46px;
	height: 46px;
	transform: translate(-52%, -48%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(20, 200, 232, 0.55), rgba(20, 200, 232, 0) 70%);
	filter: blur(2px);
	animation: customCursorGlowPulse 2.2s ease-in-out infinite;
}

/* キラキラ（8方向スパーク）。羽の周りに3つ、位相をずらして明滅させる。 */
.custom-cursor__spark {
	position: absolute;
	top: 0;
	left: 0;
	width: 9px;
	height: 9px;
	background: var(--color-accent-bright);
	clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
	filter: drop-shadow(0 0 4px var(--color-accent-bright));
	opacity: 0;
	animation: customCursorTwinkle 1.8s ease-in-out infinite;
}

.custom-cursor__spark--a {
	--spark-x: -14px;
	--spark-y: -14px;
	--spark-scale: 0.85;
	animation-delay: 0s;
}

.custom-cursor__spark--b {
	--spark-x: 9px;
	--spark-y: -18px;
	--spark-scale: 0.6;
	animation-delay: 0.55s;
}

.custom-cursor__spark--c {
	--spark-x: 15px;
	--spark-y: 8px;
	--spark-scale: 0.7;
	animation-delay: 1.1s;
}

.custom-cursor__feather {
	position: absolute;
	top: 0;
	left: 0;
	width: 34px;
	/* バグ修正（2026-09-17）：reset.cssの`img{max-width:100%}`が、.custom-cursor（position:fixed;
	   width:0;height:0のただの位置アンカー）を包含ブロックとして100%=0pxに解決してしまい、
	   上のwidth:34pxを実質0pxへ潰していた（羽画像が完全に見えなくなっていた原因）。
	   max-width:noneで明示的に無効化する。 */
	max-width: none;
	height: auto;
	/* 画像内のペン先（きらめく穂先）がクリック位置に来るよう、画像自身の左上寄りへオフセットする。 */
	transform: translate(-8%, -8%);
	filter: drop-shadow(0 2px 6px rgba(15, 35, 65, 0.35));
	transition: transform var(--duration-fast) var(--ease-standard);
}

.custom-cursor.is-interactive .custom-cursor__feather {
	transform: translate(-8%, -8%) scale(1.14);
}

.custom-cursor.is-interactive .custom-cursor__glow {
	background: radial-gradient(circle, rgba(20, 200, 232, 0.75), rgba(20, 200, 232, 0) 70%);
}

@keyframes customCursorGlowPulse {
	0%, 100% { opacity: 0.55; transform: translate(-52%, -48%) scale(0.9); }
	50% { opacity: 0.85; transform: translate(-52%, -48%) scale(1.12); }
}

@keyframes customCursorTwinkle {
	0%, 100% { opacity: 0; transform: translate(var(--spark-x, 0), var(--spark-y, 0)) scale(calc(var(--spark-scale, 1) * 0.4)) rotate(0deg); }
	50% { opacity: 1; transform: translate(var(--spark-x, 0), var(--spark-y, 0)) scale(var(--spark-scale, 1)) rotate(25deg); }
}

@media (prefers-reduced-motion: reduce) {
	.custom-cursor__glow,
	.custom-cursor__spark {
		animation: none;
	}

	.custom-cursor__spark {
		opacity: 0.7;
	}
}

@media (hover: none), (pointer: coarse) {
	.custom-cursor {
		display: none;
	}
}