/**
 * Visual lab — header hero (reference: Holon Puzzle Header Idea).
 */

.hp-header-hero {
	--hp-header-nav-height: 70px;
	--hp-header-layout-ratio: 1.3;
	--hp-header-sphere-size: min(
		clamp(14rem, 52vw, 40rem),
		calc((100svh - var(--hp-header-nav-height)) / var(--hp-header-layout-ratio))
	);
	--hp-header-baseline-ratio: 0.78;
	--hp-header-title-shift: 0.1;
	--hp-header-layout-min: calc(var(--hp-header-sphere-size) * var(--hp-header-layout-ratio));
	--hp-header-title-size: calc(var(--hp-header-sphere-size) * 0.096);
	/* Old arc diameter (sphere × 1.45) = new radius from menu junction */
	--hp-header-arc-radius: calc(var(--hp-header-sphere-size) * 1.45);
	--hp-header-arc-text-radius: calc(var(--hp-header-arc-radius) * 1.005);
	/* SVG viewBox scales glyphs — unscale in CSS keeps screen size = font-screen */
	--hp-header-arc-text-radius-ref: calc(40rem * 1.45 * 1.005);
	--hp-header-arc-text-unscale: min(
		3.5,
		calc(var(--hp-header-arc-text-radius-ref) / var(--hp-header-arc-text-radius))
	);
	--hp-header-arc-font-ratio: 0.01373; /* 0.8rem on screen at desktop-max arc */
	--hp-header-arc-font-screen-min: calc(0.8rem - 4pt);
	--hp-header-arc-font-screen: max(
		var(--hp-header-arc-font-screen-min),
		calc(var(--hp-header-arc-text-radius) * var(--hp-header-arc-font-ratio))
	);
	--hp-header-arc-font-size: calc(var(--hp-header-arc-font-screen) * var(--hp-header-arc-text-unscale));
	/* Layout horizon (H/2) within arc box: top at -R, height 2R */
	--hp-header-arc-horizon: calc(
		(var(--hp-header-arc-radius) + (var(--hp-header-layout-min) * 0.5))
		/ (2 * var(--hp-header-arc-radius))
		* 100%
	);
	--hp-header-arc-outer-scale: 1.1;
	--hp-header-arc-glow-color: #ffffff;
	/* Conic: origin synced with title shift; left mask strip at origin x */
	/* Debug: swap top/bottom to #22c55e / #ef4444 */
	--hp-header-conic-top: rgba(216, 215, 212, 0.5);
	--hp-header-conic-bottom: #000000;
	--hp-header-conic-origin-x: calc(var(--hp-header-title-shift) * 100%);

	position: relative;
	isolation: isolate;
	width: 100%;
	min-height: calc(var(--hp-header-nav-height) + var(--hp-header-layout-min));
	overflow-x: clip;
	overflow-y: visible;
}

/* Whole composition shifted down — section still starts at page top (y=0) */
.hp-header-hero__layout {
	position: relative;
	margin-top: var(--hp-header-nav-height);
	min-height: var(--hp-header-layout-min);
	overflow: visible;
}

/* Split background — full layout block */
.hp-header-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: grid;
	grid-template-rows: 1fr 1fr;
}

.hp-header-hero__bg-light {
	background: #ffffff;
}

.hp-header-hero__bg-dark {
	background: #000000;
}

/* Stage: sphere diameter wide, horizon at vertical center of layout */
.hp-header-hero__stage {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: var(--hp-header-sphere-size);
	height: calc(var(--hp-header-sphere-size) * 1.22);
	transform: translate(-50%, calc(var(--hp-header-sphere-size) * -0.5));
	overflow: visible;
}

/* ── Sphere stack (bottom → top) ── */

/* Base — delicate semi-transparent gray disk */
.hp-header-hero__sphere-base {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	z-index: 0;
	background: rgba(168, 168, 166, 0.22);
}

/* Conic — left strip + masked conic (no double-blend on the left) */
.hp-header-hero__sphere-conic {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	z-index: 1;
	pointer-events: none;
}

.hp-header-hero__sphere-conic::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: var(--hp-header-conic-origin-x);
	height: 100%;
	z-index: 1;
	background: linear-gradient(
		to bottom,
		var(--hp-header-conic-top) 0%,
		var(--hp-header-conic-top) 50%,
		var(--hp-header-conic-bottom) 50%,
		var(--hp-header-conic-bottom) 100%
	);
}

