/**
 * Sparkle ACC — Spark Route Showcase hero v2.3
 * A forward-moving product showcase with a responsive scroll narrative.
 */

.sparkleacc-magic-hero,
.sparkleacc-magic-hero * {
	box-sizing: border-box;
}

.sparkleacc-magic-hero {
	--hero-ink: var(--sparkle-ink, #111820);
	--hero-paper: var(--sparkle-paper, #fffdf7);
	--hero-cream: var(--sparkle-cream, #fff7df);
	--hero-orange: var(--sparkle-orange, #ffad27);
	--hero-coral: var(--sparkle-coral, #f05b43);
	--hero-teal: var(--sparkle-teal, #49b9b1);
	--hero-green: #42cb80;
	--hero-header-offset: 0px;
	position: relative;
	isolation: isolate;
	width: 100vw;
	min-height: 134svh;
	margin-inline: calc(50% - 50vw);
	color: var(--hero-ink);
	background: var(--hero-cream);
	font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
}

.sparkleacc-magic-hero__stage {
	position: sticky;
	top: var(--hero-header-offset);
	height: calc(100svh - var(--hero-header-offset));
	min-height: 600px;
	overflow: clip;
	background:
		radial-gradient(circle at 74% 20%, rgb(240 91 67 / 15%) 0 9%, transparent 9.2%),
		radial-gradient(circle at 17% 78%, rgb(73 185 177 / 14%) 0 12%, transparent 12.2%),
		linear-gradient(115deg, #fff8df 0%, var(--hero-paper) 52%, #fff1c7 100%);
	border-block: 2px solid var(--hero-ink);
}

.sparkleacc-magic-hero__grid {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.27;
	background-image:
		linear-gradient(rgb(17 24 32 / 9%) 1px, transparent 1px),
		linear-gradient(90deg, rgb(17 24 32 / 9%) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
	pointer-events: none;
}

.sparkleacc-magic-hero__layout {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(500px, 1.08fr);
	align-items: center;
	gap: clamp(22px, 3.5vw, 64px);
	width: min(100% - clamp(32px, 8vw, 130px), 1460px);
	height: 100%;
	min-height: 0;
	margin-inline: auto;
	padding-block: clamp(34px, 5vh, 68px);
}

.sparkleacc-magic-hero__copy {
	grid-column: 1;
	min-width: 0;
	padding-inline-start: clamp(0px, 2vw, 30px);
}

.sparkleacc-magic-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 22px;
	padding: 7px 13px;
	background: var(--hero-orange);
	border: 2px solid var(--hero-ink);
	border-radius: 999px;
	box-shadow: 3px 3px 0 var(--hero-ink);
	font-size: clamp(11px, 0.95vw, 14px);
	font-weight: 900;
	line-height: 1.5;
}

.sparkleacc-magic-hero__eyebrow > span {
	color: var(--hero-coral);
	font-size: 15px;
}

.sparkleacc-magic-hero__title {
	position: relative;
	max-width: 700px;
	min-height: 2.12em;
	margin: 0;
	font-family: "Vazirmatn", Tahoma, sans-serif;
	font-size: clamp(53px, 5vw, 82px);
	font-weight: 900;
	line-height: 1.01;
	letter-spacing: -3.4px;
}

.sparkleacc-magic-hero__title-primary,
.sparkleacc-magic-hero__title-primary > span {
	display: inline-block;
}

.sparkleacc-magic-hero__title-primary {
	width: 100%;
}

.sparkleacc-magic-hero__highlight {
	--highlight-scale: 0;
	position: relative;
	z-index: 0;
	margin-inline: 0.06em;
	white-space: nowrap;
}

.sparkleacc-magic-hero__highlight::before {
	content: "";
	position: absolute;
	inset-inline: -0.08em;
	inset-block-end: 0.05em;
	z-index: -1;
	height: 0.43em;
	background: var(--hero-orange);
	border-radius: 4px 10px 5px 3px;
	box-shadow: 0 2px 0 rgb(17 24 32 / 16%);
	transform: skewX(-8deg) scaleX(var(--highlight-scale));
	transform-origin: right center;
}

.sparkleacc-magic-hero__title-accent {
	display: block !important;
	margin-block-start: 0.06em;
	color: var(--hero-coral);
	text-shadow: 4px 4px 0 var(--hero-ink);
}

.sparkleacc-magic-hero__title-final {
	position: absolute;
	inset-block-start: 0.18em;
	inset-inline-start: 0;
	display: block;
	opacity: 0;
	font-size: 0.98em;
	line-height: 1.05;
	transform: translateY(34px);
}

.sparkleacc-magic-hero__title-final em {
	display: block;
	color: var(--hero-coral);
	font-style: normal;
	text-shadow: 4px 4px 0 var(--hero-ink);
}

.sparkleacc-magic-hero__description {
	max-width: 590px;
	margin: 22px 0 0;
	font-size: clamp(15px, 1.25vw, 19px);
	font-weight: 650;
	line-height: 1.9;
}

.sparkleacc-magic-hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px;
	margin-block-start: 27px;
}

.sparkleacc-magic-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	min-height: 56px;
	padding: 9px 18px 9px 9px;
	color: var(--hero-ink);
	background: var(--hero-teal);
	border: 3px solid var(--hero-ink);
	border-radius: 12px;
	box-shadow: 6px 6px 0 var(--hero-ink);
	font-size: 15px;
	font-weight: 900;
	text-decoration: none;
	transition: box-shadow 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.sparkleacc-magic-hero__cta:hover,
.sparkleacc-magic-hero__cta:focus-visible {
	color: var(--hero-ink);
	background: var(--hero-orange);
	box-shadow: 2px 2px 0 var(--hero-ink);
	transform: translate(4px, 4px) !important;
	outline: 0;
}

.sparkleacc-magic-hero__cta-arrow {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	background: var(--hero-paper);
	border: 2px solid var(--hero-ink);
	border-radius: 8px;
	font: 900 20px/1 Arial, sans-serif;
}

.sparkleacc-magic-hero__proof {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 800;
	white-space: nowrap;
}

.sparkleacc-magic-hero__proof b {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	color: var(--hero-paper);
	background: var(--hero-green);
	border: 2px solid var(--hero-ink);
	border-radius: 50%;
}

.sparkleacc-magic-hero__visual {
	grid-column: 2;
	position: relative;
	display: grid;
	place-items: center;
	min-width: 0;
	height: min(590px, 64svh);
	perspective: 1200px;
}

.sparkleacc-magic-hero__route {
	position: absolute;
	inset: 0 -3%;
	z-index: 0;
	opacity: 0.9;
	pointer-events: none;
}

.sparkleacc-magic-hero__route svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.sparkleacc-magic-hero__route-base,
.sparkleacc-magic-hero__route-line {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.sparkleacc-magic-hero__route-base {
	stroke: rgb(17 24 32 / 12%);
	stroke-width: 8;
	stroke-dasharray: 0.012 0.026;
}

.sparkleacc-magic-hero__route-line {
	stroke-width: 6;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	filter: drop-shadow(2px 2px 0 rgb(17 24 32 / 36%));
}

.sparkleacc-magic-hero__route-node {
	fill: var(--hero-paper);
	stroke: var(--hero-ink);
	stroke-width: 3;
	vector-effect: non-scaling-stroke;
	transform-box: fill-box;
	transform-origin: center;
}

.sparkleacc-magic-hero__deck {
	position: relative;
	z-index: 2;
	width: min(100%, 650px);
	height: min(520px, 100%);
	transform-style: preserve-3d;
}

.sparkleacc-magic-hero__spark {
	position: absolute;
	top: 7%;
	left: 50%;
	z-index: 20;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	color: var(--hero-coral);
	background: var(--hero-orange);
	border: 3px solid var(--hero-ink);
	border-radius: 17px;
	box-shadow: 5px 5px 0 var(--hero-ink);
	font-size: 29px;
	transform: translateX(-50%) rotate(8deg);
	pointer-events: none;
}

.sparkleacc-magic-card {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: block;
	width: clamp(188px, 15vw, 224px);
	aspect-ratio: 0.75;
	color: var(--hero-ink);
	text-decoration: none;
	transform: translate(-50%, -50%);
	transform-origin: 50% 115%;
	will-change: transform, opacity, filter;
	transition: filter 220ms ease, opacity 220ms ease;
}

.sparkleacc-magic-card.is-spotify { z-index: 1; transform: translate(-50%, -50%) translateX(-155px) rotate(-11deg); }
.sparkleacc-magic-card.is-netflix { z-index: 3; transform: translate(-50%, -50%) translateY(-22px); }
.sparkleacc-magic-card.is-gaming { z-index: 2; transform: translate(-50%, -50%) translateX(155px) rotate(11deg); }

.sparkleacc-magic-card__tilt,
.sparkleacc-magic-card__parallax,
.sparkleacc-magic-card__float,
.sparkleacc-magic-card__face {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	will-change: transform;
}

.sparkleacc-magic-card__face {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 14px;
	background-color: var(--card-color, var(--hero-orange)) !important;
	background-image: none !important;
	border: 3px solid var(--hero-ink);
	border-radius: 18px;
	box-shadow: 9px 9px 0 var(--hero-ink);
	text-align: center;
	transition: box-shadow 180ms ease;
}

.sparkleacc-magic-card.is-spotify { --card-color: #43cc83; }
.sparkleacc-magic-card.is-netflix { --card-color: #ff6858; }
.sparkleacc-magic-card.is-gaming { --card-color: #ffbd42; }

.sparkleacc-magic-card:hover,
.sparkleacc-magic-card:focus-visible {
	color: var(--hero-ink);
	outline: 0;
}

.sparkleacc-magic-card:hover .sparkleacc-magic-card__face,
.sparkleacc-magic-card:focus-visible .sparkleacc-magic-card__face {
	box-shadow: 13px 15px 0 var(--hero-ink);
}

.sparkleacc-magic-hero__deck.is-card-focused .sparkleacc-magic-card:not(.is-active) {
	opacity: 0.72;
	filter: brightness(0.66) saturate(0.78) blur(0.35px);
}

.sparkleacc-magic-card.is-active {
	z-index: 12 !important;
}

.sparkleacc-magic-card__topline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding-block-end: 9px;
	border-block-end: 2px solid var(--hero-ink);
	font: 900 10px/1 "Vazirmatn", sans-serif;
	letter-spacing: 0.5px;
}

.sparkleacc-magic-card__icon {
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	margin: auto 0 12px;
	background: var(--hero-paper);
	border: 3px solid var(--hero-ink);
	border-radius: 50%;
	box-shadow: 4px 4px 0 var(--hero-ink);
	transform: translateZ(28px);
}

.sparkleacc-magic-card__icon svg {
	width: 52px;
	height: 52px;
	fill: none;
	stroke: currentcolor;
	stroke-width: 5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sparkleacc-magic-card.is-netflix .sparkleacc-magic-card__icon svg {
	fill: currentcolor;
	stroke-width: 3;
}

.sparkleacc-magic-card strong {
	font: 400 clamp(28px, 2.5vw, 39px)/1 "Lilita One", Impact, sans-serif;
	text-shadow: 3px 3px 0 rgb(255 255 255 / 62%);
	transform: translateZ(20px);
}

.sparkleacc-magic-card small {
	margin-block-start: 7px;
	font-size: 12px;
	font-weight: 900;
	transform: translateZ(15px);
}

.sparkleacc-magic-card__pill {
	margin-block-start: 11px;
	padding: 4px 9px;
	background: var(--hero-paper);
	border: 2px solid var(--hero-ink);
	border-radius: 999px;
	font-size: 9px;
	font-weight: 900;
	transform: translateZ(24px);
}

.sparkleacc-magic-hero__deck-label {
	position: absolute;
	bottom: 3%;
	left: 50%;
	margin: 0;
	padding: 6px 10px;
	background: var(--hero-paper);
	border: 2px solid var(--hero-ink);
	border-radius: 8px;
	box-shadow: 3px 3px 0 var(--hero-ink);
	font-size: 11px;
	font-weight: 900;
	white-space: nowrap;
	transform: translateX(-50%) rotate(-2deg);
	z-index: 4;
}

.sparkleacc-magic-hero__deck-label span {
	color: var(--hero-coral);
	font-size: 16px;
}

@media (max-width: 1024px) {
	.sparkleacc-magic-hero {
		min-height: 130svh;
	}

	.sparkleacc-magic-hero__stage {
		min-height: 700px;
	}

	.sparkleacc-magic-hero__layout {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
		gap: 12px;
		width: min(100% - 34px, 820px);
		padding-block: 24px 18px;
	}

	.sparkleacc-magic-hero__copy,
	.sparkleacc-magic-hero__visual {
		grid-column: 1;
	}

	.sparkleacc-magic-hero__copy {
		grid-row: 1;
		padding: 0;
		text-align: center;
	}

	.sparkleacc-magic-hero__title,
	.sparkleacc-magic-hero__description {
		margin-inline: auto;
	}

	.sparkleacc-magic-hero__title {
		font-size: clamp(42px, 7.2vw, 66px);
		letter-spacing: -2.3px;
	}

	.sparkleacc-magic-hero__actions {
		justify-content: center;
	}

	.sparkleacc-magic-hero__visual {
		grid-row: 2;
		height: 400px;
	}

	.sparkleacc-magic-hero__deck {
		height: 370px;
	}

	.sparkleacc-magic-card {
		width: clamp(164px, 22vw, 198px);
	}

	.sparkleacc-magic-hero__spark {
		top: 4%;
	}

	.sparkleacc-magic-hero__route {
		inset: -4% 2%;
	}
}

@media (max-width: 600px) {
	.sparkleacc-magic-hero {
		min-height: 126svh;
	}

	.sparkleacc-magic-hero__stage {
		min-height: 610px;
	}

	.sparkleacc-magic-hero__layout {
		width: calc(100% - 20px);
		padding-block: 18px 12px;
	}

	.sparkleacc-magic-hero__eyebrow {
		margin-block-end: 15px;
		padding: 5px 9px;
		box-shadow: 2px 2px 0 var(--hero-ink);
		font-size: 9px;
	}

	.sparkleacc-magic-hero__title {
		font-size: clamp(34px, 10.5vw, 46px);
		line-height: 1.04;
		letter-spacing: -1.6px;
	}

	.sparkleacc-magic-hero__title-accent {
		text-shadow: 3px 3px 0 var(--hero-ink);
	}

	.sparkleacc-magic-hero__description {
		max-width: 350px;
		margin-block-start: 14px;
		font-size: 12px;
		line-height: 1.75;
	}

	.sparkleacc-magic-hero__actions {
		gap: 13px;
		margin-block-start: 17px;
	}

	.sparkleacc-magic-hero__cta {
		min-height: 46px;
		padding: 6px 12px 6px 6px;
		border-width: 2px;
		box-shadow: 4px 4px 0 var(--hero-ink);
		font-size: 12px;
	}

	.sparkleacc-magic-hero__cta-arrow {
		width: 28px;
		height: 28px;
	}

	.sparkleacc-magic-hero__proof {
		font-size: 9px;
	}

	.sparkleacc-magic-hero__visual {
		height: 305px;
	}

	.sparkleacc-magic-hero__deck {
		width: 100%;
		height: 290px;
	}

	.sparkleacc-magic-card {
		width: clamp(116px, 34vw, 142px);
	}

	.sparkleacc-magic-card.is-spotify { transform: translate(-50%, -50%) translateX(-91px) rotate(-10deg); }
	.sparkleacc-magic-card.is-netflix { transform: translate(-50%, -50%) translateY(-12px); }
	.sparkleacc-magic-card.is-gaming { transform: translate(-50%, -50%) translateX(91px) rotate(10deg); }

	.sparkleacc-magic-card__face {
		padding: 9px;
		border-width: 2px;
		border-radius: 13px;
		box-shadow: 5px 5px 0 var(--hero-ink);
	}

	.sparkleacc-magic-card__topline {
		padding-block-end: 6px;
		font-size: 7px;
	}

	.sparkleacc-magic-card__icon {
		width: 46px;
		height: 46px;
		margin-block-end: 6px;
		border-width: 2px;
		box-shadow: 2px 2px 0 var(--hero-ink);
	}

	.sparkleacc-magic-card__icon svg {
		width: 31px;
		height: 31px;
		stroke-width: 4;
	}

	.sparkleacc-magic-card strong {
		font-size: 23px;
	}

	.sparkleacc-magic-card small {
		font-size: 8px;
	}

	.sparkleacc-magic-card__pill {
		margin-block-start: 6px;
		padding: 2px 5px;
		font-size: 7px;
	}

	.sparkleacc-magic-hero__spark {
		top: 0;
		width: 43px;
		height: 43px;
		border-width: 2px;
		border-radius: 12px;
		box-shadow: 3px 3px 0 var(--hero-ink);
		font-size: 22px;
	}

	.sparkleacc-magic-hero__deck-label {
		bottom: 0;
		font-size: 9px;
	}

	.sparkleacc-magic-hero__route {
		inset: -7% -4%;
		opacity: 0.78;
	}

	.sparkleacc-magic-hero__route-base {
		stroke-width: 5;
	}

	.sparkleacc-magic-hero__route-line {
		stroke-width: 4;
	}

	.sparkleacc-magic-hero__route-node {
		stroke-width: 2;
	}
}

@media (hover: none), (pointer: coarse) {
	.sparkleacc-magic-hero__deck.is-card-focused .sparkleacc-magic-card:not(.is-active) {
		opacity: 1;
		filter: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sparkleacc-magic-hero__highlight {
		--highlight-scale: 1;
	}
}

.sparkleacc-magic-hero.is-static .sparkleacc-magic-hero__highlight,
.sparkleacc-magic-hero.is-reduced-motion .sparkleacc-magic-hero__highlight {
	--highlight-scale: 1;
}

.sparkleacc-magic-hero.is-static,
.sparkleacc-magic-hero.is-reduced-motion {
	min-height: auto;
}

.sparkleacc-magic-hero.is-static .sparkleacc-magic-hero__stage,
.sparkleacc-magic-hero.is-reduced-motion .sparkleacc-magic-hero__stage {
	position: relative;
	top: auto;
	height: auto;
	min-height: 680px;
}