/* =============================================================================
   Neo Money Transfer — Hero Map Band (full-width)
   Loaded conditionally on front-page.php when the globe toggle is enabled.
   Lives below the hero text as a full-width horizontal band.
   ============================================================================= */

.neo-globe-container { width: 100%; }

/* Full-width banner — native 1040:540 aspect ratio preserves pin positions.
   Overflow hidden clips flight arcs/money icons that drift past edges. */
.neo-globe-banner {
	position: relative;
	width: 100%;
	aspect-ratio: 1040 / 540;
	min-height: 320px;
	max-height: 860px;
	overflow: hidden;
	background: radial-gradient(
		ellipse at 50% 35%,
		#2a1150 0%,
		#1a0a2e 55%,
		#0d0520 100%
	);
	box-shadow: inset 0 40px 80px -40px rgba(0,0,0,.4),
	            inset 0 -40px 80px -40px rgba(0,0,0,.5);
}

/* Mobile — more vertical presence on narrow screens where aspect ratio
   would make the map tiny. */
@media (max-width: 767px) {
	.neo-globe-banner {
		aspect-ratio: auto;
		min-height: 380px;
	}
}

.neo-globe-banner svg {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
}

.neo-globe-map {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	/* object-fit: contain matches the SVG's preserveAspectRatio=meet.
	   Both scale together to fit inside the container while preserving
	   their native 1040:540 aspect ratio. Pins stay aligned because
	   they use the same coordinate system as the map image. */
	object-fit: contain;
	object-position: center;
	opacity: .85;
}

/* ---------- ANIMATIONS ---------- */
@keyframes neo-globe-drift {
	from { transform: translateX(0); }
	to   { transform: translateX(50px); }
}
.neo-globe-banner .neo-globe-cloud    { animation: neo-globe-drift 14s ease-in-out infinite alternate; }
.neo-globe-banner .neo-globe-cloud.c2 { animation-duration: 18s; animation-delay: -4s; }

@keyframes neo-globe-pulse {
	0%   { r: 4;  opacity: .7; }
	100% { r: 14; opacity: 0; }
}
.neo-globe-banner .neo-globe-pin-pulse {
	animation: neo-globe-pulse 2.2s ease-out infinite;
}

@keyframes neo-globe-hubpulse {
	0%   { r: 14; opacity: .75; stroke-width: 3; }
	100% { r: 60; opacity: 0;   stroke-width: .5; }
}
.neo-globe-banner .neo-globe-hub-pulse    { animation: neo-globe-hubpulse 2.6s ease-out infinite; }
.neo-globe-banner .neo-globe-hub-pulse.d2 { animation-delay: .8s; }
.neo-globe-banner .neo-globe-hub-pulse.d3 { animation-delay: 1.6s; }

@keyframes neo-globe-drop {
	0%   { transform: translateY(-14px) scale(.3); opacity: 0; }
	70%  { transform: translateY(2px)  scale(1.08); opacity: 1; }
	100% { transform: translateY(0)    scale(1);    opacity: 1; }
}
.neo-globe-banner .neo-globe-pin {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	animation: neo-globe-drop .7s cubic-bezier(.2,1.4,.3,1) both;
}

.neo-globe-banner .neo-globe-money {
	offset-rotate: 0deg;
	offset-distance: 0%;
}
@keyframes neo-globe-flyin {
	0%   { offset-distance: 0%;   opacity: 0; transform: scale(.3); }
	10%  { opacity: 1; transform: scale(1); }
	90%  { opacity: 1; transform: scale(1); }
	100% { offset-distance: 100%; opacity: 0; transform: scale(.3); }
}

@keyframes neo-globe-hb {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.1); }
}
.neo-globe-banner .neo-globe-hub-core {
	transform-box: fill-box;
	transform-origin: center bottom;
	animation: neo-globe-hb 2s ease-in-out infinite;
}

@keyframes neo-globe-nepalglow {
	0%, 100% { filter: drop-shadow(0 0 0 rgba(254,162,55,0)); }
	50%      { filter: drop-shadow(0 0 14px rgba(254,162,55,.95)); }
}
.neo-globe-banner .neo-globe-nepal-star {
	animation: neo-globe-nepalglow 2.4s ease-in-out infinite;
}

/* ---------- RESPONSIVE ---------- */
/* Hero is .hidden .lg:flex — globe only shows at lg+ (1024px+).
   No additional breakpoints needed; Tailwind's lg breakpoint handles the hide. */

/* On very narrow viewports hide decorative clouds to reduce clutter */
@media (max-width: 480px) {
	.neo-globe-banner .neo-globe-cloud { display: none; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	.neo-globe-banner .neo-globe-cloud,
	.neo-globe-banner .neo-globe-pin-pulse,
	.neo-globe-banner .neo-globe-hub-pulse,
	.neo-globe-banner .neo-globe-hub-core,
	.neo-globe-banner .neo-globe-money,
	.neo-globe-banner .neo-globe-nepal-star {
		animation: none !important;
	}
}