/* Aera helix page background - template-parts/helix-bg.php
   Fixed top-right behind the page; assets/js/aera-helix.js mounts the helix in #helixMount. */

.aera-helix-bg {
	position: fixed;
	top: 0;
	right: max(0px, calc((100% - 1320px) / 2));
	width: 849px;
	height: 859px;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	-webkit-mask: radial-gradient(160% 150% at 74% 26%, #000 82%, transparent 100%);
	        mask: radial-gradient(160% 150% at 74% 26%, #000 82%, transparent 100%);
}

.aera-helix-bg #helixMount {
	position: relative;
	width: 1000px;
	height: 760px;
	opacity: 0.72;
	-webkit-mask: linear-gradient(to bottom, #000 70%, transparent 99%);
	        mask: linear-gradient(to bottom, #000 70%, transparent 99%);
}

/* Helix centred on tablets and phones */
@media (max-width: 1024px) {
	.aera-helix-bg {
		right: auto;
		left: 50%;
		width: 1000px;
		transform: translateX(-50%);
		-webkit-mask: radial-gradient(70% 150% at 50% 26%, #000 70%, transparent 100%);
		        mask: radial-gradient(70% 150% at 50% 26%, #000 70%, transparent 100%);
	}
}

/* Keep the content that follows the helix, and the theme footer, above it.
   :where() keeps this at zero specificity so a section's own positioning wins. */
:where(.aera-helix-bg ~ *),
:where(body:has(.aera-helix-bg) :is(footer, .site-footer)) {
	position: relative;
	z-index: 1;
}