/**
 * Pricing section polish. The RECOMMENDED label becomes a tab fused to the
 * featured card's top edge (same ink fill + shared border, protruding above
 * the card) with an entrance rise, a champagne sheen sweep, a breathing
 * glow, and a twinkling spark. Tier cards get a hover lift that respects
 * the theme's staggered reveal. Colors sampled from the theme: ink
 * rgb(27,28,30), champagne rgb(212,180,101), ivory/16 border.
 */

/* room for the protruding tab when the cards stack below lg, plus a deeper
   ambient shadow so the ink card sits above the ivory room */
#pricing .is-featured {
	position: relative;
	margin-top: 34px;
	box-shadow: 0 24px 60px rgba(22, 18, 10, 0.28);
}
@media (min-width: 1024px) {
	#pricing .is-featured { margin-top: 0; }
}

/* RECOMMENDED -> fused top tab */
#pricing .is-featured > div:first-child > .uppercase {
	position: absolute;
	top: 1px; /* overlaps the card's top border so the two read as one shape */
	left: 50%;
	transform: translate(-50%, -100%);
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 20px 9px;
	background: rgb(27, 28, 30);
	border: 1px solid rgba(244, 241, 232, 0.16);
	border-bottom: 0;
	border-radius: 14px 14px 0 0;
	font-family: "Fraunces", Georgia, serif;
	font-style: italic;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.12em;
	line-height: 1;
	color: var(--gold, #f4d24a);
	overflow: hidden;
	white-space: nowrap;
}
#pricing .is-featured > div:first-child > .uppercase::before {
	content: "\2726"; /* four-pointed spark */
	font-size: 10px;
}

@media (prefers-reduced-motion: no-preference) {
	/* entrance: the tab rises out of the card right after the card reveals */
	html.js-motion #pricing .is-featured > div:first-child > .uppercase {
		opacity: 0;
		transform: translate(-50%, -100%) translateY(10px);
		transition:
			opacity 0.45s cubic-bezier(0.23, 1, 0.32, 1) 0.5s,
			transform 0.45s cubic-bezier(0.23, 1, 0.32, 1) 0.5s;
	}
	html.js-motion #pricing .is-featured.is-in > div:first-child > .uppercase {
		opacity: 1;
		transform: translate(-50%, -100%) translateY(0);
	}
	/* continuous: breathing glow, sheen sweep, twinkling spark */
	#pricing .is-featured > div:first-child > .uppercase {
		animation: lg-badge-glow 3.4s ease-in-out infinite;
	}
	#pricing .is-featured > div:first-child > .uppercase::before {
		animation: lg-badge-twinkle 3.4s ease-in-out infinite;
	}
	#pricing .is-featured > div:first-child > .uppercase::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(115deg, transparent 25%, rgba(244, 210, 74, 0.3) 50%, transparent 70%);
		transform: translateX(-130%);
		animation: lg-badge-sheen 3.4s cubic-bezier(0.23, 1, 0.32, 1) infinite;
	}
}

/* hover lift; transition-delay 0 only on hover-in so the reveal keeps its
   per-card stagger (delay is read from the destination state) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	html.js-motion #pricing .fx-tier.is-in:hover {
		transform: translateY(-5px);
		transition-delay: 0s;
	}
}

@keyframes lg-badge-glow {
	0%, 100% { box-shadow: 0 -4px 16px rgba(244, 210, 74, 0.08); }
	50%      { box-shadow: 0 -6px 26px rgba(244, 210, 74, 0.22); }
}
@keyframes lg-badge-sheen {
	0%        { transform: translateX(-130%); }
	55%, 100% { transform: translateX(130%); }
}
@keyframes lg-badge-twinkle {
	0%, 100% { opacity: 0.55; }
	50%      { opacity: 1; }
}