/**
 * Explore Hero — EH-1 emotional atmosphere + CX-07.4a hygiene.
 *
 * @package PasionGift_App
 */

.pg-explore-hero {
	--pg-explore-hero-pad-y: var(--pg-space-2xl);
	--pg-explore-hero-pad-x: var(--pg-shell-padding-x);
	--pg-explore-hero-cta-min-height: 2.75rem; /* 44px @ 16px root */

	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	min-height: clamp(13.5rem, 42vw, 17.5rem);
	margin-inline: calc(-1 * var(--pg-shell-padding-x));
	padding: var(--pg-explore-hero-pad-y) var(--pg-explore-hero-pad-x);
	border-radius: 0;
	border: none;
	background-color: var(--pg-color-brand-nude, var(--pg-color-hero-bg));
	box-sizing: border-box;
}

.pg-explore-hero__atmosphere {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.pg-explore-hero__glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(2.5rem);
	opacity: 0.72;
	transform: translate3d(0, 0, 0);
	will-change: transform, opacity;
}

.pg-explore-hero__glow--wine {
	width: min(72vw, 18rem);
	height: min(72vw, 18rem);
	top: -28%;
	right: -18%;
	background: radial-gradient(
		circle at 40% 40%,
		rgba(var(--pg-color-brand-wine-rgb, 139, 30, 63), 0.42) 0%,
		rgba(var(--pg-color-brand-wine-rgb, 139, 30, 63), 0) 70%
	);
	animation: pg-explore-hero-drift-a 14s var(--pg-transition-ease) infinite alternate;
}

.pg-explore-hero__glow--rose {
	width: min(58vw, 14rem);
	height: min(58vw, 14rem);
	bottom: -22%;
	left: -16%;
	background: radial-gradient(
		circle at 50% 50%,
		rgba(var(--pg-color-brand-rose-rgb, 217, 140, 163), 0.55) 0%,
		rgba(var(--pg-color-brand-rose-rgb, 217, 140, 163), 0) 72%
	);
	animation: pg-explore-hero-drift-b 18s var(--pg-transition-ease) infinite alternate;
}

.pg-explore-hero__glow--nude {
	width: min(90vw, 22rem);
	height: min(48vw, 12rem);
	top: 32%;
	left: 18%;
	background: radial-gradient(
		ellipse at center,
		rgba(255, 255, 255, 0.55) 0%,
		rgba(255, 255, 255, 0) 68%
	);
	opacity: 0.85;
	animation: pg-explore-hero-soft 12s ease-in-out infinite alternate;
}

.pg-explore-hero__veil {
	position: absolute;
	inset: 0;
	/* Soft lift under content for legibility over rose/wine glows — not a hard overlay. */
	background: linear-gradient(
		165deg,
		rgba(255, 255, 255, 0.28) 0%,
		rgba(255, 255, 255, 0.06) 38%,
		transparent 55%,
		rgba(var(--pg-color-brand-wine-rgb, 139, 30, 63), 0.07) 100%
	);
}

.pg-explore-hero__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pg-space-sm);
	width: 100%;
	max-width: 20rem;
	animation: pg-explore-hero-rise 0.7s var(--pg-transition-ease) both;
}

