/* "Get found in AI search" homepage hero — see template-parts/homepage/section-hero-geo.php */

#hero-geo-search {
	position: relative;
	overflow: hidden;
	background: radial-gradient(120% 100% at 88% 40%, #0B3F6B 0%, #082A52 38%, #05173A 68%, #040F28 100%);
}

#hero-geo-search .hero-geo-canvas {
	position: relative;
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	aspect-ratio: 1920 / 870;
	/* below ~1365px, the aspect-ratio height shrinks faster than the
	   panel's copy (which bottoms out at its clamp() floors) can follow,
	   and the panel starts overflowing the canvas — floor the height so
	   there's always room, down to the mobile breakpoint */
	min-height: 620px;
}

/* deliberately not position:relative — that would make .container (which
   has no in-flow height of its own, since .hero-geo-panel inside it is
   absolutely positioned) the containing block for .hero-geo-panel's `top`
   percentage instead of .hero-geo-canvas, collapsing it to top:0 */
#hero-geo-search .container {
	position: static;
}

/* holds the glow/line/icons/AI graphic at a fixed 1920:870 ratio and
   centers that block vertically in whatever extra height
   .hero-geo-canvas's min-height floor adds below ~1368px wide, so all of
   it keeps scaling together instead of icons and line drifting apart */
#hero-geo-search .hero-geo-stage {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	aspect-ratio: 1920 / 870;
}

/* ambient glow blob */
#hero-geo-search .hero-geo-glow {
	position: absolute;
	left: 34.74%;
	top: -22.18%;
	width: 65.26%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(110, 214, 165, 0.19) 0%, rgba(62, 134, 214, 0.13) 34%, rgba(62, 134, 214, 0.06) 52%, rgba(62, 134, 214, 0.02) 68%, rgba(62, 134, 214, 0) 85%);
	animation: hero-geo-bloom 8s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}

/* flowing background line — runs from behind icon 1 to behind icon 5,
   viewBox matches the canvas exactly so it can't drift off-edge */
#hero-geo-search .hero-geo-lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

/* dasharray kept close to the path's actual rendered length (~1956px) —
   padding it out much further (as before) leaves a "dead zone" at the
   start where the offset animation has nothing to reveal yet, which
   visually reads as the line drawing in from the wrong/far end first */
#hero-geo-search .hero-geo-line {
	stroke-dasharray: 1960;
	stroke-dashoffset: 1960;
	animation: hero-geo-trace 1.9s ease-out both;
}

#hero-geo-search .hero-geo-line-blur {
	filter: blur(12px);
}

/* floating glass icons — stay in their resting position (no flying across
   the screen); each pops in (grow, slight overshoot) then settles into its
   resting scale/opacity/blur */
#hero-geo-search .hero-geo-icon {
	position: absolute;
	width: 15.625%;
	aspect-ratio: 1 / 1;
	backface-visibility: hidden;
	will-change: transform, opacity, filter;
	z-index: 2;
	pointer-events: none;
}

#hero-geo-search .hero-geo-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 7px 12px rgba(4, 14, 40, 0.45));
}

/* icons pop in the moment the background line's leading edge first
   crosses into each one's bounding box — delays below are each icon's
   arc-length position on the hero-geo-line path (see
   section-hero-geo.php), converted through the line's own "ease-out"
   reveal timing over its 1.9s trace duration. Note icon-6 (growth, left
   76.458%) fires before icon-5 (funnel, left 88.594%) even though the
   numbering runs the other way — growth genuinely sits further left/
   earlier along the curve on screen, so the line reaches it first */
#hero-geo-search .hero-geo-icon-1 { left: -8.4375%; top: 34.943%; animation: hero-geo-icon-in 1s linear 0s both; }
#hero-geo-search .hero-geo-icon-2 { left: 6.1458%;  top: 36.667%; animation: hero-geo-icon-in 1s linear .08s both; }
#hero-geo-search .hero-geo-icon-3 { left: 23.854%;  top: 36.092%; animation: hero-geo-icon-in 1s linear .3s both; }
#hero-geo-search .hero-geo-icon-4 { left: 41.5625%; top: 32.644%; animation: hero-geo-icon-in 1s linear .55s both; }
#hero-geo-search .hero-geo-icon-5 { left: 88.594%;  top: -5.517%; animation: hero-geo-icon-in 1s linear 1.46s both; }
#hero-geo-search .hero-geo-icon-6 { left: 76.458%;  top: 6.207%;  animation: hero-geo-icon-in 1s linear 1.15s both; }

/* central "AI search" icon — stays in position, grows in then settles sharp */
#hero-geo-search .hero-geo-ai {
	position: absolute;
	left: 63.802%;
	top: 38.966%;
	width: 12.5%;
	aspect-ratio: 1 / 1;
	z-index: 2;
	animation: hero-geo-ai-in 1.2s linear .91s both;
	backface-visibility: hidden;
	will-change: transform, opacity, filter;
	pointer-events: none;
}

