/**
 * Home hero section.
 *
 * @package ALW
 * @since   1.0.0
 */

@keyframes alw-hero-drift {
	0%,
	100% {
		transform: translate(0, 0);
	}

	50% {
		transform: translate(3%, 2%);
	}
}

@keyframes alw-hero-robot-float {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-14px);
	}
}

.hero-home {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--alw-primary);
	color: var(--alw-primary-foreground);
}

.hero-home__pattern {
	pointer-events: none;
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.9;
	background-size: 160px 160px;
	mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%);
	-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%);
}

.hero-home__glows {
	pointer-events: none;
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.hero-home__glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(40px);
	animation: alw-hero-drift 28s ease-in-out infinite;
}

.hero-home__glow--one {
	top: -33%;
	left: -25%;
	width: 80vmax;
	height: 80vmax;
	opacity: 0.6;
	background: radial-gradient(circle at 30% 30%, var(--alw-hero-glow-teal), transparent 60%);
}

.hero-home__glow--two {
	right: -25%;
	bottom: -33%;
	width: 70vmax;
	height: 70vmax;
	opacity: 0.5;
	animation-direction: reverse;
	animation-duration: 32s;
	background: radial-gradient(circle at 60% 60%, var(--alw-hero-glow-gold), transparent 60%);
	filter: blur(50px);
}

.hero-home__defs {
	position: absolute;
	width: 0;
	height: 0;
}

.hero-home__container {
	position: relative;
	z-index: 1;
	display: flex;
	min-height: 100svh;
	align-items: center;
	justify-content: center;
	max-width: var(--alw-header-max-width);
	margin-inline: auto;
	padding: 112px 16px 128px;
}

@media (min-width: 768px) {
	.hero-home__container {
		padding: 128px 32px;
	}
}

.hero-home__robot {
	position: absolute;
	inset-inline-start: 0;
	bottom: 128px;
	z-index: 3;
	width: clamp(120px, 14vw, 220px);
	height: auto;
	pointer-events: none;
	user-select: none;
	filter: drop-shadow(0 12px 28px rgb(0 0 0 / 0.35));
	transform-origin: center bottom;
	animation: alw-hero-robot-float 3.5s ease-in-out infinite;
}

@media (min-width: 1200px) {
	.hero-home__robot {
		width: clamp(180px, 16vw, 260px);
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	.hero-home__robot {
		width: clamp(100px, 12vw, 160px);
		bottom: 100px;
	}
}

@media (max-width: 767px) {
	.hero-home__robot {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-home__robot {
		animation: none;
	}
}

.hero-home__map-wrap {
	position: relative;
	width: 100%;
	max-width: min(100%, calc(78svh * 1.214));
	margin-inline: auto;
}

.hero-home__map {
	position: relative;
	width: 100%;
	aspect-ratio: 1753 / 1444;
}

.hero-home__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	clip-path: url(#alw-ksa-clip);
	-webkit-clip-path: url(#alw-ksa-clip);
	filter: saturate(1.05) contrast(1.02);
}

.hero-home__video--youtube {
	overflow: hidden;
	pointer-events: none;
}

.hero-home__youtube,
#alw-hero-youtube-player iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 300%;
	height: 300%;
	border: 0;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

#alw-hero-youtube-player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.hero-home__map-shade {
	position: absolute;
	inset: 0;
	clip-path: url(#alw-ksa-clip);
	-webkit-clip-path: url(#alw-ksa-clip);
	background: linear-gradient(180deg, var(--alw-hero-shade-top) 0%, var(--alw-hero-shade-bottom) 100%);
}

.hero-home__map-outline {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hero-home__content {
	pointer-events: none;
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: 24px;
}

.hero-home__content-inner {
	pointer-events: auto;
	max-width: 672px;
	text-align: center;
	color: var(--alw-white);
	filter: drop-shadow(0 4px 24px rgb(0 0 0 / 0.5));
}

.hero-home__title {
	margin-top: 24px;
}

.hero-home__subtitle {
	max-width: 576px;
	margin: 20px auto 0;
}

.hero-home__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 32px;
}