.pg-explore-hero__title {
	margin: 0;
	font-family: var(--pg-font-family);
	font-size: clamp(1.375rem, 5.2vw, 1.75rem);
	font-weight: var(--pg-font-weight-semibold);
	line-height: var(--pg-line-height-tight);
	letter-spacing: var(--pg-letter-spacing-tight);
	color: var(--pg-color-brand-black, var(--pg-color-text));
	text-wrap: balance;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.pg-explore-hero__subtitle {
	margin: 0;
	max-width: 18.5rem;
	font-family: var(--pg-font-family);
	font-size: var(--pg-type-hero-subtitle);
	font-weight: var(--pg-font-weight-medium);
	line-height: var(--pg-line-height-snug);
	/* One step clearer than muted alone — still soft, not high-contrast aggressive. */
	color: color-mix(
		in srgb,
		var(--pg-color-text-muted, #6b5f5c) 68%,
		var(--pg-color-brand-black, #1c1c1c)
	);
	text-wrap: pretty;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
}

.pg-explore-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pg-space-sm);
	margin-top: var(--pg-space-xs);
}

.pg-explore-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--pg-explore-hero-cta-min-height);
	min-width: 2.75rem;
	padding: 0.625rem 1.25rem;
	border-radius: var(--pg-radius-full);
	background-color: var(--pg-color-brand-wine, var(--pg-color-accent));
	color: var(--pg-color-surface, #fff);
	font-family: var(--pg-font-family);
	font-size: var(--pg-font-size-sm);
	font-weight: var(--pg-font-weight-semibold);
	line-height: 1;
	letter-spacing: -0.01em;
	text-decoration: none;
	box-shadow: 0 8px 24px rgba(var(--pg-color-brand-wine-rgb, 139, 30, 63), 0.22);
	transition:
		transform var(--pg-transition-fast) var(--pg-transition-ease),
		background-color var(--pg-transition-fast) var(--pg-transition-ease),
		box-shadow var(--pg-transition-fast) var(--pg-transition-ease);
}

.pg-explore-hero__cta:hover {
	background-color: color-mix(in srgb, var(--pg-color-brand-wine, #8b1e3f) 88%, #000);
	box-shadow: 0 10px 28px rgba(var(--pg-color-brand-wine-rgb, 139, 30, 63), 0.28);
}

.pg-explore-hero__cta:focus-visible {
	outline: 2px solid var(--pg-color-brand-rose, #d98ca3);
	outline-offset: 3px;
}

.pg-explore-hero__cta:active {
	transform: scale(0.98);
}

@keyframes pg-explore-hero-drift-a {
	from {
		transform: translate3d(0, 0, 0) scale(1);
	}
	to {
		transform: translate3d(-6%, 8%, 0) scale(1.06);
	}
}

@keyframes pg-explore-hero-drift-b {
	from {
		transform: translate3d(0, 0, 0) scale(1);
	}
	to {
		transform: translate3d(10%, -6%, 0) scale(1.08);
	}
}

@keyframes pg-explore-hero-soft {
	from {
		opacity: 0.55;
	}
	to {
		opacity: 0.9;
	}
}

@keyframes pg-explore-hero-rise {
	from {
		opacity: 0;
		transform: translateY(0.75rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 359px) {
	.pg-explore-hero {
		min-height: 13rem;
		padding-block: var(--pg-space-xl);
	}

	.pg-explore-hero__title {
		font-size: 1.3125rem;
	}

	.pg-explore-hero__subtitle {
		font-size: 0.8125rem;
	}

	.pg-explore-hero__cta {
		/* Keep 44px touch; only tighten horizontal padding / type. */
		min-height: var(--pg-explore-hero-cta-min-height);
		padding-inline: 1.125rem;
		font-size: 0.8125rem;
	}
}

@media (min-width: 360px) and (max-width: 389px) {
	.pg-explore-hero {
		min-height: 14.25rem;
	}
}

@media (min-width: 390px) and (max-width: 767px) {
	.pg-explore-hero {
		min-height: 15.5rem;
	}

	.pg-explore-hero__content {
		max-width: 21rem;
	}
}

@media (min-width: 768px) {
	.pg-explore-hero {
		min-height: 18rem;
		padding: var(--pg-space-2xl) var(--pg-space-xl);
		border-radius: var(--pg-radius-lg);
		margin-inline: 0;
	}

	.pg-explore-hero__content {
		max-width: 22rem;
		gap: var(--pg-space-md);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pg-explore-hero__glow,
	.pg-explore-hero__content {
		animation: none;
	}

	.pg-explore-hero__cta:active {
		transform: none;
	}
}