/**
 * Hero globe: the full-bleed treatment.
 *
 * assets/css/site.css is generated by the Next.js Tailwind build and there is no
 * build step in this theme, so new utilities cannot be added there. The hero's
 * globe geometry is therefore written by hand here.
 *
 * Every selector is prefixed with :root, because the generated utilities are
 * emitted that way too (`:root .relative{position:relative}`). Without it these
 * rules lose to the utility classes on the same element however late the file
 * loads.
 *
 * The composite has to keep the artwork's native 1600:1146 ratio. The gold
 * routes, the arrival dots and the hub rings are all positioned in that
 * picture's own coordinate space, so stretching the box to another ratio would
 * slide them off the continents. Pinning it to the full height of the hero and
 * anchoring it right therefore sets the width; whatever runs past the left is
 * faded out by the mask, and the section's overflow-hidden clips the rest.
 */

:root .nd-hero-globe {
	animation-delay: 300ms;
}

@media (min-width: 1024px) {
	:root .nd-hero-globe {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
		width: auto;
		margin-top: 0;
		aspect-ratio: 1600 / 1146;
	}

	:root .nd-hero-globe .nd-globe-mask-y,
	:root .nd-hero-globe .nd-globe-mask-x,
	:root .nd-hero-globe .nd-globe-frame {
		height: 100%;
	}

	/* The fade is measured in vw from the right edge, not in percentages of the
	   element. The element's width follows the hero's height, so a percentage
	   would land somewhere different at every viewport -- at 1024px it put the
	   opaque edge under the headline. In vw it stays put: solid from 56vw
	   rightwards, which clears the 7/12 copy column at every desktop width, and
	   gone by 24vw. */
	:root .nd-hero-globe .nd-globe-mask-x {
		-webkit-mask-image: linear-gradient(to left, #000 0, #000 44vw, transparent 76vw);
		mask-image: linear-gradient(to left, #000 0, #000 44vw, transparent 76vw);
	}

	:root .nd-hero-globe .nd-globe-mask-y {
		-webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 88%, transparent);
		mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 88%, transparent);
	}
}