.hp-header-hero__sphere-conic::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: conic-gradient(
		from -90deg at var(--hp-header-conic-origin-x) 50%,
		var(--hp-header-conic-top) 0deg,
		var(--hp-header-conic-top) 168deg,
		var(--hp-header-conic-bottom) 192deg,
		var(--hp-header-conic-bottom) 360deg
	);
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		transparent var(--hp-header-conic-origin-x),
		#000 var(--hp-header-conic-origin-x),
		#000 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0%,
		transparent var(--hp-header-conic-origin-x),
		#000 var(--hp-header-conic-origin-x),
		#000 100%
	);
}

/* Back — reserved for future shadow stack */
.hp-header-hero__sphere-back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	z-index: 2;
	background: transparent;
}

/* Front — blur only, no fill */
.hp-header-hero__sphere-front {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	z-index: 3;
	background: transparent;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

/* Inner glow — ring at sphere rim, inward; bottom half via mask */
.hp-header-hero__sphere-inner-glow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	z-index: 4;
	pointer-events: none;
	background:
		radial-gradient(
			circle farthest-side at 50% 50%,
			transparent 0%,
			transparent 96%,
			rgba(235, 234, 231, 0.22) 97.8%,
			rgba(235, 234, 231, 0.55) 98.8%,
			rgba(245, 244, 241, 0.88) 99.5%,
			rgba(245, 244, 241, 1) 100%,
			rgba(245, 244, 241, 0.88) 100.5%,
			rgba(235, 234, 231, 0.55) 101.2%,
			rgba(235, 234, 231, 0.22) 102.2%,
			transparent 103.5%
		);
	filter: blur(7px);
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		transparent 50%,
		rgba(0, 0, 0, 0.1) 58%,
		rgba(0, 0, 0, 0.32) 66%,
		rgba(0, 0, 0, 0.58) 74%,
		rgba(0, 0, 0, 0.82) 84%,
		#000 94%,
		#000 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		transparent 50%,
		rgba(0, 0, 0, 0.1) 58%,
		rgba(0, 0, 0, 0.32) 66%,
		rgba(0, 0, 0, 0.58) 74%,
		rgba(0, 0, 0, 0.82) 84%,
		#000 94%,
		#000 100%
	);
}

/* Arc glow — center at menu junction, radius = old arc diameter */
.hp-header-hero__arc-glow,
.hp-header-hero__arc-glow-outer {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	pointer-events: none;
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		transparent var(--hp-header-arc-horizon),
		rgba(0, 0, 0, 0.1) calc(var(--hp-header-arc-horizon) + 8%),
		rgba(0, 0, 0, 0.32) calc(var(--hp-header-arc-horizon) + 16%),
		rgba(0, 0, 0, 0.58) calc(var(--hp-header-arc-horizon) + 24%),
		rgba(0, 0, 0, 0.82) calc(var(--hp-header-arc-horizon) + 34%),
		#000 calc(var(--hp-header-arc-horizon) + 44%),
		#000 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		transparent var(--hp-header-arc-horizon),
		rgba(0, 0, 0, 0.1) calc(var(--hp-header-arc-horizon) + 8%),
		rgba(0, 0, 0, 0.32) calc(var(--hp-header-arc-horizon) + 16%),
		rgba(0, 0, 0, 0.58) calc(var(--hp-header-arc-horizon) + 24%),
		rgba(0, 0, 0, 0.82) calc(var(--hp-header-arc-horizon) + 34%),
		#000 calc(var(--hp-header-arc-horizon) + 44%),
		#000 100%
	);
}

/* Rim — ring at circumference */
.hp-header-hero__arc-glow {
	z-index: 0;
	border-radius: 50%;
	top: calc(-1 * var(--hp-header-arc-radius));
	width: calc(2 * var(--hp-header-arc-radius));
	height: calc(2 * var(--hp-header-arc-radius));
	background:
		radial-gradient(
			circle farthest-side at 50% 50%,
			transparent 0%,
			transparent 96%,
			rgb(255 255 255 / 0.22) 97.8%,
			rgb(255 255 255 / 0.55) 98.8%,
			rgb(255 255 255 / 0.88) 99.5%,
			var(--hp-header-arc-glow-color) 100%,
			rgb(255 255 255 / 0.88) 100.5%,
			rgb(255 255 255 / 0.55) 101.2%,
			rgb(255 255 255 / 0.22) 102.2%,
			transparent 103.5%
		);
	filter: blur(7px);
}

