/**
 * DXP Product Experience 3.0 — Volume II Immersive (DVI 1.0).
 * Layers on Flagship Night. Visual hierarchy + storytelling only.
 */

.dxp-product[data-dxp-dvi="1.0"],
.dxp-qr[data-dxp-dvi="1.0"] {
	--dvi-stage-gap: var(--dxp-space-section, var(--space-32, 2rem));
	--dvi-spotlight: color-mix(in srgb, var(--accent) 55%, var(--primary));
	counter-reset: dvi-stage;
}

/* Journey stage wrappers — progressive storytelling */
.dxp-product[data-dxp-dvi="1.0"] .dxp-pe-stage {
	position: relative;
	margin-block: var(--dxp-space-4, var(--space-12, 0.75rem));
}

.dxp-product[data-dxp-dvi="1.0"] .dxp-pe-stage + .dxp-pe-stage::before {
	content: "";
	display: block;
	width: min(12rem, 40%);
	height: 1px;
	margin: 0 auto var(--space-24);
	background: linear-gradient(
		90deg,
		transparent,
		color-mix(in srgb, var(--accent) 55%, transparent),
		color-mix(in srgb, var(--primary) 45%, transparent),
		transparent
	);
	opacity: 0.7;
}

.dxp-product[data-dxp-dvi="1.0"] .dxp-pe-stage[data-dxp-journey] > .dxp-section {
	counter-increment: dvi-stage;
}

.dxp-product[data-dxp-dvi="1.0"] .dxp-pe-stage[data-dxp-journey] > .dxp-section .dxp-section-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-12);
}

.dxp-product[data-dxp-dvi="1.0"] .dxp-pe-stage[data-dxp-journey="orient"] > .dxp-section .dxp-section-title::after,
.dxp-product[data-dxp-dvi="1.0"] .dxp-pe-stage[data-dxp-journey="educate"] > .dxp-section .dxp-section-title::after,
.dxp-product[data-dxp-dvi="1.0"] .dxp-pe-stage[data-dxp-journey="reassure"] > .dxp-section .dxp-section-title::after,
.dxp-product[data-dxp-dvi="1.0"] .dxp-pe-stage[data-dxp-journey="guide"] > .dxp-section .dxp-section-title::after,
.dxp-product[data-dxp-dvi="1.0"] .dxp-pe-stage[data-dxp-journey="expand"] > .dxp-section .dxp-section-title::after {
	content: attr(data-dxp-stage-label);
}

/* Immersive ambient depth under the main column */
.dxp-product[data-dxp-dvi="1.0"]::after {
	content: "";
	pointer-events: none;
	position: fixed;
	inset: auto 0 0;
	height: 28vh;
	z-index: 0;
	background: linear-gradient(
		180deg,
		transparent,
		color-mix(in srgb, var(--flagship-night-bg) 55%, transparent) 40%,
		var(--flagship-night-bg)
	);
}

.dxp-product[data-dxp-dvi="1.0"] .dxp-section,
.dxp-product[data-dxp-dvi="1.0"] .dxp-product-detail {
	position: relative;
	z-index: 1;
}

/* Capture — hero immersion */
.dxp-product[data-dxp-dvi="1.0"] .dxp-pe-stage[data-dxp-journey="capture"] .dxp-product-layout {
	outline: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent),
		var(--elevation-3),
		0 0 80px color-mix(in srgb, var(--primary) 18%, transparent);
}

.dxp-product[data-dxp-dvi="1.0"] .dxp-product-summary {
	font-size: var(--fs-body-lg);
	line-height: 1.55;
	max-width: 38rem;
}

.dxp-product[data-dxp-dvi="1.0"] .dxp-product-actions {
	padding-top: var(--space-8);
	border-top: 1px solid color-mix(in srgb, var(--text-inverse) 8%, transparent);
}

/* Orient — quick facts as discovery strip */
.dxp-product[data-dxp-dvi="1.0"] .dxp-pe-stage[data-dxp-journey="orient"] .dxp-container {
	position: relative;
	overflow: hidden;
}

.dxp-product[data-dxp-dvi="1.0"] .dxp-pe-stage[data-dxp-journey="orient"] .dxp-container::before {
	content: "Discover";
	position: absolute;
	top: var(--space-16);
	right: var(--space-24);
	font-size: var(--fs-legal);
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--accent) 75%, var(--text-muted));
	opacity: 0.85;
}

/* Educate — performance + story */
.dxp-product[data-dxp-dvi="1.0"] .dxp-pe-stage[data-dxp-journey="educate"] .dxp-product-overview .dxp-container,
.dxp-product[data-dxp-dvi="1.0"] .dxp-product-overview .dxp-container {
	max-width: min(48rem, 100%);
}

