/* =========================================================
   HOME COMPARISON TEASER
   Ultra Premium / Automotive / 3D Depth Experience
========================================================= */

.home-comparison-teaser {
	position: relative;
	width: 100%;
	min-height: 650px;
	overflow: hidden;
	background: var(--color-background-dark);
	color: var(--color-text-inverse);
	isolation: isolate;
}


/* =========================================================
   BACKGROUND
========================================================= */

.home-comparison-teaser__media {
	position: absolute;
	inset: 0;
	z-index: -3;
	overflow: hidden;
}

.home-comparison-teaser__image {
	position: absolute;
	inset: -3%;
	width: 106%;
	height: 106%;
	object-fit: cover;
	object-position: center;
	transition:
		transform 1.2s cubic-bezier(.2,.65,.2,1),
		filter 1.2s ease;
	will-change: transform;
}

.home-comparison-teaser:hover .home-comparison-teaser__image {
	transform: scale(1.035);
}


/* =========================================================
   DARK CINEMATIC OVERLAY
========================================================= */

.home-comparison-teaser__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			90deg,
			rgba(8, 12, 14, .96) 0%,
			rgba(8, 12, 14, .84) 28%,
			rgba(8, 12, 14, .42) 57%,
			rgba(8, 12, 14, .08) 100%
		),
		linear-gradient(
			0deg,
			rgba(4, 7, 8, .72) 0%,
			transparent 55%
		);
	z-index: 1;
}


/* =========================================================
   LIGHT / ATMOSPHERE
========================================================= */

.home-comparison-teaser__light {
	position: absolute;
	width: 500px;
	height: 500px;
	right: 5%;
	top: 10%;
	border-radius: 50%;
	background: rgba(0, 202, 171, .12);
	filter: blur(100px);
	z-index: 2;
	pointer-events: none;
	transition: transform 1s ease;
}

.home-comparison-teaser:hover .home-comparison-teaser__light {
	transform: scale(1.12);
}


/* =========================================================
   SUBTLE GRID
========================================================= */

.home-comparison-teaser__grid-glow {
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: .16;
	pointer-events: none;

	background-image:
		linear-gradient(
			rgba(255,255,255,.08) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(255,255,255,.08) 1px,
			transparent 1px
		);

	background-size: 90px 90px;

	mask-image: linear-gradient(
		to right,
		transparent,
		black 50%,
		transparent
	);
}


/* =========================================================
   INNER
========================================================= */

.home-comparison-teaser__inner {
	position: relative;
	z-index: 5;
	width: min(1400px, 100%);
	min-height: 650px;
	margin-inline: auto;
	padding:
		var(--space-4xl)
		var(--container-padding-inline)
		var(--space-3xl);

	display: flex;
	align-items: center;
}


/* =========================================================
   CONTENT
========================================================= */

.home-comparison-teaser__content {
	position: relative;
	z-index: 10;
	width: min(620px, 55%);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-lg);

	opacity: 1;
	transform: translateY(0);

	transition:
		opacity .9s cubic-bezier(.2,.65,.2,1),
		transform .9s cubic-bezier(.2,.65,.2,1);
}

.home-comparison-teaser__content:not(.is-revealed) {
	opacity: 0;
	transform: translateY(35px);
}


/* =========================================================
   EYEBROW
========================================================= */

.home-comparison-teaser__eyebrow-wrap {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.home-comparison-teaser__eyebrow-line {
	width: 32px;
	height: 1px;
	background: var(--color-accent);
}

.home-comparison-teaser__eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(255,255,255,.75);
}


/* =========================================================
   HEADING
========================================================= */

