/* Reusable hero-section overlays. */

.hero-sections-constellation-pen {
	--hero-constellation-color: rgba(255, 250, 240, 0.78);
	--hero-constellation-dot: rgba(255, 250, 240, 0.82);
	--hero-constellation-glow: rgba(255, 250, 240, 0.24);
	--hero-constellation-line: rgba(255, 250, 240, 0.42);
	--hero-constellation-line-width: 1.4;
	--hero-constellation-ambient-star: var(--hero-constellation-dot);
	--hero-constellation-ambient-glow: rgba(255, 250, 240, 0.18);
	--hero-constellation-pen-size: clamp(1.9rem, 2.5vw, 3.4rem);
	color: var(--hero-constellation-color);
	contain: layout style;
	height: 100%;
	inset: 0;
	opacity: 0.9;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	transform: translateZ(0);
	will-change: opacity;
	width: 100%;
	z-index: 1;
}

.hero-sections-constellation-pen__stage {
	display: block;
	height: 100%;
	overflow: visible;
	width: 100%;
}

.hero-sections-constellation-pen__scene {
	opacity: 1;
	transition: opacity 680ms ease;
}

.hero-sections-constellation-pen__scene.is-fading {
	opacity: 0;
}

.hero-sections-constellation-pen__ambient-star {
	--hero-ambient-star-opacity: 1;
	--hero-ambient-star-scale: 1;
	fill: var(--hero-constellation-ambient-star);
	filter: drop-shadow(0 0 0.42rem var(--hero-constellation-ambient-glow));
	opacity: 0;
	transform: scale(0.42);
	transform-box: fill-box;
	transform-origin: center;
	transition:
		opacity 760ms ease,
		transform 920ms cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

.hero-sections-constellation-pen__ambient-star.is-visible {
	opacity: var(--hero-ambient-star-opacity);
	transform: scale(var(--hero-ambient-star-scale));
}

.hero-sections-constellation-pen__ambient-star.is-suppressed {
	opacity: 0;
	transition-duration: 260ms;
}

.hero-sections-constellation-pen__line {
	fill: none;
	opacity: 0.92;
	stroke: var(--hero-constellation-line);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: var(--hero-constellation-line-width);
	vector-effect: non-scaling-stroke;
}

.hero-sections-constellation-pen__dot {
	fill: var(--hero-constellation-dot);
	filter: drop-shadow(0 0 0.55rem var(--hero-constellation-glow));
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	transition:
		opacity 180ms ease,
		transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-sections-constellation-pen__dot.is-visible {
	opacity: 1;
	transform: scale(1);
}

.hero-sections-constellation-pen__dot:not(.is-visible) {
	transform: scale(0.38);
}

.hero-sections-constellation-pen__dot.is-active {
	transform: scale(1.42);
}

.hero-sections-constellation-pen__tool {
	filter: drop-shadow(0 0.7rem 1.4rem rgba(0, 0, 0, 0.28));
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	transition: opacity 180ms ease;
	will-change: transform, opacity;
}

.hero-sections-constellation-pen.is-running .hero-sections-constellation-pen__tool,
.hero-sections-constellation-pen.is-static .hero-sections-constellation-pen__tool {
	opacity: 1;
}

.hero-sections-constellation-pen.is-tool-hidden .hero-sections-constellation-pen__tool {
	opacity: 0;
}

.hero-sections-constellation-pen__tool-icon {
	transform-box: fill-box;
	transform-origin: center;
}

.hero-sections-constellation-pen__tool-body,
.hero-sections-constellation-pen__tool-accent {
	fill: currentColor;
}

.hero-sections-constellation-pen__tool-accent {
	opacity: 0.58;
}

.ibenlo-light-mode .hero-sections-constellation-pen,
body.ibenlo-light-mode .hero-sections-constellation-pen {
	--hero-constellation-color: rgba(44, 38, 70, 0.68);
	--hero-constellation-dot: rgba(44, 38, 70, 0.72);
	--hero-constellation-glow: rgba(44, 38, 70, 0.18);
	--hero-constellation-line: rgba(44, 38, 70, 0.34);
	--hero-constellation-ambient-star: var(--hero-constellation-dot);
	--hero-constellation-ambient-glow: rgba(44, 38, 70, 0.12);
}

@media (max-height: 560px) {
	.hero-sections-constellation-pen {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-sections-constellation-pen {
		opacity: 0.58;
	}

	.hero-sections-constellation-pen__dot,
	.hero-sections-constellation-pen__ambient-star,
	.hero-sections-constellation-pen__tool {
		transition: none;
	}
}