#hero-geo-search .hero-geo-ai-halo {
	position: absolute;
	left: -34%;
	top: -34%;
	width: 168%;
	height: 168%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(134, 220, 240, 0.35) 0%, rgba(134, 220, 240, 0) 70%);
	opacity: 0;
	animation:
		hero-geo-halo 5s ease-in-out infinite,
		hero-geo-rays-on 1.1s ease-out 1.36s both;
}

#hero-geo-search .hero-geo-ai-img {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 10px 16px rgba(4, 16, 44, 0.5)) drop-shadow(0 0 14px rgba(134, 220, 240, 0.45));
}

/* copy panel — sized/padded as a share of the 1920px design canvas so it
   (and its copy below) scales down in proportion on narrower desktop
   widths instead of staying a fixed px size while the canvas shrinks
   around it, then caps at the exact mockup values at 1920px+ */
#hero-geo-search .hero-geo-panel {
	position: absolute;
	left: 16.25%;
	top: 18.046%;
	width: clamp(460px, 35.417vw, 680px);
	padding: clamp(24px, 2.604vw, 50px);
	border-radius: 20px;
	background: linear-gradient(rgba(0, 102, 255, 0.576), rgba(0, 50, 126, 0.58));
	box-shadow: 0 53px 120px 0 rgba(2, 10, 30, 0.498);
	backdrop-filter: blur(12px) saturate(1) brightness(0.7);
	-webkit-backdrop-filter: blur(12px) saturate(1) brightness(0.7);
	animation: hero-geo-panel-in 1s cubic-bezier(.2,.7,.2,1) 0.5s both;
	z-index: 3;
}

#hero-geo-search .hero-geo-eyebrow {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-bottom: 35px;
	animation: hero-geo-line-up .7s ease-out 0.75s both;
}

#hero-geo-search .hero-geo-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #6ED6A5;
	box-shadow: 0 0 16px #6ED6A5;
	flex-shrink: 0;
}

#hero-geo-search .hero-geo-eyebrow span:last-child {
	font: 500 clamp(13px, 0.8854vw, 17px)/1 Poppins, sans-serif;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: #34B759;
}

#hero-geo-search .hero-geo-title {
	margin: 0 0 27px;
	font: 500 clamp(36px, 4.6875vw, 90px)/1.111 Poppins, sans-serif;
	letter-spacing: -0.028em;
	color: #fff;
	animation: hero-geo-line-up .8s cubic-bezier(.2,.7,.2,1) 0.85s both;
}

#hero-geo-search .hero-geo-title-accent {
	background: linear-gradient(96deg, #86DCF0, #6ED6A5);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

#hero-geo-search .hero-geo-subtitle {
	margin: 0 0 35px;
	font: 400 clamp(15px, 1.0417vw, 20px)/1.4 "Open Sans", sans-serif;
	color: #fff;
	animation: hero-geo-line-up .8s cubic-bezier(.2,.7,.2,1) 1s both;
}

#hero-geo-search .hero-geo-ctas {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 21px;
	animation: hero-geo-line-up .8s cubic-bezier(.2,.7,.2,1) 1.15s both;
}

#hero-geo-search .hero-geo-cta-primary,
#hero-geo-search .hero-geo-cta-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 0.8333vw, 16px) clamp(28px, 2.604vw, 50px);
	border-radius: 13px;
	text-decoration: none;
	font: 700 clamp(14px, 1.0417vw, 20px)/1.45 "Open Sans", sans-serif;
	text-transform: uppercase;
}

#hero-geo-search .hero-geo-cta-primary {
	background: linear-gradient(91deg, #34C759 0.06%, #345DC7 99.94%);
	color: #fff;
	box-shadow: 0 19px 45px rgba(43, 85, 200, 0.5);
}

#hero-geo-search .hero-geo-cta-primary:hover {
	color: #fff;
	opacity: 0.92;
}

#hero-geo-search .hero-geo-cta-secondary {
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #fff;
}

#hero-geo-search .hero-geo-cta-secondary:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.6);
}

/* replay control — hidden for now; markup + hero-geo.js handler are kept,
   so removing the display:none below brings it back */
#hero-geo-search .hero-geo-replay {
	display: none !important;
	position: absolute;
	right: 24px;
	bottom: 20px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(4, 15, 40, 0.4);
	color: rgba(255, 255, 255, 0.7);
	font: 600 12px/1 "Open Sans", sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	appearance: none;
}

#hero-geo-search .hero-geo-replay svg {
	width: 14px;
	height: 14px;
}

#hero-geo-search .hero-geo-replay:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.5);
}

/* keyframes */
@keyframes hero-geo-bloom {
	0%, 100% { opacity: 0.45; transform: scale(0.94); }
	50%      { opacity: 1;    transform: scale(1.06); }
}

@keyframes hero-geo-halo {
	0%, 100% { opacity: 0.5;  transform: scale(1); }
	50%      { opacity: 0.95; transform: scale(1.06); }
}

