/* ==========================================================================
   Hero Constellation Background — front-end styles
   Four layers, all optional:
     wash   ::before  drifting radial colour wash
     grid   canvas bg  fine dot grid, drawn as a CSS gradient so it stays
                       sharp at any pixel density
     canvas            constellation + orbiting hub + motes (see hcb.js)
     fade   ::after    vertical gradient that blends the section out
   ========================================================================== */

.hcb-host {
	position: relative;
	/* Traps the -1 layer inside this section so it cannot slide behind the
	   section's own background. */
	isolation: isolate;
}

.hcb {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	z-index: -1 !important;
	display: block !important;
	overflow: hidden !important;
	pointer-events: none !important;
	border-radius: inherit;
	opacity: var(--hcb-opacity, 1);
}

/* A shortcode layer sits in the widget until the script moves it into the
   section. Hide it for that one frame. */
.hcb[data-hcb-mount]:not([data-hcb-ready]) {
	opacity: 0;
}

.hcb__canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--hcb-mask-top, 9%), #000 var(--hcb-mask-bottom, 91%), transparent 100%);
	        mask-image: linear-gradient(to bottom, transparent 0, #000 var(--hcb-mask-top, 9%), #000 var(--hcb-mask-bottom, 91%), transparent 100%);
}

/* --------------------------------------------------------------- dot grid */

.hcb--grid .hcb__canvas {
	background-image: radial-gradient(rgba(var(--hcb-c1-rgb, 47, 111, 237), var(--hcb-grid-alpha, .14)) 1px, transparent 1.2px);
	background-size: var(--hcb-grid-size, 26px) var(--hcb-grid-size, 26px);
	background-position: 0 0;
}

/* ------------------------------------------------------------- colour wash */

.hcb--wash::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: 0;
	pointer-events: none;
	opacity: var(--hcb-wash-opacity, 1);
	background:
		radial-gradient(42% 70% at  -6% 44%, rgba(var(--hcb-c1-rgb), .22), rgba(var(--hcb-c1-rgb), 0) 72%),
		radial-gradient(42% 70% at 106% 44%, rgba(var(--hcb-c2-rgb), .22), rgba(var(--hcb-c2-rgb), 0) 72%),
		radial-gradient(58% 52% at  16% 46%, rgba(var(--hcb-c2-rgb), .20), rgba(var(--hcb-c2-rgb), 0) 72%),
		radial-gradient(56% 48% at  84% 74%, rgba(var(--hcb-c1-rgb), .19), rgba(var(--hcb-c1-rgb), 0) 72%),
		radial-gradient(70% 46% at  50% 104%, rgba(var(--hcb-c2-rgb), .24), rgba(var(--hcb-c2-rgb), 0) 74%),
		radial-gradient(52% 46% at  52% 112%, rgba(var(--hcb-c3-rgb), .16), rgba(var(--hcb-c3-rgb), 0) 72%);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 20%, #000 48%);
	        mask-image: linear-gradient(to bottom, transparent 0, transparent 20%, #000 48%);
	animation: hcb-drift var(--hcb-wash-speed, 20s) ease-in-out infinite alternate;
	will-change: transform;
}

@keyframes hcb-drift {
	from { transform: translate3d(-5%, -3%, 0) scale(1.10); }
	to   { transform: translate3d(5%, 3%, 0) scale(1.20); }
}

/* ------------------------------------------------------------- bottom fade */

.hcb--fade::after {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: 1;
	pointer-events: none;
	background-image: linear-gradient(
		to bottom,
		rgba(var(--hcb-fade-rgb), 0) 0%,
		rgba(var(--hcb-c1-rgb), .06) 30%,
		rgba(var(--hcb-c2-rgb), .06) 62%,
		rgba(var(--hcb-fade-rgb), .80) 90%,
		rgba(var(--hcb-fade-rgb), 1) 100%
	);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: 0 0;
}

/* ---------------------------------------------------------- reduced motion */
/* The artwork stays, the movement stops. */

@media (prefers-reduced-motion: reduce) {
	.hcb--wash::before {
		animation: none;
	}
}