.sdash-performance-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	background-color: var(--wp--preset--color--primary);
}

main:has(> .sdash-performance-hero) {
	margin-top: 0;
}

.sdash-performance-hero__scene {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.sdash-performance-hero__streak {
	position: absolute;
	left: 0;
	height: 2px;
	background: linear-gradient(to right, transparent, var(--wp--preset--color--secondary) 65%, transparent);
	opacity: 0;
	animation-name: sdash-performance-hero-streak;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.sdash-performance-hero__content {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--md);
	text-align: center;
}

.sdash-performance-hero__heading {
	margin: 0;
	color: var(--wp--preset--color--background);
	font-size: var(--wp--preset--font-size--xx-large);
}

.sdash-performance-hero__text {
	margin-top: var(--wp--preset--spacing--sm);
	color: var(--wp--preset--color--background);
	font-size: var(--wp--preset--font-size--medium);
	opacity: 0.85;
}

.sdash-performance-hero__cta {
	display: flex;
	justify-content: center;
	margin-top: var(--wp--preset--spacing--lg);
}

@keyframes sdash-performance-hero-streak {
	0% {
		transform: translateX(-20vw);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translateX(120vw);
		opacity: 0;
	}
}

.sdash-performance-hero__streak:nth-of-type(1) { top: 0.0%; width: 145px; animation-delay: 0.91s; animation-duration: 2.40s; }
.sdash-performance-hero__streak:nth-of-type(2) { top: 1.9%; width: 134px; animation-delay: 2.35s; animation-duration: 2.29s; }
.sdash-performance-hero__streak:nth-of-type(3) { top: 6.8%; width: 136px; animation-delay: 1.20s; animation-duration: 2.97s; }
.sdash-performance-hero__streak:nth-of-type(4) { top: 9.6%; width: 196px; animation-delay: 2.77s; animation-duration: 2.31s; }
.sdash-performance-hero__streak:nth-of-type(5) { top: 11.7%; width: 137px; animation-delay: 0.00s; animation-duration: 2.16s; }
.sdash-performance-hero__streak:nth-of-type(6) { top: 16.9%; width: 195px; animation-delay: 0.48s; animation-duration: 1.90s; }
.sdash-performance-hero__streak:nth-of-type(7) { top: 19.6%; width: 110px; animation-delay: 3.07s; animation-duration: 2.76s; }
.sdash-performance-hero__streak:nth-of-type(8) { top: 22.4%; width: 206px; animation-delay: 3.74s; animation-duration: 2.31s; }
.sdash-performance-hero__streak:nth-of-type(9) { top: 24.9%; width: 201px; animation-delay: 0.56s; animation-duration: 2.90s; }
.sdash-performance-hero__streak:nth-of-type(10) { top: 30.0%; width: 211px; animation-delay: 0.28s; animation-duration: 1.65s; }
.sdash-performance-hero__streak:nth-of-type(11) { top: 32.3%; width: 154px; animation-delay: 1.17s; animation-duration: 3.09s; }
.sdash-performance-hero__streak:nth-of-type(12) { top: 37.0%; width: 146px; animation-delay: 2.78s; animation-duration: 2.08s; }
.sdash-performance-hero__streak:nth-of-type(13) { top: 39.6%; width: 120px; animation-delay: 2.76s; animation-duration: 2.36s; }
.sdash-performance-hero__streak:nth-of-type(14) { top: 41.1%; width: 185px; animation-delay: 3.93s; animation-duration: 2.61s; }
.sdash-performance-hero__streak:nth-of-type(15) { top: 45.0%; width: 216px; animation-delay: 2.90s; animation-duration: 2.76s; }
.sdash-performance-hero__streak:nth-of-type(16) { top: 48.4%; width: 216px; animation-delay: 1.76s; animation-duration: 2.38s; }
.sdash-performance-hero__streak:nth-of-type(17) { top: 50.8%; width: 127px; animation-delay: 2.01s; animation-duration: 2.37s; }
.sdash-performance-hero__streak:nth-of-type(18) { top: 54.7%; width: 145px; animation-delay: 3.52s; animation-duration: 1.63s; }
.sdash-performance-hero__streak:nth-of-type(19) { top: 58.3%; width: 178px; animation-delay: 1.32s; animation-duration: 2.36s; }
.sdash-performance-hero__streak:nth-of-type(20) { top: 61.1%; width: 145px; animation-delay: 0.19s; animation-duration: 3.15s; }
.sdash-performance-hero__streak:nth-of-type(21) { top: 64.5%; width: 218px; animation-delay: 3.18s; animation-duration: 3.38s; }
.sdash-performance-hero__streak:nth-of-type(22) { top: 68.9%; width: 150px; animation-delay: 3.47s; animation-duration: 1.71s; }
.sdash-performance-hero__streak:nth-of-type(23) { top: 72.8%; width: 126px; animation-delay: 1.02s; animation-duration: 2.97s; }
.sdash-performance-hero__streak:nth-of-type(24) { top: 73.5%; width: 140px; animation-delay: 0.77s; animation-duration: 1.76s; }
.sdash-performance-hero__streak:nth-of-type(25) { top: 77.7%; width: 147px; animation-delay: 3.11s; animation-duration: 2.65s; }
.sdash-performance-hero__streak:nth-of-type(26) { top: 81.5%; width: 194px; animation-delay: 3.60s; animation-duration: 3.23s; }
.sdash-performance-hero__streak:nth-of-type(27) { top: 82.9%; width: 108px; animation-delay: 1.99s; animation-duration: 2.30s; }
.sdash-performance-hero__streak:nth-of-type(28) { top: 88.2%; width: 208px; animation-delay: 0.20s; animation-duration: 2.97s; }
.sdash-performance-hero__streak:nth-of-type(29) { top: 89.7%; width: 112px; animation-delay: 1.22s; animation-duration: 3.28s; }
.sdash-performance-hero__streak:nth-of-type(30) { top: 92.9%; width: 137px; animation-delay: 3.25s; animation-duration: 3.23s; }

.sdash-performance-hero__car {
	position: absolute;
	left: 0;
	width: 40px;
	height: 20px;
	color: var(--wp--preset--color--secondary);
	opacity: 0;
	transform: translateX(-10vw) translateY(-70%);
	animation-name: sdash-performance-hero-car;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.sdash-performance-hero__car svg {
	display: block;
	width: 100%;
	height: 100%;
}

@keyframes sdash-performance-hero-car {
	0% {
		transform: translateX(-10vw) translateY(-70%);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translateX(110vw) translateY(-70%);
		opacity: 0;
	}
}

.sdash-performance-hero__car--1 { top: 0.0%; animation-duration: 2.40s; animation-delay: 0.91s; }
.sdash-performance-hero__car--2 { top: 16.9%; animation-duration: 1.90s; animation-delay: 0.48s; }
.sdash-performance-hero__car--3 { top: 32.3%; animation-duration: 3.09s; animation-delay: 1.17s; }
.sdash-performance-hero__car--4 { top: 48.4%; animation-duration: 2.38s; animation-delay: 1.76s; }
.sdash-performance-hero__car--5 { top: 64.5%; animation-duration: 3.38s; animation-delay: 3.18s; }
.sdash-performance-hero__car--6 { top: 81.5%; animation-duration: 3.23s; animation-delay: 3.60s; }
.sdash-performance-hero__car--7 { top: 92.9%; animation-duration: 3.23s; animation-delay: 3.25s; }

@media (prefers-reduced-motion: reduce) {
	.sdash-performance-hero__streak {
		animation: none;
		opacity: 0.35;
		transform: translateX(40vw);
	}

	.sdash-performance-hero__car {
		animation: none;
		opacity: 0;
	}
}

.sdash-performance-hero--editor {
	min-height: auto;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
}