.home-comparison-teaser__heading {
	margin: 0;
	max-width: 650px;

	font-family: var(--font-family-heading);
	font-size: clamp(42px, 5vw, 76px);
	font-weight: 700;
	line-height: .98;
	letter-spacing: -.045em;

	color: #fff;

	text-wrap: balance;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.home-comparison-teaser__description {
	margin: 0;
	max-width: 550px;

	font-size: 17px;
	line-height: 1.7;
	color: rgba(255,255,255,.72);
}


/* =========================================================
   ACTIONS
========================================================= */

.home-comparison-teaser__actions {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 8px;
}


/* =========================================================
   PRIMARY CTA
========================================================= */

.home-comparison-teaser__cta {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 25px;

	min-width: 190px;
	padding: 7px 8px 7px 24px;

	border: 1px solid rgba(0, 210, 177, .9);
	border-radius: 999px;

	background: var(--color-accent);
	color: #fff;

	font-size: 14px;
	font-weight: 700;
	text-decoration: none;

	box-shadow:
		0 10px 35px rgba(0, 190, 160, .25);

	transition:
		transform .35s cubic-bezier(.2,.65,.2,1),
		box-shadow .35s ease,
		background-color .35s ease;
}

.home-comparison-teaser__cta-arrow {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 38px;
	height: 38px;

	border-radius: 50%;

	background: rgba(255,255,255,.16);

	font-size: 18px;

	transition: transform .35s ease;
}

.home-comparison-teaser__cta:hover,
.home-comparison-teaser__cta:focus-visible,
.home-comparison-teaser__cta.is-active {
	transform: translateY(-4px);
	box-shadow:
		0 18px 45px rgba(0, 190, 160, .35);
}

.home-comparison-teaser__cta:hover .home-comparison-teaser__cta-arrow {
	transform: rotate(45deg);
}


/* =========================================================
   SECONDARY CTA
========================================================= */

.home-comparison-teaser__secondary {
	display: inline-flex;
	align-items: center;
	gap: 9px;

	padding: 13px 18px;

	border: 1px solid rgba(255,255,255,.25);
	border-radius: 999px;

	color: rgba(255,255,255,.85);

	font-size: 13px;
	font-weight: 600;
	text-decoration: none;

	backdrop-filter: blur(10px);

	transition:
		background-color .3s ease,
		border-color .3s ease,
		transform .3s ease;
}

.home-comparison-teaser__secondary:hover {
	background: rgba(255,255,255,.1);
	border-color: rgba(255,255,255,.5);
	transform: translateY(-3px);
}


/* =========================================================
   FLOATING SCOOTER / ILLUSTRATION
========================================================= */

.home-comparison-teaser__illustration {
	position: absolute;
	right: 4%;
	bottom: 3%;
	z-index: 6;

	width: min(560px, 48vw);

	opacity: 1;

	transform:
		translate3d(0, 0, 0)
		rotate(-2deg);

	transition:
		opacity 1s cubic-bezier(.2,.65,.2,1),
		transform 1s cubic-bezier(.2,.65,.2,1);
}

.home-comparison-teaser__illustration:not(.is-revealed) {
	opacity: 0;
	transform:
		translate3d(60px, 30px, 0)
		rotate(-4deg);
}


/* =========================================================
   ILLUSTRATION GLOW
========================================================= */

.home-comparison-teaser__illustration-glow {
	position: absolute;
	left: 20%;
	right: 10%;
	bottom: 5%;

	height: 120px;

	background: rgba(0, 210, 177, .25);

	filter: blur(70px);

	z-index: -1;

	transition: transform .8s ease;
}

.home-comparison-teaser:hover
.home-comparison-teaser__illustration-glow {
	transform: scale(1.15);
}


/* =========================================================
   RING
========================================================= */

.home-comparison-teaser__illustration-ring {
	position: absolute;
	left: 18%;
	top: 12%;

	width: 310px;
	height: 310px;

	border: 1px solid rgba(0, 210, 177, .25);
	border-radius: 50%;

	box-shadow:
		0 0 80px rgba(0,210,177,.1),
		inset 0 0 50px rgba(0,210,177,.05);

	transform: scale(.9);

	transition: transform 1s ease;
}

.home-comparison-teaser:hover
.home-comparison-teaser__illustration-ring {
	transform: scale(1.03);
}

.home-comparison-teaser__illustration-image {
	position: relative;

	width: 100%;
	height: auto;

	display: block;

	object-fit: contain;

	filter:
		drop-shadow(0 35px 35px rgba(0,0,0,.45));

	transition:
		transform .8s cubic-bezier(.2,.65,.2,1),
		filter .8s ease;
}

.home-comparison-teaser:hover
.home-comparison-teaser__illustration-image {
	transform: translateY(-10px) scale(1.025);

	filter:
		drop-shadow(0 45px 45px rgba(0,0,0,.5));
}


/* =========================================================
   FLOATING INFO CARD
========================================================= */

.home-comparison-teaser__floating-info {
	position: absolute;
	right: 3%;
	top: 11%;
	z-index: 12;

	display: flex;
	align-items: center;
	gap: 12px;

	padding: 13px 17px;

	border: 1px solid rgba(255,255,255,.18);
	border-radius: 14px;

	background: rgba(12,18,19,.48);

	backdrop-filter: blur(18px);

	box-shadow:
		0 15px 50px rgba(0,0,0,.22);

	transition:
		transform .6s ease,
		background-color .4s ease;
}

.home-comparison-teaser__floating-info:hover {
	transform: translateY(-5px);
	background: rgba(12,18,19,.65);
}

.home-comparison-teaser__floating-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-accent);

	box-shadow:
		0 0 0 5px rgba(0,210,177,.12),
		0 0 20px rgba(0,210,177,.5);
}

.home-comparison-teaser__floating-info strong,
.home-comparison-teaser__floating-info span {
	display: block;
}

.home-comparison-teaser__floating-info strong {
	font-size: 11px;
	color: #fff;
	letter-spacing: .03em;
}

