/*
 * [besitos_globe]: one full-bleed charcoal band with the blue glow, the header at the top
 * left and the globe's stage below it. Colours and the glow are the design's "Charcoal +
 * blue glow"; fonts and the heading's size come from the site.
 */

.besitos-globe {
	/* Lines up with the page's other left-aligned headings: they sit at the edge of a 1440px
	   boxed container with 64px of padding each side, so the inset stays 64px until the
	   viewport passes 1568px and then follows the container's margin. */
	--besitos-globe-inset: max(64px, calc(50vw - 720px));
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	background: #1B2028;
	overflow: hidden;
	color: #fff;
}

/* Across the whole section, so the header sits in the same light as the globe. */
.besitos-globe__glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse 45% 75% at 50% 78%, rgba(60, 125, 234, 0.42) 0%, rgba(60, 125, 234, 0.14) 45%, rgba(60, 125, 234, 0) 75%);
}

.besitos-globe__header {
	position: relative;
	z-index: 1;
	padding: 64px var(--besitos-globe-inset) 0;
}

.besitos-globe__heading {
	margin: 0;
	color: #fff;
}

.besitos-globe__heading span {
	color: #3C7DEA;
}

.besitos-globe__intro {
	max-width: 768px;
	margin: 20px 0 0;
	color: rgba(255, 255, 255, 0.8);
	font-size: 18px;
	line-height: 28px;
	letter-spacing: -0.01em;
}

.besitos-globe__notice {
	position: relative;
	z-index: 1;
	margin: 16px var(--besitos-globe-inset) 0;
	padding: 8px 12px;
	border-left: 3px solid #E3AE3E;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 14px;
	line-height: 20px;
}

/* Starts below the header in normal flow, so the globe's lit surface and pins never sit
   under it; only the canvas's transparent top (below) reaches behind the header. */
.besitos-globe__stage {
	position: relative;
	height: clamp(300px, 34vw, 480px);
	margin-top: 8px;
}

.besitos-globe__stars {
	position: absolute;
	left: 0;
	bottom: 0;
	opacity: 0.35;
	pointer-events: none;
}

/* The compact framing puts the atmosphere's rim at the stage's top edge. In the design that
   edge was the band's; here the header sits above it, so the canvas reaches up behind the
   header (which stays on top) and the rim is drawn whole. globe.js reads the extra height. */
.besitos-globe__stage canvas:not(.besitos-globe__stars) {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: calc(100% + 120px);
	pointer-events: none;
}

.besitos-globe__credit {
	display: none;
	position: absolute;
	right: 14px;
	bottom: 10px;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.55);
}

/* The credit is only shown once the globe is actually drawn (no WebGL: no imagery). */
.besitos-globe.is-live .besitos-globe__credit {
	display: block;
}

@media (max-width: 1024px) {
	.besitos-globe {
		--besitos-globe-inset: 30px;
	}
}