/* Outer bloom — larger circle, peak aligned to arc rim */
.hp-header-hero__arc-glow-outer {
	z-index: 1;
	border-radius: 50%;
	top: calc(-1 * var(--hp-header-arc-radius) * var(--hp-header-arc-outer-scale));
	width: calc(2 * var(--hp-header-arc-radius) * var(--hp-header-arc-outer-scale));
	height: calc(2 * var(--hp-header-arc-radius) * var(--hp-header-arc-outer-scale));
	background:
		radial-gradient(
			circle farthest-side at 50% 50%,
			transparent 0%,
			transparent 88.5%,
			rgb(255 255 255 / 0.08) 89.2%,
			rgb(255 255 255 / 0.22) 90%,
			rgb(255 255 255 / 0.42) 90.8%,
			rgb(255 255 255 / 0.28) 92.5%,
			rgb(255 255 255 / 0.12) 95%,
			rgb(255 255 255 / 0.04) 97.5%,
			transparent 100%
		);
	filter: blur(10px);
}

/* Arc text — same circle as arc-glow rim (+0.5% radius), front layer */
.hp-header-hero__arc-text-layer {
	position: absolute;
	z-index: 10;
	left: 50%;
	top: calc(-1 * var(--hp-header-arc-text-radius));
	width: calc(2 * var(--hp-header-arc-text-radius));
	height: calc(2 * var(--hp-header-arc-text-radius));
	transform: translateX(-50%);
	pointer-events: none;
}

.hp-header-hero__arc-text {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.hp-header-hero__arc-label {
	fill: #000000;
	font-family: Georgia, "Times New Roman", serif;
	font-size: var(--hp-header-arc-font-size);
	font-weight: 400;
	letter-spacing: 0.38em;
	word-spacing: 0.36em;
	text-transform: uppercase;
}

.hp-header-hero__arc-label--inner {
	transform: translateY(-0.32em);
}

.hp-header-hero__arc-label--outer {
	transform: translateY(0.75em);
}

/* Title — centered in sphere, +10% width shift to the right */
.hp-header-hero__title {
	position: absolute;
	z-index: 7;
	left: 50%;
	top: calc(var(--hp-header-sphere-size) * 0.5);
	margin: 0;
	padding: 0;
	max-width: calc(var(--hp-header-sphere-size) * 0.88);
	font-family: Georgia, "Times New Roman", serif;
	font-size: var(--hp-header-title-size);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.01em;
	color: #000000;
	text-align: center;
	white-space: nowrap;
	transform: translate(
		calc(-50% + var(--hp-header-sphere-size) * var(--hp-header-title-shift)),
		calc(-1em * var(--hp-header-baseline-ratio))
	);
}

/* Lab page — keep page background black; hide cursor noise on preview */
body.hp-visual-lab-page #hp-tubes-canvas,
body.hp-visual-lab-page #hp-cursor-canvas,
body.hp-visual-lab-page #hp-bg-orbs {
	display: none;
}

body.hp-visual-lab-page .hp-main.hp-visual-lab {
	padding-top: 0;
}

body.hp-visual-lab-page .hp-header-hero__bounds {
	position: relative;
	overflow: hidden;
	padding-bottom: var(--hp-lab-section-gap, clamp(5rem, 14vh, 10rem));
}

body.admin-bar.hp-visual-lab-page {
	--hp-header-nav-height: 100px;
}

@media screen and (max-width: 782px) {
	body.admin-bar.hp-visual-lab-page {
		--hp-header-nav-height: 114px;
	}
}

@media (max-width: 720px) {
	.hp-header-hero__arc-label {
		letter-spacing: 0.22em;
		word-spacing: 0.28em;
	}
}

@media (max-width: 420px) {
	.hp-header-hero__arc-label {
		letter-spacing: 0.14em;
		word-spacing: 0.22em;
	}
}