/*
 * AnnGhar UI — Hero + Progress Bar
 * ------------------------------------------------------------------
 * .ag-hero is used identically on the My Account dashboard (personal
 * greeting + membership/seeds) and the public rewards landing page
 * (marketing headline) — same markup shape, different content.
 *
 * .ag-progress is a fully standalone, reusable component (not
 * hero-specific) — also used to show tier progress inside widget
 * cards.
 */

.ag-hero {
	position: relative;
	overflow: hidden;
	border-radius: var(--ag-radius);
	background: linear-gradient(135deg, var(--ag-primary) 0%, var(--ag-primary-dark) 100%);
	color: var(--ag-white);
	padding: 40px 40px 36px;
	box-shadow: var(--ag-shadow);
}

.ag-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 85% 20%, rgba(200, 155, 60, .28), transparent 45%),
		radial-gradient(circle at 100% 100%, rgba(255, 255, 255, .08), transparent 50%);
	pointer-events: none;
}

.ag-hero__leaf {
	position: absolute;
	right: -30px;
	bottom: -30px;
	width: 220px;
	height: 220px;
	opacity: .14;
	transform: rotate(-12deg);
}

.ag-hero__leaf svg {
	width: 100%;
	height: 100%;
}

.ag-hero__content {
	position: relative;
	z-index: 1;
	max-width: 640px;
}

.ag-hero--centered .ag-hero__content {
	margin: 0 auto;
	text-align: center;
}

.ag-hero__eyebrow {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .06em;
	opacity: .85;
	margin-bottom: 4px;
}

.ag-hero__title {
	font-size: clamp(22px, 3vw, 30px);
	color: var(--ag-white);
	margin: 0 0 4px;
}

.ag-hero--landing .ag-hero__title {
	font-size: clamp(1.8em, 4vw, 2.6em);
}

.ag-hero__highlight {
	color: var(--ag-gold);
}

.ag-hero__subtitle {
	opacity: .9;
	margin-bottom: 24px;
	font-size: 15px;
}

.ag-hero--landing .ag-hero__subtitle {
	font-size: 1.1em;
}

.ag-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	margin-bottom: 20px;
}

.ag-hero__meta-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ag-hero__meta-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .06em;
	opacity: .75;
}

.ag-hero__meta-value {
	font-size: 22px;
	font-weight: 700;
}

.ag-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ag-hero--centered .ag-hero__actions {
	justify-content: center;
}

/* Progress bar — standalone, reusable anywhere. */

.ag-progress {
	max-width: 420px;
}

.ag-hero .ag-progress {
	margin-bottom: 22px;
}

.ag-progress__label {
	font-size: 13px;
	margin-bottom: 8px;
}

.ag-hero .ag-progress__label {
	opacity: .9;
	color: inherit;
}

.ag-progress__track {
	background: rgba(255, 255, 255, .22);
	border-radius: 999px;
	height: 10px;
	overflow: hidden;
}

/* Outside the dark hero, on a light card background, the track needs
   a light-mode treatment instead of the translucent-white one above. */
.ag-card .ag-progress__track {
	background: var(--ag-cream);
}

.ag-progress__fill {
	height: 100%;
	border-radius: 999px;
	background: var(--ag-gold);
	width: 0;
	transition: width 1s cubic-bezier(.22, 1, .36, 1);
}

.ag-card .ag-progress__fill {
	background: linear-gradient(90deg, var(--ag-gold), var(--ag-primary));
}