/* ==========================================================================
   HERO
   ========================================================================== */

.gle-hero {
	position: relative;
	padding: clamp(3rem, 7vw, 6rem) clamp(1.25rem, 5vw, 3.5rem) clamp(3.5rem, 6vw, 5rem);
	overflow: hidden;
}

.gle-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: radial-gradient(circle at 78% 35%, rgba(30, 120, 255, .16), transparent 55%);
}

.gle-ping {
	position: absolute;
	top: 35%;
	right: 14%;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	border: 1px solid rgba(54, 214, 255, .35);
	transform: translate(50%, -50%);
	animation: gle-ping 4.5s ease-out infinite;
}

.gle-ping--2 {
	animation-delay: 1.5s;
}

.gle-ping--3 {
	animation-delay: 3s;
}

@keyframes gle-ping {
	0% {
		width: 40px;
		height: 40px;
		opacity: .8;
	}

	100% {
		width: 480px;
		height: 480px;
		opacity: 0;
	}
}

.gle-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
	max-width: 1280px;
	margin-inline: auto;
}

.gle-hero__art img {
	filter: drop-shadow(0 30px 60px rgba(30, 120, 255, .25));
}

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