/**
 * css/components/pointer-glow.css
 * ============================================================
 * A LEGEND 2：Pointer Glow
 * ============================================================
 *
 * 役割：
 * - サイト全体で使うマウスポインタ追従の光レイヤーを装飾します。
 * - TOP Hero専用だった .aleg2-top-hero__glow とは分離し、
 *   NEWS / GALLERY / APPLICATION / 固定ページ / Contact でも同じ演出を使えるようにします。
 *
 * 設計方針：
 * - DOMは js/components/pointer-glow.js が body 直下へ1つだけ生成します。
 * - pointer-events:none により、リンク・ボタン・フォーム操作を阻害しません。
 * - 色は固定値ではなく Design Token を参照します。
 * - 座標は JS が :root の --aleg2-pointer-glow-x / y を更新します。
 * - 点灯・消灯の速度は motion.pointer_glow.fade_in_ms / fade_out_ms から出力されるCSS変数で制御します。
 * - タッチ端末や reduced-motion 環境ではCSS側でも抑制します。
 */

.aleg2-pointer-glow {
	position: fixed;
	inset: 0;
	z-index: var(--aleg2-z-pointer-glow, 3);
	pointer-events: none;
	user-select: none;
	opacity: 0;
	contain: strict;
	mix-blend-mode: var(--aleg2-pointer-glow-blend-mode, screen);
	transition-property: opacity;
	transition-duration: var(--aleg2-pointer-glow-fade-out-ms, 1200ms);
	transition-timing-function: var(--aleg2-ease-standard, ease);
}

.aleg2-pointer-glow::before {
	content: "";
	position: absolute;
	left: var(--aleg2-pointer-glow-x, 50vw);
	top: var(--aleg2-pointer-glow-y, 50vh);
	width: var(--aleg2-pointer-glow-size, 420px);
	height: var(--aleg2-pointer-glow-size, 420px);
	border-radius: 999px;
	transform: translate3d(-50%, -50%, 0);
	background:
		radial-gradient(
			circle,
			color-mix(in srgb, var(--aleg2-color-primary, #8ee6ff) calc(32% + (var(--aleg2-pointer-glow-strength, 1) * 11%)), transparent) 0%,
			color-mix(in srgb, var(--aleg2-color-accent, #d6b46a) calc(18% + (var(--aleg2-pointer-glow-strength, 1) * 7%)), transparent) 28%,
			color-mix(in srgb, var(--aleg2-color-secondary, #b68cff) calc(12% + (var(--aleg2-pointer-glow-strength, 1) * 5%)), transparent) 52%,
			transparent 74%
		);
	filter: blur(var(--aleg2-pointer-glow-blur, 18px)) saturate(calc(1.08 + (var(--aleg2-pointer-glow-strength, 1) * .12)));
	will-change: transform;
}

.has-aleg2-pointer-glow .aleg2-pointer-glow.is-active {
	opacity: var(--aleg2-pointer-glow-opacity, .62);
	transition-duration: var(--aleg2-pointer-glow-fade-in-ms, 520ms);
}

/*
 * color-mix 非対応環境用fallback。
 * 固定色ではなく既存Tokenのrgba fallbackを使い、プリセット変更の余地を残します。
 */
@supports not (color: color-mix(in srgb, white 50%, transparent)) {
	.aleg2-pointer-glow::before {
		background:
			radial-gradient(
				circle,
				var(--aleg2-glow-primary, rgba(142, 230, 255, .18)) 0%,
				var(--aleg2-glow-secondary, rgba(182, 140, 255, .14)) 42%,
				transparent 74%
			);
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.aleg2-pointer-glow {
		display: none;
	}
}