.home-comparison-teaser__floating-info div span {
	margin-top: 3px;
	font-size: 10px;
	color: rgba(255,255,255,.55);
}


/* =========================================================
   CATEGORY NAV
========================================================= */

.home-comparison-teaser__categories {
	position: absolute;
	left: var(--container-padding-inline);
	bottom: 35px;
	z-index: 10;

	display: flex;
	align-items: center;
	gap: 20px;
}

.home-comparison-teaser__categories-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255,255,255,.42);
}

.home-comparison-teaser__category-list {
	display: flex;
	align-items: center;
	gap: 8px;
}

.home-comparison-teaser__category {
	display: inline-flex;
	align-items: center;
	gap: 12px;

	padding: 9px 13px;

	border: 1px solid rgba(255,255,255,.13);
	border-radius: 999px;

	background: rgba(255,255,255,.045);

	color: rgba(255,255,255,.72);

	font-size: 10px;
	font-weight: 600;
	text-decoration: none;

	backdrop-filter: blur(8px);

	transition:
		background-color .3s ease,
		border-color .3s ease,
		color .3s ease,
		transform .3s ease;
}

.home-comparison-teaser__category span:last-child {
	color: var(--color-accent);
}

.home-comparison-teaser__category:hover {
	background: rgba(0,210,177,.1);
	border-color: rgba(0,210,177,.45);
	color: #fff;
	transform: translateY(-3px);
}


/* =========================================================
   PROGRESS INDICATOR
========================================================= */

.home-comparison-teaser__progress {
	position: absolute;
	right: var(--container-padding-inline);
	bottom: 38px;
	z-index: 10;

	display: flex;
	align-items: center;
	gap: 10px;

	color: rgba(255,255,255,.45);
	font-size: 9px;
	letter-spacing: .15em;
}

.home-comparison-teaser__progress-line {
	width: 65px;
	height: 1px;
	background: rgba(255,255,255,.25);
	overflow: hidden;
}

.home-comparison-teaser__progress-line span {
	display: block;
	width: 40%;
	height: 100%;
	background: var(--color-accent);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

	.home-comparison-teaser,
	.home-comparison-teaser__inner {
		min-height: 600px;
	}

	.home-comparison-teaser__content {
		width: 58%;
	}

	.home-comparison-teaser__heading {
		font-size: clamp(40px, 6vw, 60px);
	}

	.home-comparison-teaser__illustration {
		width: 52vw;
		right: -3%;
	}

	.home-comparison-teaser__floating-info {
		right: 2%;
		top: 8%;
	}

	.home-comparison-teaser__categories {
		bottom: 25px;
	}
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

	.home-comparison-teaser {
		min-height: 700px;
	}

	.home-comparison-teaser__inner {
		min-height: 700px;

		align-items: flex-start;

		padding-top: 80px;
		padding-bottom: 120px;
	}

	.home-comparison-teaser__content {
		width: 100%;
		max-width: 100%;
		align-items: flex-start;
	}

	.home-comparison-teaser__heading {
		max-width: 380px;
		font-size: clamp(38px, 11vw, 52px);
	}

	.home-comparison-teaser__description {
		max-width: 360px;
		font-size: 14px;
		line-height: 1.65;
	}

	.home-comparison-teaser__actions {
		flex-wrap: wrap;
	}

	.home-comparison-teaser__illustration {
		width: 115vw;
		max-width: none;

		right: -25%;
		bottom: 20px;
	}

	.home-comparison-teaser__illustration-ring {
		width: 230px;
		height: 230px;
		left: 27%;
	}

	.home-comparison-teaser__floating-info {
		display: none;
	}

	.home-comparison-teaser__categories {
		left: var(--space-md);
		right: var(--space-md);
		bottom: 18px;

		display: block;
	}

	.home-comparison-teaser__categories-label {
		margin-bottom: 8px;
	}

	.home-comparison-teaser__category-list {
		overflow-x: auto;
		padding-bottom: 5px;
		scrollbar-width: none;
	}

	.home-comparison-teaser__category-list::-webkit-scrollbar {
		display: none;
	}

	.home-comparison-teaser__category {
		flex: 0 0 auto;
	}

	.home-comparison-teaser__progress {
		display: none;
	}
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

	.home-comparison-teaser {
		min-height: 670px;
	}

	.home-comparison-teaser__inner {
		min-height: 670px;
		padding-top: 65px;
	}

	.home-comparison-teaser__heading {
		font-size: 37px;
	}

	.home-comparison-teaser__actions {
		width: 100%;
	}

	.home-comparison-teaser__cta {
		min-width: 175px;
	}

	.home-comparison-teaser__secondary {
		padding-inline: 15px;
	}

	.home-comparison-teaser__illustration {
		bottom: 30px;
		right: -32%;
	}
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.home-comparison-teaser *,
	.home-comparison-teaser *::before,
	.home-comparison-teaser *::after {
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}