/* Title assemble + hero mesh + offer modal code drops */

.top-title h1.js-title-assemble,
.top-title .h1.js-title-assemble {
	visibility: hidden;
}

.top-title h1.js-title-assemble.is-ready,
.top-title .h1.js-title-assemble.is-ready {
	visibility: visible;
}

.top-title h1 .title-ch,
.top-title .h1 .title-ch {
	display: inline-block;
	min-width: 0.25em;
}

.top-title h1 .title-ch.is-space,
.top-title .h1 .title-ch.is-space {
	min-width: 0.35em;
}

.top-title.has-hero-mesh > .container,
.top-title.has-hero-mesh > .img-place {
	position: relative;
	z-index: 1;
}

.top-title.has-hero-mesh > .img-place {
	position: absolute;
}

.top-title.has-hero-mesh {
	overflow: hidden;
}

.esk-hero-mesh {
	position: absolute;
	inset: -12%;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 55% 50% at 20% 40%, rgba(58, 139, 238, 0.42), transparent 62%),
		radial-gradient(ellipse 48% 46% at 80% 26%, rgba(255, 152, 0, 0.36), transparent 58%),
		radial-gradient(ellipse 50% 42% at 55% 90%, rgba(58, 139, 238, 0.26), transparent 60%),
		radial-gradient(ellipse 38% 36% at 40% 12%, rgba(255, 152, 0, 0.20), transparent 55%);
	background-repeat: no-repeat;
	transform-origin: 50% 45%;
	animation: esk-hero-mesh-breathe 6.5s ease-in-out infinite alternate;
	will-change: transform, opacity, filter;
}

@keyframes esk-hero-mesh-breathe {
	0% {
		transform: translate3d(-4%, 2%, 0) scale(1.02);
		opacity: 0.65;
		filter: saturate(1) brightness(1);
	}
	50% {
		transform: translate3d(5%, -3%, 0) scale(1.14);
		opacity: 1;
		filter: saturate(1.45) brightness(1.1);
	}
	100% {
		transform: translate3d(2%, 4%, 0) scale(1.08);
		opacity: 0.78;
		filter: saturate(1.2) brightness(1.03);
	}
}

.offer-widget .esk-code-rain {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
	opacity: 1;
	transition: opacity 0.5s ease;
}

.offer-widget .esk-code-rain.is-fading {
	opacity: 0;
}

.offer-widget .esk-code-drop {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	padding: 0.15em 0.28em;
	border-radius: 0.35rem;
	font-family: Consolas, Monaco, "Courier New", monospace;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	color: rgba(190, 220, 255, 0.95);
	background: rgba(58, 139, 238, 0.22);
	box-shadow:
		0 0.35rem 1rem rgba(18, 20, 28, 0.22),
		inset 0 0 0 1px rgba(255, 255, 255, 0.12);
	opacity: 0;
	transform: translate3d(var(--drift, 0), -12vh, 0) rotate(var(--start-rot, 0deg));
	will-change: transform, opacity;
	white-space: nowrap;
	user-select: none;
}

.offer-widget .esk-code-drop.is-accent {
	color: rgba(255, 236, 200, 0.98);
	background: rgba(255, 152, 0, 0.28);
	box-shadow:
		0 0.35rem 1rem rgba(255, 152, 0, 0.22),
		inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.offer-widget .esk-code-drop.is-falling {
	animation: esk-code-drop-fall 1s cubic-bezier(0.33, 0.05, 0.25, 1) forwards;
}

.offer-widget .esk-code-drop.is-landed {
	opacity: 0.92;
	transform: translate3d(var(--drift, 0), calc(100vh - 3.2rem - var(--land-y, 2vh)), 0) rotate(var(--land-rot, 0deg));
}

@keyframes esk-code-drop-fall {
	0% {
		opacity: 0;
		transform: translate3d(var(--drift, 0), -12vh, 0) rotate(var(--start-rot, 0deg));
	}
	10% {
		opacity: 1;
	}
	100% {
		opacity: 0.92;
		transform: translate3d(var(--drift, 0), calc(100vh - 3.2rem - var(--land-y, 2vh)), 0) rotate(var(--land-rot, 0deg));
	}
}

@media (prefers-reduced-motion: reduce) {
	.top-title h1.js-title-assemble,
	.top-title .h1.js-title-assemble {
		visibility: visible;
	}

	.esk-hero-mesh {
		animation: none;
	}

	.offer-widget .esk-code-rain {
		display: none;
	}
}

@media only screen and (max-width: 1143px) {
	.esk-hero-mesh {
		animation-duration: 7.5s;
	}
}