/* Graviteit Starfield — a twinkling-stars background layer.
   Mirrors the /wie bubble-field stars (team-cloud.css) but stands alone and is
   tunable per widget. Colour comes from --gft-sf-color, peak brightness from
   --gft-sf-peak; both are written by the widget's style controls. */

/* The Elementor widget wrapper becomes the full-fill background layer. Its
   container is position:relative by default, so inset:0 pins it to the section.
   pointer-events:none keeps clicks flowing through to the real content. */
.elementor-widget-gft_starfield {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0 !important;
	width: auto;
	pointer-events: none;
	overflow: hidden;
}

/* Lift every other direct child of the hosting container above the stars, so
   the starfield is a background and never covers the section's content. */
.e-con:has(> .elementor-widget-gft_starfield) > .elementor-element:not(.elementor-widget-gft_starfield),
.e-con-inner:has(> .elementor-widget-gft_starfield) > .elementor-element:not(.elementor-widget-gft_starfield) {
	position: relative;
	z-index: 1;
}

.gft-sf {
	--gft-sf-color: #eef2fb;
	--gft-sf-peak: 0.7;
	/* The Graviteit 4-point star, masked so --gft-sf-color fills the shape. */
	--gft-sf-star: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0OTAuODQgNDkwLjg0Jz48cGF0aCBkPSdNMzY4LjMzLDE4NC4zNmwxMjIuNSw2MS4wNi0xMjIuNSw2MS4wNmMtMjYuNzksMTMuMzUtNDguNSwzNS4wNy02MS44Niw2MS44NmwtNjEuMDYsMTIyLjUtNjEuMDYtMTIyLjVjLTEzLjM1LTI2Ljc5LTM1LjA3LTQ4LjUtNjEuODYtNjEuODZMMCwyNDUuNDJsMTIyLjUtNjEuMDZjMjYuNzktMTMuMzUsNDguNS0zNS4wNyw2MS44Ni02MS44NkwyNDUuNDIsMGw2MS4wNiwxMjIuNWMxMy4zNSwyNi43OSwzNS4wNyw0OC41LDYxLjg2LDYxLjg2WicvPjwvc3ZnPg==");
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}
.gft-sf-layer { position: absolute; inset: 0; }

.gft-sf-star {
	position: absolute;
	background-color: var(--gft-sf-color);
	-webkit-mask: var(--gft-sf-star) center / contain no-repeat;
	        mask: var(--gft-sf-star) center / contain no-repeat;
	transform: translate(-50%, -50%);
	opacity: 0;
	animation: gft-sf-twinkle var(--dur, 5s) ease-in-out infinite;
	animation-delay: var(--delay, 0s);
}
@keyframes gft-sf-twinkle {
	0%, 100% { opacity: 0.05; }
	50%      { opacity: var(--gft-sf-peak, 0.7); }
}

/* "Glint" = the star pops + gives a slow quarter-turn as it peaks, so it
   sparkles rather than just fading. Off = a plain opacity twinkle. */
.gft-sf-star--glint {
	animation-name: gft-sf-twinkle-glint;
}
@keyframes gft-sf-twinkle-glint {
	0%, 100% { opacity: 0.05; transform: translate(-50%, -50%) scale(0.7)  rotate(0deg); }
	50%      { opacity: var(--gft-sf-peak, 0.7); transform: translate(-50%, -50%) scale(1.06) rotate(18deg); }
}

@media (prefers-reduced-motion: reduce) {
	.gft-sf-star { animation: none; opacity: 0.3; transform: translate(-50%, -50%); }
}