/* ==========================================================================
   Avarida Group — hero globe (homepage only).

   Sits behind the hero copy as ambient brand atmosphere, bottom-anchored and
   deliberately cropped by the section edge. `.avarida-hero__inner` is lifted
   above it so the headline, CTAs and dashboard mockup always stay clickable;
   the exposed globe area below/around them remains draggable.
   ========================================================================== */

.avarida-hero { position: relative; }

/* Keep the real hero content above the canvas. */
.avarida-hero__inner { position: relative; z-index: 1; }

.avarida-globe {
	position: absolute;
	bottom: -22%;
	left: 50%;
	transform: translateX( -50% );
	width: min( 46rem, 88vw );
	aspect-ratio: 1 / 1;
	z-index: 0;
	pointer-events: none; /* re-enabled on the canvas itself */
	contain: layout paint size;
}

.avarida-globe__canvas {
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 700ms ease;
	cursor: grab;
	pointer-events: auto;
	touch-action: pan-y; /* let vertical page scrolling win over horizontal spin */
	contain: layout paint size;
}

/* Fade the globe out toward the top so it never muddies the headline. */
.avarida-globe::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient( 180deg, var( --background, #fff ) 0%, transparent 42% );
}

html[data-theme="dark"] .avarida-globe::after {
	background: linear-gradient( 180deg, var( --background, #0b0910 ) 0%, transparent 42% );
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media ( max-width: 1024px ) {
	.avarida-globe { bottom: -16%; width: min( 34rem, 92vw ); opacity: 0.7; }
}

/* The script already bails out under 640px; this is belt-and-braces so the
   element can never contribute layout on phones. */
@media ( max-width: 639px ) {
	.avarida-globe { display: none; }
}

@media ( prefers-reduced-motion: reduce ) {
	.avarida-globe { display: none; }
}