.dxp-product[data-dxp-dvi="1.0"] .dxp-product-description {
	font-size: var(--fs-body-lg);
	line-height: 1.7;
	color: var(--text-secondary);
}

.dxp-product[data-dxp-dvi="1.0"] .dxp-product-description p:first-child {
	font-size: clamp(1.15rem, 1.8vw, 1.35rem);
	color: var(--text-primary);
	font-weight: 600;
}

.dxp-product[data-dxp-dvi="1.0"] .dxp-meter-fill {
	background: linear-gradient(90deg, var(--primary), var(--dvi-spotlight), var(--accent));
}

/* Reassure — safety */
.dxp-product[data-dxp-dvi="1.0"] .dxp-product-safety .dxp-container {
	border-left: 3px solid color-mix(in srgb, var(--warning) 80%, var(--border));
}

.dxp-product[data-dxp-dvi="1.0"] .dxp-safety-list li {
	padding: var(--space-8) 0;
	border-bottom: 1px solid color-mix(in srgb, var(--text-inverse) 6%, transparent);
}

.dxp-product[data-dxp-dvi="1.0"] .dxp-safety-list li:last-child {
	border-bottom: 0;
}

/* Guide — forecast + store recommendation spotlight */
.dxp-product[data-dxp-dvi="1.0"] .dxp-pe-stage[data-dxp-journey="guide"] .dxp-product-forecast .dxp-container {
	background:
		radial-gradient(700px 220px at 10% 0%, color-mix(in srgb, var(--success) 22%, transparent), transparent 60%),
		linear-gradient(155deg, color-mix(in srgb, var(--text-inverse) 8%, transparent), transparent 42%),
		var(--surface-glass);
}

.dxp-product[data-dxp-dvi="1.0"] .dxp-product-intelligence .dxp-panel,
.dxp-product[data-dxp-dvi="1.0"] .dxp-product-recommendation .dxp-panel {
	position: relative;
	padding-left: calc(var(--space-32) + 0.35rem);
	border-left: 3px solid var(--accent);
	box-shadow:
		var(--elevation-2),
		0 0 48px color-mix(in srgb, var(--accent) 14%, transparent);
}

.dxp-product[data-dxp-dvi="1.0"] .dxp-intelligence-kicker {
	margin: 0 0 var(--space-8);
	font-size: var(--fs-legal);
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
}

.dxp-product[data-dxp-dvi="1.0"] .dxp-reco-body {
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	line-height: 1.65;
	max-width: 42rem;
}

/* Expand — rails / BYS / specs */
.dxp-product[data-dxp-dvi="1.0"] .dxp-product-bys .dxp-container {
	background:
		radial-gradient(600px 200px at 90% 0%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 55%),
		var(--surface-glass);
}

.dxp-product[data-dxp-dvi="1.0"] .dxp-product-card-media {
	position: relative;
}

.dxp-product[data-dxp-dvi="1.0"] .dxp-product-card-media::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 42%;
	background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--flagship-night-bg) 75%, transparent));
	pointer-events: none;
}

.dxp-product[data-dxp-dvi="1.0"] .dxp-product-bottom-actions .dxp-product-actions {
	justify-content: center;
	padding: var(--space-24);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	background: var(--surface-glass);
	box-shadow: var(--elevation-2);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* Soft enter — restrained motion */
@media (prefers-reduced-motion: no-preference) {
	.dxp-product[data-dxp-dvi="1.0"] .dxp-pe-stage > .dxp-section {
		animation: dvi-stage-in 520ms var(--transition) both;
	}

	.dxp-product[data-dxp-dvi="1.0"] .dxp-pe-stage:nth-child(1) > .dxp-section { animation-delay: 0ms; }
	.dxp-product[data-dxp-dvi="1.0"] .dxp-pe-stage:nth-child(2) > .dxp-section { animation-delay: 40ms; }
	.dxp-product[data-dxp-dvi="1.0"] .dxp-pe-stage:nth-child(3) > .dxp-section { animation-delay: 70ms; }
}

@keyframes dvi-stage-in {
	from {
		opacity: 0.01;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dxp-product[data-dxp-dvi="1.0"] .dxp-pe-stage > .dxp-section {
		animation: none;
	}
}

/* Journey eyebrow labels (CSS content via data attribute on stage) */
.dxp-product[data-dxp-dvi="1.0"] .dxp-pe-stage[data-dxp-journey]::after {
	content: none;
}

.dxp-product[data-dxp-dvi="1.0"] .dxp-pe-journey-label {
	display: inline-block;
	margin: 0 0 var(--space-12);
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
	background: color-mix(in srgb, var(--accent) 12%, var(--surface-elevated));
	color: var(--accent);
	font-size: var(--fs-legal);
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}