/* THE NEON PULSE — one recipe for every glowing border on the site (settings cards, member tiles).
   Values chosen by Mike on the trial page, 14 Oct 2026. Change them HERE and everything follows.
     --tme-neon-speed   one half-breath (bright -> dim takes this long, then dim -> bright again)
     --tme-neon-low     how dim the glow gets at the bottom of the breath (0-1)
     --tme-neon-blur    how far the glow spreads
     --tme-neon-spread  how thick the glow is right at the border
   An element glows when it has the class "tme-neon" and sets --tme-neon-rgb (e.g. 168,85,247) and,
   if its border isn't 2px, --tme-neon-border. Whether a MEMBER's tile glows is decided in PHP by
   tme_member_glows() (today: everyone; later perhaps only premium members, or members online now).
   The glow is a layer whose OPACITY alone is animated: the cheapest animation there is for a phone.
   Its shadow is only ever painted outside the box, so it never covers content and needs no stacking
   tricks (which would trap pop-ups). People who have asked their device for less motion get a
   steady glow instead of the pulse. */
:root {
	--tme-neon-speed: 1s;
	--tme-neon-low: 0.15;
	--tme-neon-blur: 38px;
	--tme-neon-spread: 5px;
}
.tme-neon { position: relative; }
.tme-neon::after {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--tme-neon-border, 2px));
	border-radius: inherit;
	pointer-events: none;
	box-shadow:
		0 0 var(--tme-neon-blur) var(--tme-neon-spread) rgba(var(--tme-neon-rgb, 168, 85, 247), 0.75),
		0 0 calc(var(--tme-neon-blur) * 2.4) calc(var(--tme-neon-spread) * 2) rgba(var(--tme-neon-rgb, 168, 85, 247), 0.28);
	opacity: var(--tme-neon-low);
	animation: tme-neon-pulse var(--tme-neon-speed) ease-in-out infinite alternate;
	will-change: opacity;
}
@keyframes tme-neon-pulse {
	from { opacity: var(--tme-neon-low); }
	to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.tme-neon::after { animation: none; opacity: 0.7; }
}