/* Animated glowing border on the Lifetime card (CSS only, no video): a light beam runs around the border, with a soft red glow outside that follows it. */
@property --mg {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

.m-tier.feat::before,
.m-tier.feat::after {
	content: "";
	position: absolute;
	pointer-events: none;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: mgSpin 4.5s linear infinite;
}

.m-tier.feat::before {
	z-index: 2;
	inset: -1px;
	padding: 1.5px;
	border-radius: calc(var(--radius) + 1px);
	background: conic-gradient(from var(--mg), rgba(255, 255, 255, .08) 0deg, rgba(255, 255, 255, .08) 230deg, rgba(232, 0, 13, .35) 285deg, #ff2a36 330deg, #fff 352deg, rgba(255, 255, 255, .08) 360deg);
}

.m-tier.feat::after {
	z-index: 0;
	inset: -28px;
	padding: 28px;
	border-radius: calc(var(--radius) + 28px);
	background: conic-gradient(from var(--mg), transparent 0deg, transparent 240deg, rgba(232, 0, 13, .55) 315deg, rgba(255, 60, 70, .85) 345deg, transparent 360deg);
	filter: blur(16px);
	opacity: .8;
	animation: mgSpin 4.5s linear infinite, mgPulse 3s ease-in-out infinite;
}

@keyframes mgSpin {
	to {
		--mg: 360deg;
	}
}

@keyframes mgPulse {
	50% {
		opacity: .45;
	}
}

@media(prefers-reduced-motion: reduce) {
	.m-tier.feat::before,
	.m-tier.feat::after {
		animation: none;
	}
}