@keyframes hero-geo-rays-on {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes hero-geo-trace {
	0%   { stroke-dashoffset: 1960; }
	100% { stroke-dashoffset: 0; }
}

@keyframes hero-geo-panel-in {
	0%   { opacity: 0; transform: translateX(-26px) scale(0.985); filter: blur(4.5px); }
	100% { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes hero-geo-line-up {
	0%   { opacity: 0; transform: translateY(16px); }
	100% { opacity: 1; transform: none; }
}

/* icons stay put (no translate) — grow in with a slight overshoot "pop",
   then settle down into their soft, blurred resting look */
@keyframes hero-geo-icon-in {
	0%      { transform: scale(0.56); opacity: 0; filter: blur(0); }
	8.333%  { transform: scale(0.56); opacity: 0; filter: blur(0); animation-timing-function: cubic-bezier(.34, 1.5, .64, 1); }
	50%     { transform: scale(0.784); opacity: 1; filter: blur(0); animation-timing-function: cubic-bezier(.4, 0, .3, 1); }
	100%    { transform: scale(0.7); opacity: 0.7; filter: blur(4px); }
}

/* the AI icon stays put too — grows in from a soft blur to its sharp,
   fully-scaled resting state, no overshoot-settle needed since it doesn't
   stay blurred at rest */
@keyframes hero-geo-ai-in {
	0%      { transform: scale(1.722); opacity: 0; filter: blur(8px); }
	8.333%  { transform: scale(1.722); opacity: 0; filter: blur(8px); animation-timing-function: cubic-bezier(.34, 1.5, .64, 1); }
	50%     { transform: scale(2.1); opacity: 1; filter: blur(0); }
	100%    { transform: scale(2.1); opacity: 1; filter: blur(0); }
}

@keyframes hero-geo-fade-in {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

/* below this width, drop the absolute "floating canvas" layout for a
   simple stacked, centered hero — the choreographed icons don't hold up
   at small sizes and the fixed 1920x870 canvas math no longer applies */
/* the full canvas (panel + background icons + AI magnifying glass side by
   side) scales fluidly via the clamp()/vw-based sizing above and holds up
   fine down to tablet-landscape width; only below that does the panel's
   fixed-floor sizing outgrow the aspect-ratio canvas's height, so that's
   where we switch to the simplified stacked layout */
@media (max-width: 767.98px) {

	#hero-geo-search .hero-geo-canvas {
		aspect-ratio: auto;
		padding: 72px 0 56px;
	}

	/* the desktop stage locks a 1920:870 ratio and centers itself via
	   position:absolute -- undo that here so .hero-geo-ai (the only child
	   still shown) lays out normally inside the padded, auto-height canvas */
	#hero-geo-search .hero-geo-stage {
		position: static;
		aspect-ratio: auto;
		transform: none;
	}

	#hero-geo-search .hero-geo-glow,
	#hero-geo-search .hero-geo-lines,
	#hero-geo-search .hero-geo-icon {
		display: none;
	}

	#hero-geo-search .hero-geo-ai {
		position: relative;
		left: auto;
		top: auto;
		width: 160px;
		margin: 0 auto 32px;
		/* the desktop resting scale(2.1) is tuned for the large
		   absolute-positioned canvas version — reset it here so the icon
		   doesn't blow past its 160px box */
		transform: none;
		animation: hero-geo-fade-in .8s ease .3s both;
	}

	#hero-geo-search .hero-geo-panel {
		position: relative;
		left: auto;
		top: auto;
		width: auto;
		max-width: 640px;
		margin: 0 auto;
		padding: 32px;
	}

	#hero-geo-search .hero-geo-title {
		font-size: clamp(34px, 8vw, 48px);
	}

	#hero-geo-search .hero-geo-subtitle {
		font-size: 17px;
	}

	#hero-geo-search .hero-geo-cta-primary,
	#hero-geo-search .hero-geo-cta-secondary {
		padding: 14px 32px;
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#hero-geo-search .hero-geo-glow,
	#hero-geo-search .hero-geo-ai-halo,
	#hero-geo-search .hero-geo-line,
	#hero-geo-search .hero-geo-icon,
	#hero-geo-search .hero-geo-ai,
	#hero-geo-search .hero-geo-panel,
	#hero-geo-search .hero-geo-eyebrow,
	#hero-geo-search .hero-geo-title,
	#hero-geo-search .hero-geo-subtitle,
	#hero-geo-search .hero-geo-ctas {
		animation: none !important;
	}

	#hero-geo-search .hero-geo-icon {
		filter: blur(4px);
		opacity: 0.7;
	}

	#hero-geo-search .hero-geo-ai {
		opacity: 1;
	}
}

/* the resting scale(2.1)/scale(0.7) above only applies at the desktop
   breakpoint — on mobile the icons are hidden and .hero-geo-ai is reset to
   a plain 160px box (see the max-width:767.98px block), so forcing the
   large scale there under reduced-motion would blow past that box again */
@media (prefers-reduced-motion: reduce) and (min-width: 768px) {
	#hero-geo-search .hero-geo-icon {
		transform: scale(0.7);
	}

	#hero-geo-search .hero-geo-ai {
		transform: scale(2.1);
	}

	#hero-geo-search .hero-geo-ai-halo {
		opacity: 0.5;
	}
}