:root {
	--momento-glow-color: rgba(240, 239, 215, 0.5);
	--momento-glow-color-soft: rgba(240, 239, 215, 0.22);
}

.momento-glow-target {
	position: relative;
	z-index: 0;
	overflow: visible;
	-webkit-tap-highlight-color: transparent;
	accent-color: #f0efd7;
	appearance: none;
	-webkit-appearance: none;
}

/* Menu / close: no filled pseudo-layers (they read as pink on dark UI). */
.momento-glow-target--shadow-only::before,
.momento-glow-target--shadow-only::after {
	content: none !important;
	display: none !important;
}

.momento-glow-target--shadow-only:hover,
.momento-glow-target--shadow-only:focus-visible,
.momento-glow-target--shadow-only.is-glowing {
	box-shadow:
		0 0 24px 8px rgba(240, 239, 215, 0.24),
		0 0 52px 20px rgba(240, 239, 215, 0.12) !important;
}

.momento-glow-target:hover,
.momento-glow-target:focus-visible,
.momento-glow-target:active {
	background-color: transparent !important;
	background-image: none !important;
	color: var(--hero-fg, #f0efd7) !important;
}

.momento-glow-target::before,
.momento-glow-target::after {
	content: "";
	position: absolute;
	pointer-events: none;
	border-radius: inherit;
	z-index: -1;
}

.momento-glow-target::before {
	inset: -95%;
	background: radial-gradient(
		circle at center,
		var(--momento-glow-color) 0%,
		var(--momento-glow-color-soft) 38%,
		rgba(240, 239, 215, 0) 72%
	);
	opacity: 0;
	transform: scale(0.82);
	filter: blur(34px);
	transition:
		opacity 0.34s ease,
		transform 0.34s ease;
}

.momento-glow-target::after {
	inset: -150%;
	background: radial-gradient(
		circle at center,
		rgba(240, 239, 215, 0.28) 0%,
		rgba(240, 239, 215, 0.1) 42%,
		rgba(240, 239, 215, 0) 78%
	);
	opacity: 0;
	transform: scale(0.75);
	filter: blur(52px);
	transition:
		opacity 0.34s ease,
		transform 0.34s ease;
}

html:not(.touch-device) .momento-glow-target:hover,
html:not(.touch-device) .momento-glow-target:focus-visible,
.momento-glow-target.is-glowing {
	box-shadow:
		0 0 28px 10px rgba(240, 239, 215, 0.2),
		0 0 64px 26px rgba(240, 239, 215, 0.12);
}

html:not(.touch-device) .momento-glow-target:hover::before,
html:not(.touch-device) .momento-glow-target:focus-visible::before,
html:not(.touch-device) .momento-glow-target:hover::after,
html:not(.touch-device) .momento-glow-target:focus-visible::after,
.momento-glow-target.is-glowing::before,
.momento-glow-target.is-glowing::after {
	opacity: 1;
	transform: scale(1);
}

html:not(.touch-device) .momento-glow-target:hover::before,
html:not(.touch-device) .momento-glow-target:focus-visible::before,
.momento-glow-target.is-glowing::before {
	animation: momento-glow-pulse 1.15s ease-in-out infinite;
}

.momento-glow-ripple {
	position: absolute;
	left: var(--ripple-x, 50%);
	top: var(--ripple-y, 50%);
	width: 48px;
	height: 48px;
	transform: translate(-50%, -50%) scale(0.2);
	border-radius: 999px;
	pointer-events: none;
	background: radial-gradient(
		circle,
		rgba(240, 239, 215, 0.82) 0%,
		rgba(240, 239, 215, 0.38) 40%,
		rgba(240, 239, 215, 0) 78%
	);
	filter: blur(20px);
	animation: momento-ripple-wave 1s cubic-bezier(0.15, 0.88, 0.21, 1) forwards;
	z-index: -1;
}

@keyframes momento-glow-pulse {
	0%,
	100% {
		filter: blur(30px);
		transform: scale(0.94);
	}
	50% {
		filter: blur(44px);
		transform: scale(1.12);
	}
}

@keyframes momento-ripple-wave {
	0% {
		opacity: 0.98;
		transform: translate(-50%, -50%) scale(0.18);
	}
	100% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(10);
	}
}

@media (prefers-reduced-motion: reduce) {
	.momento-glow-target::before,
	.momento-glow-target::after {
		transition: none;
	}

	.momento-glow-ripple {
		animation-duration: 0.01ms;
	}

	.momento-glow-target.is-glowing::before {
		animation: none;
	}

	.momento-glow-target:hover,
	.momento-glow-target:focus-visible,
	.momento-glow-target.is-glowing {
		box-shadow: none;
	}
}