/* ==========================================================================
   CSS Zen Garden — Ethereal Void
   A luminous abyss: nebulae, ghost-light, parallax void geometry.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Outfit:wght@300;400;500;600&display=swap");

/* --------------------------------------------------------------------------
   Custom properties — the void's palette
   -------------------------------------------------------------------------- */
:root {
	--void-abyss: #03010a;
	--void-deep: #0a0618;
	--void-mid: #120c28;
	--void-mist: #1a1235;
	--ether-violet: #8b5cf6;
	--ether-indigo: #6366f1;
	--ether-cyan: #22d3ee;
	--ether-magenta: #e879f9;
	--ether-rose: #f0abfc;
	--ether-ghost: #c4b5fd;
	--ether-white: #f5f3ff;
	--glow-soft: rgba(139, 92, 246, 0.35);
	--glow-hard: rgba(34, 211, 238, 0.45);
	--glow-magenta: rgba(232, 121, 249, 0.4);
	--glass: rgba(18, 12, 40, 0.55);
	--glass-border: rgba(196, 181, 253, 0.18);
	--text-primary: rgba(245, 243, 255, 0.92);
	--text-muted: rgba(196, 181, 253, 0.72);
	--text-dim: rgba(167, 139, 250, 0.55);
	--radius-lg: 1.5rem;
	--radius-xl: 2rem;
	--ease-ethereal: cubic-bezier(0.22, 1, 0.36, 1);
	--font-display: "Cinzel", "Times New Roman", serif;
	--font-body: "Outfit", system-ui, sans-serif;
	--sidebar-w: min(22rem, 100%);
	--content-max: 42rem;
	--page-gutter: clamp(1.25rem, 4vw, 3rem);
}

/* --------------------------------------------------------------------------
   Base / reset-ish
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* scroll-driven animation timeline root */
	scroll-timeline-name: --page-scroll;
	scroll-timeline-axis: block;
	background: var(--void-abyss);
	color-scheme: dark;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--font-body);
	font-weight: 300;
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.75;
	color: var(--text-primary);
	background:
		radial-gradient(ellipse 120% 80% at 10% -10%, rgba(99, 102, 241, 0.22), transparent 50%),
		radial-gradient(ellipse 90% 70% at 90% 10%, rgba(232, 121, 249, 0.16), transparent 45%),
		radial-gradient(ellipse 70% 50% at 50% 100%, rgba(34, 211, 238, 0.1), transparent 55%),
		radial-gradient(circle at 30% 60%, rgba(139, 92, 246, 0.08), transparent 40%),
		linear-gradient(165deg, var(--void-abyss) 0%, var(--void-deep) 40%, #080414 70%, var(--void-abyss) 100%);
	background-attachment: fixed;
	overflow-x: hidden;
	position: relative;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Floating starfield noise via body::before */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 0.55;
	background-image:
		radial-gradient(1px 1px at 8% 12%, rgba(255, 255, 255, 0.9), transparent),
		radial-gradient(1.5px 1.5px at 22% 48%, rgba(34, 211, 238, 0.8), transparent),
		radial-gradient(1px 1px at 41% 18%, rgba(245, 243, 255, 0.7), transparent),
		radial-gradient(1.5px 1.5px at 63% 72%, rgba(232, 121, 249, 0.75), transparent),
		radial-gradient(1px 1px at 78% 28%, rgba(196, 181, 253, 0.85), transparent),
		radial-gradient(2px 2px at 91% 55%, rgba(34, 211, 238, 0.55), transparent),
		radial-gradient(1px 1px at 15% 82%, rgba(255, 255, 255, 0.6), transparent),
		radial-gradient(1px 1px at 55% 38%, rgba(240, 171, 252, 0.7), transparent),
		radial-gradient(1.5px 1.5px at 33% 91%, rgba(139, 92, 246, 0.8), transparent),
		radial-gradient(1px 1px at 70% 8%, rgba(255, 255, 255, 0.5), transparent),
		radial-gradient(1px 1px at 48% 65%, rgba(34, 211, 238, 0.6), transparent),
		radial-gradient(2px 2px at 5% 40%, rgba(232, 121, 249, 0.45), transparent);
	animation: star-drift 80s linear infinite;
	mix-blend-mode: screen;
}

body::after {
	content: "";
	position: fixed;
	inset: -20%;
	pointer-events: none;
	z-index: 0;
	background:
		conic-gradient(from 180deg at 50% 50%,
			transparent 0deg,
			rgba(139, 92, 246, 0.04) 60deg,
			transparent 120deg,
			rgba(34, 211, 238, 0.05) 200deg,
			transparent 280deg,
			rgba(232, 121, 249, 0.04) 340deg,
			transparent 360deg);
	animation: void-spin 120s linear infinite;
	opacity: 0.8;
}

@keyframes star-drift {
	0% { transform: translate3d(0, 0, 0) scale(1); }
	50% { transform: translate3d(-2%, 1.5%, 0) scale(1.05); }
	100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes void-spin {
	to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.04em;
	color: var(--ether-white);
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 0.5rem;
	background: linear-gradient(
		120deg,
		var(--ether-white) 0%,
		var(--ether-cyan) 25%,
		var(--ether-magenta) 50%,
		var(--ether-ghost) 75%,
		var(--ether-white) 100%
	);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: shimmer-text 8s ease-in-out infinite;
	filter:
		drop-shadow(0 0 20px rgba(34, 211, 238, 0.35))
		drop-shadow(0 0 40px rgba(139, 92, 246, 0.25));
}

@keyframes shimmer-text {
	0%, 100% { background-position: 0% center; }
	50% { background-position: 100% center; }
}

h2 {
	font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.5rem);
	font-weight: 400;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0;
	position: relative;
	display: inline-block;
}

h2::after {
	content: "";
	display: block;
	height: 1px;
	margin-top: 0.85rem;
	background: linear-gradient(
		90deg,
		transparent,
		var(--ether-cyan),
		var(--ether-magenta),
		transparent
	);
	box-shadow:
		0 0 12px var(--glow-hard),
		0 0 24px var(--glow-magenta);
	animation: line-pulse 4s ease-in-out infinite;
}

@keyframes line-pulse {
	0%, 100% { opacity: 0.45; transform: scaleX(0.85); }
	50% { opacity: 1; transform: scaleX(1); }
}

h3 {
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.65rem);
	margin: 0 0 1.25rem;
	position: relative;
	padding-left: 1.25rem;
	background: linear-gradient(90deg, var(--ether-ghost), var(--ether-cyan));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	bottom: 0.15em;
	width: 3px;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--ether-cyan), var(--ether-magenta), var(--ether-violet));
	box-shadow:
		0 0 8px var(--glow-hard),
		0 0 16px var(--glow-soft),
		0 0 28px var(--glow-magenta);
	animation: bar-breathe 3.5s ease-in-out infinite;
}

@keyframes bar-breathe {
	0%, 100% { opacity: 0.7; transform: scaleY(0.9); }
	50% { opacity: 1; transform: scaleY(1); }
}

p {
	margin: 0 0 1.15rem;
	color: var(--text-muted);
	max-width: 65ch;
}

p:last-child {
	margin-bottom: 0;
}

abbr {
	text-decoration: none;
	border-bottom: 1px dotted rgba(34, 211, 238, 0.45);
	cursor: help;
	letter-spacing: 0.04em;
	color: var(--ether-ghost);
	transition: color 0.3s var(--ease-ethereal), border-color 0.3s ease, text-shadow 0.3s ease;
}

abbr:hover {
	color: var(--ether-cyan);
	border-bottom-color: var(--ether-cyan);
	text-shadow: 0 0 12px var(--glow-hard);
}

a {
	color: var(--ether-cyan);
	text-decoration: none;
	position: relative;
	background: linear-gradient(90deg, var(--ether-cyan), var(--ether-magenta));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	transition:
		filter 0.35s var(--ease-ethereal),
		text-shadow 0.35s ease,
		letter-spacing 0.35s ease;
	filter: drop-shadow(0 0 0 transparent);
}

a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, var(--ether-cyan), var(--ether-magenta), transparent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s var(--ease-ethereal);
	box-shadow: 0 0 8px var(--glow-hard);
}

a:hover {
	filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.55));
	letter-spacing: 0.02em;
}

a:hover::after {
	transform: scaleX(1);
}

a:focus-visible {
	outline: 2px solid var(--ether-cyan);
	outline-offset: 4px;
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.page-wrapper {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	width: min(100% - var(--page-gutter) * 2, 78rem);
	margin-inline: auto;
	padding: clamp(2rem, 5vw, 4rem) 0 clamp(4rem, 8vw, 7rem);
}

@media (min-width: 960px) {
	.page-wrapper {
		grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
		align-items: start;
		column-gap: clamp(2rem, 4vw, 3.5rem);
	}

	.intro,
	.main {
		grid-column: 1;
	}

	.sidebar {
		grid-column: 2;
		grid-row: 1 / span 2;
		position: sticky;
		top: 1.5rem;
		max-height: calc(100vh - 3rem);
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: rgba(139, 92, 246, 0.4) transparent;
	}
}

/* --------------------------------------------------------------------------
   Glass card primitive (shared through sections)
   -------------------------------------------------------------------------- */
.summary,
.preamble,
.explanation,
.participation,
.benefits,
.requirements,
.sidebar .wrapper {
	position: relative;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border-radius: var(--radius-xl);
	background:
		linear-gradient(145deg, rgba(26, 18, 53, 0.75) 0%, rgba(10, 6, 24, 0.65) 50%, rgba(18, 12, 40, 0.7) 100%),
		radial-gradient(ellipse 80% 60% at 0% 0%, rgba(139, 92, 246, 0.15), transparent 55%),
		radial-gradient(ellipse 70% 50% at 100% 100%, rgba(34, 211, 238, 0.1), transparent 50%);
	border: 1px solid var(--glass-border);
	backdrop-filter: blur(18px) saturate(1.35);
	-webkit-backdrop-filter: blur(18px) saturate(1.35);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.03) inset,
		0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
		0 0 40px -10px rgba(139, 92, 246, 0.35),
		0 0 80px -20px rgba(34, 211, 238, 0.2),
		0 25px 50px -20px rgba(0, 0, 0, 0.65),
		0 10px 20px -10px rgba(0, 0, 0, 0.5);
	overflow: hidden;
	isolation: isolate;
	transform: translateZ(0);
	transition:
		transform 0.55s var(--ease-ethereal),
		box-shadow 0.55s ease,
		border-color 0.45s ease;
}

/* ethereal edge glow via ::before */
.summary::before,
.preamble::before,
.explanation::before,
.participation::before,
.benefits::before,
.requirements::before,
.sidebar .wrapper::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(
		135deg,
		rgba(34, 211, 238, 0.55),
		rgba(139, 92, 246, 0.15) 30%,
		transparent 50%,
		rgba(232, 121, 249, 0.2) 75%,
		rgba(34, 211, 238, 0.4)
	);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	z-index: 2;
	opacity: 0.7;
	animation: border-flow 10s linear infinite;
}

@keyframes border-flow {
	0% { filter: hue-rotate(0deg); opacity: 0.55; }
	50% { opacity: 0.95; }
	100% { filter: hue-rotate(360deg); opacity: 0.55; }
}

/* soft orb inside cards */
.summary::after,
.preamble::after,
.explanation::after,
.participation::after,
.benefits::after,
.requirements::after {
	content: "";
	position: absolute;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	top: -80px;
	right: -60px;
	background:
		radial-gradient(circle, rgba(34, 211, 238, 0.25) 0%, rgba(139, 92, 246, 0.12) 40%, transparent 70%);
	filter: blur(8px);
	pointer-events: none;
	z-index: 0;
	animation: orb-float 9s ease-in-out infinite;
	mix-blend-mode: screen;
}

.participation::after { animation-delay: -2s; top: auto; bottom: -90px; left: -40px; right: auto; }
.benefits::after { animation-delay: -4s; background: radial-gradient(circle, rgba(232, 121, 249, 0.28) 0%, transparent 70%); }
.requirements::after { animation-delay: -6s; }

@keyframes orb-float {
	0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
	33% { transform: translate(-20px, 15px) scale(1.1); opacity: 1; }
	66% { transform: translate(15px, -10px) scale(0.95); opacity: 0.8; }
}

.summary > *,
.preamble > *,
.explanation > *,
.participation > *,
.benefits > *,
.requirements > * {
	position: relative;
	z-index: 1;
}

.summary:hover,
.preamble:hover,
.explanation:hover,
.participation:hover,
.benefits:hover,
.requirements:hover {
	transform: translateY(-4px) scale(1.005);
	border-color: rgba(196, 181, 253, 0.35);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.06) inset,
		0 1px 0 0 rgba(255, 255, 255, 0.1) inset,
		0 0 50px -8px rgba(139, 92, 246, 0.5),
		0 0 100px -15px rgba(34, 211, 238, 0.35),
		0 0 60px -10px rgba(232, 121, 249, 0.25),
		0 30px 60px -20px rgba(0, 0, 0, 0.7),
		0 15px 30px -10px rgba(0, 0, 0, 0.55);
}

/* --------------------------------------------------------------------------
   Intro / header — hero void portal
   -------------------------------------------------------------------------- */
.intro {
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.intro header {
	position: relative;
	text-align: center;
	padding: clamp(3rem, 10vw, 7rem) clamp(1rem, 4vw, 2rem);
	border-radius: calc(var(--radius-xl) + 0.5rem);
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(ellipse 60% 50% at 50% 40%, rgba(99, 102, 241, 0.25), transparent 70%),
		radial-gradient(ellipse 40% 35% at 30% 70%, rgba(232, 121, 249, 0.18), transparent 60%),
		radial-gradient(ellipse 40% 35% at 70% 70%, rgba(34, 211, 238, 0.15), transparent 60%),
		linear-gradient(180deg, rgba(18, 12, 40, 0.9) 0%, rgba(3, 1, 10, 0.5) 100%);
	border: 1px solid rgba(196, 181, 253, 0.2);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.04) inset,
		0 0 60px -10px rgba(139, 92, 246, 0.45),
		0 0 120px -20px rgba(34, 211, 238, 0.25),
		0 40px 80px -30px rgba(0, 0, 0, 0.8),
		0 0 200px -40px rgba(232, 121, 249, 0.2);
	/* clip-path diamond-ish soft portal */
	clip-path: polygon(
		0% 8%,
		4% 0%,
		96% 0%,
		100% 8%,
		100% 92%,
		96% 100%,
		4% 100%,
		0% 92%
	);
	animation: hero-breathe 10s ease-in-out infinite;
}

@keyframes hero-breathe {
	0%, 100% {
		box-shadow:
			0 0 0 1px rgba(255, 255, 255, 0.04) inset,
			0 0 60px -10px rgba(139, 92, 246, 0.45),
			0 0 120px -20px rgba(34, 211, 238, 0.25),
			0 40px 80px -30px rgba(0, 0, 0, 0.8),
			0 0 200px -40px rgba(232, 121, 249, 0.2);
	}
	50% {
		box-shadow:
			0 0 0 1px rgba(255, 255, 255, 0.08) inset,
			0 0 80px -5px rgba(139, 92, 246, 0.65),
			0 0 140px -10px rgba(34, 211, 238, 0.4),
			0 40px 80px -30px rgba(0, 0, 0, 0.8),
			0 0 240px -20px rgba(232, 121, 249, 0.35);
	}
}

/* rotating void ring behind title */
.intro header::before {
	content: "";
	position: absolute;
	width: min(520px, 90vw);
	height: min(520px, 90vw);
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	border-radius: 50%;
	border: 1px solid transparent;
	background:
		conic-gradient(
			from 0deg,
			transparent 0%,
			rgba(34, 211, 238, 0.5) 8%,
			transparent 18%,
			rgba(232, 121, 249, 0.45) 40%,
			transparent 52%,
			rgba(139, 92, 246, 0.5) 70%,
			transparent 82%,
			rgba(34, 211, 238, 0.35) 95%,
			transparent 100%
		);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
	animation: ring-rotate 24s linear infinite;
	z-index: -1;
	opacity: 0.7;
	filter: drop-shadow(0 0 20px rgba(34, 211, 238, 0.4));
}

.intro header::after {
	content: "";
	position: absolute;
	width: min(380px, 70vw);
	height: min(380px, 70vw);
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%;
	background:
		radial-gradient(circle at 30% 30%, rgba(34, 211, 238, 0.2), transparent 50%),
		radial-gradient(circle at 70% 60%, rgba(232, 121, 249, 0.18), transparent 50%),
		radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.12), transparent 70%);
	animation: blob-morph 14s ease-in-out infinite;
	z-index: -2;
	filter: blur(2px);
	mix-blend-mode: screen;
}

@keyframes ring-rotate {
	to { transform: rotate(360deg); }
}

@keyframes blob-morph {
	0%, 100% {
		border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%;
		transform: rotate(0deg) scale(1);
	}
	33% {
		border-radius: 55% 45% 40% 60% / 45% 55% 45% 55%;
		transform: rotate(40deg) scale(1.08);
	}
	66% {
		border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%;
		transform: rotate(-25deg) scale(0.95);
	}
}

/* --------------------------------------------------------------------------
   Scroll-driven section reveals
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
	.summary,
	.preamble,
	.explanation,
	.participation,
	.benefits,
	.requirements {
		animation: void-rise linear both;
		animation-timeline: view();
		animation-range: entry 0% cover 35%;
	}

	.preamble { animation-name: void-rise, void-tilt-a; }
	.explanation { animation-name: void-rise, void-tilt-b; }
	.participation { animation-name: void-rise; }
	.benefits { animation-name: void-rise, void-tilt-a; }
	.requirements { animation-name: void-rise, void-tilt-b; }

	.intro header {
		animation: hero-breathe 10s ease-in-out infinite, hero-parallax linear both;
		animation-timeline: auto, scroll(root block);
		animation-range: normal, 0% 40%;
	}

	h3 {
		animation: title-gleam linear both;
		animation-timeline: view();
		animation-range: entry 10% cover 40%;
	}
}

@keyframes void-rise {
	from {
		opacity: 0;
		transform: translateY(4rem) scale(0.94);
		filter: blur(8px) brightness(0.6);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
		filter: blur(0) brightness(1);
	}
}

@keyframes void-tilt-a {
	from { rotate: -1.5deg; }
	to { rotate: 0deg; }
}

@keyframes void-tilt-b {
	from { rotate: 1.5deg; }
	to { rotate: 0deg; }
}

@keyframes hero-parallax {
	from {
		transform: scale(1) translateY(0);
		opacity: 1;
	}
	to {
		transform: scale(0.92) translateY(-3rem);
		opacity: 0.55;
	}
}

@keyframes title-gleam {
	from {
		letter-spacing: 0.2em;
		opacity: 0.3;
		filter: blur(4px);
	}
	to {
		letter-spacing: 0.04em;
		opacity: 1;
		filter: blur(0);
	}
}

/* fallback when scroll-driven animations unsupported */
@supports not (animation-timeline: view()) {
	.summary,
	.preamble,
	.explanation,
	.participation,
	.benefits,
	.requirements {
		animation: void-rise 1s var(--ease-ethereal) both;
	}

	.preamble { animation-delay: 0.1s; }
	.explanation { animation-delay: 0.15s; }
	.participation { animation-delay: 0.2s; }
	.benefits { animation-delay: 0.25s; }
	.requirements { animation-delay: 0.3s; }
}

/* --------------------------------------------------------------------------
   Main column stacking
   -------------------------------------------------------------------------- */
.main {
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 3vw, 2.25rem);
}

.intro .summary,
.intro .preamble {
	/* already gapped via .intro */
}

/* staggered clip accents on article corners */
.explanation {
	clip-path: polygon(
		0 0,
		calc(100% - 1.5rem) 0,
		100% 1.5rem,
		100% 100%,
		1.5rem 100%,
		0 calc(100% - 1.5rem)
	);
}

.participation {
	clip-path: polygon(
		1.5rem 0,
		100% 0,
		100% calc(100% - 1.5rem),
		calc(100% - 1.5rem) 100%,
		0 100%,
		0 1.5rem
	);
}

.benefits {
	clip-path: polygon(
		0 1rem,
		1rem 0,
		calc(100% - 1rem) 0,
		100% 1rem,
		100% calc(100% - 1rem),
		calc(100% - 1rem) 100%,
		1rem 100%,
		0 calc(100% - 1rem)
	);
}

/* --------------------------------------------------------------------------
   Contentinfo credit line
   -------------------------------------------------------------------------- */
[role="contentinfo"] {
	margin-top: 1.75rem !important;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(196, 181, 253, 0.15);
	font-size: 0.9rem;
	color: var(--text-dim);
	position: relative;
}

[role="contentinfo"]::before {
	content: "✦";
	display: block;
	margin-bottom: 0.75rem;
	color: var(--ether-magenta);
	text-shadow:
		0 0 10px var(--glow-magenta),
		0 0 20px var(--glow-soft);
	animation: star-twinkle 2.5s ease-in-out infinite;
}

@keyframes star-twinkle {
	0%, 100% { opacity: 0.4; transform: scale(0.9); }
	50% { opacity: 1; transform: scale(1.15); }
}

/* --------------------------------------------------------------------------
   Footer validation links — orbital badges
   -------------------------------------------------------------------------- */
footer {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	justify-content: center;
	padding: 0.5rem 0 0;
	margin-top: 0.5rem;
}

footer a {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	font-family: var(--font-display);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background:
		radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.15), transparent 45%),
		linear-gradient(145deg, rgba(26, 18, 53, 0.95), rgba(8, 4, 20, 0.9));
	border: 1px solid rgba(196, 181, 253, 0.3);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.04) inset,
		0 0 20px -4px rgba(139, 92, 246, 0.5),
		0 0 40px -8px rgba(34, 211, 238, 0.3),
		0 8px 16px -6px rgba(0, 0, 0, 0.6);
	-webkit-background-clip: border-box;
	background-clip: border-box;
	color: var(--ether-ghost) !important;
	-webkit-text-fill-color: var(--ether-ghost);
	filter: none !important;
	transition:
		transform 0.45s var(--ease-ethereal),
		box-shadow 0.45s ease,
		border-color 0.35s ease,
		color 0.35s ease;
}

footer a::after {
	display: none;
}

footer a:hover {
	transform: translateY(-6px) scale(1.08) rotate(-6deg);
	border-color: var(--ether-cyan);
	color: var(--ether-white) !important;
	-webkit-text-fill-color: var(--ether-white);
	box-shadow:
		0 0 0 1px rgba(34, 211, 238, 0.3) inset,
		0 0 30px -2px rgba(34, 211, 238, 0.6),
		0 0 50px -4px rgba(232, 121, 249, 0.4),
		0 0 70px -6px rgba(139, 92, 246, 0.35),
		0 12px 24px -8px rgba(0, 0, 0, 0.7);
	letter-spacing: 0.08em;
	filter: none !important;
}

footer a.zen-validate-html:hover { border-color: var(--ether-cyan); }
footer a.zen-validate-css:hover { border-color: var(--ether-magenta); }
footer a.zen-license:hover { border-color: var(--ether-violet); }
footer a.zen-accessibility:hover { border-color: var(--ether-rose); }
footer a.zen-github:hover { border-color: var(--ether-ghost); }

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
.sidebar {
	z-index: 2;
}

.sidebar .wrapper {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	padding: clamp(1.35rem, 2.5vw, 1.85rem);
	/* keep orb from earlier pseudo — override after */
}

.sidebar .wrapper::after {
	content: "";
	position: absolute;
	width: 160px;
	height: 160px;
	bottom: -40px;
	right: -30px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(232, 121, 249, 0.22), transparent 70%);
	pointer-events: none;
	z-index: 0;
	animation: orb-float 11s ease-in-out infinite reverse;
	mix-blend-mode: screen;
}

.sidebar .wrapper > * {
	position: relative;
	z-index: 1;
}

.sidebar h3 {
	font-size: 0.95rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding-left: 0.9rem;
	margin-bottom: 1rem;
}

.sidebar ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.sidebar li {
	position: relative;
	margin: 0;
	padding: 0;
	border-radius: 0.85rem;
	background: linear-gradient(120deg, rgba(139, 92, 246, 0.08), transparent 60%);
	border: 1px solid transparent;
	transition:
		transform 0.4s var(--ease-ethereal),
		background 0.4s ease,
		border-color 0.4s ease,
		box-shadow 0.4s ease;
}

.sidebar li::before {
	content: "";
	position: absolute;
	left: 0.65rem;
	top: 50%;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ether-cyan);
	box-shadow:
		0 0 6px var(--glow-hard),
		0 0 12px var(--glow-soft);
	transform: translateY(-50%) scale(0.6);
	opacity: 0.4;
	transition: transform 0.35s var(--ease-ethereal), opacity 0.35s ease;
}

.sidebar li:hover {
	transform: translateX(6px);
	background:
		linear-gradient(120deg, rgba(34, 211, 238, 0.12), rgba(139, 92, 246, 0.08) 50%, transparent),
		rgba(10, 6, 24, 0.4);
	border-color: rgba(196, 181, 253, 0.2);
	box-shadow:
		0 0 20px -6px rgba(139, 92, 246, 0.45),
		0 0 30px -8px rgba(34, 211, 238, 0.25),
		0 8px 16px -8px rgba(0, 0, 0, 0.5);
}

.sidebar li:hover::before {
	transform: translateY(-50%) scale(1);
	opacity: 1;
}

.sidebar li a {
	display: inline;
	font-size: 0.92rem;
}

.sidebar .design-selection li {
	padding: 0.75rem 0.85rem 0.75rem 1.5rem;
	line-height: 1.45;
}

.sidebar .design-name {
	display: block;
	font-weight: 500;
	font-size: 0.95rem;
	margin-bottom: 0.15rem;
}

.sidebar .designer-name {
	font-size: 0.8rem;
	font-weight: 300;
	opacity: 0.85;
	background: linear-gradient(90deg, var(--ether-ghost), var(--ether-rose));
	-webkit-background-clip: text;
	background-clip: text;
}

.sidebar .designer-name::before {
	content: "by ";
	color: var(--text-dim);
	-webkit-text-fill-color: var(--text-dim);
	background: none;
	font-weight: 300;
}

/* hide raw "by" text flow awkwardness — HTML has "by" as text node */
.sidebar .design-selection li {
	color: transparent;
	font-size: 0;
}

.sidebar .design-selection li a {
	font-size: 0.92rem;
}

.sidebar .design-archives li,
.sidebar .zen-resources li {
	padding: 0.65rem 0.85rem 0.65rem 1.5rem;
}

.sidebar .indicator {
	display: inline-block;
	margin-left: 0.25rem;
	color: var(--ether-cyan);
	text-shadow: 0 0 10px var(--glow-hard);
	animation: nudge 1.8s ease-in-out infinite;
}

@keyframes nudge {
	0%, 100% { transform: translateX(0); opacity: 0.6; }
	50% { transform: translateX(4px); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Extra presentation layers — void geometry / particles
   -------------------------------------------------------------------------- */
.extra1,
.extra2,
.extra3,
.extra4,
.extra5,
.extra6 {
	position: fixed;
	pointer-events: none;
	z-index: 0;
}

/* large soft nebula top-right */
.extra1 {
	width: min(55vw, 640px);
	height: min(55vw, 640px);
	top: -12%;
	right: -8%;
	border-radius: 50%;
	background:
		radial-gradient(circle at 40% 40%, rgba(139, 92, 246, 0.35), transparent 55%),
		radial-gradient(circle at 60% 60%, rgba(34, 211, 238, 0.2), transparent 50%);
	filter: blur(40px);
	animation: nebula-drift 28s ease-in-out infinite alternate;
	mix-blend-mode: screen;
	opacity: 0.7;
}

/* bottom-left magenta fog */
.extra2 {
	width: min(50vw, 520px);
	height: min(50vw, 520px);
	bottom: -15%;
	left: -10%;
	border-radius: 45% 55% 50% 50%;
	background:
		radial-gradient(circle at 50% 50%, rgba(232, 121, 249, 0.3), transparent 60%);
	filter: blur(50px);
	animation: nebula-drift 34s ease-in-out infinite alternate-reverse;
	mix-blend-mode: screen;
	opacity: 0.55;
}

/* geometric crystal shard */
.extra3 {
	width: 180px;
	height: 180px;
	top: 28%;
	left: 4%;
	background: linear-gradient(135deg, rgba(34, 211, 238, 0.25), rgba(139, 92, 246, 0.05) 50%, transparent);
	clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
	box-shadow:
		0 0 40px rgba(34, 211, 238, 0.2),
		0 0 80px rgba(139, 92, 246, 0.15);
	animation: shard-spin 40s linear infinite;
	opacity: 0.35;
	filter: blur(0.5px);
}

.extra3::before {
	/* can't style ::before on empty fixed extras reliably without content on parent —
	   extras are empty divs so we style the elements themselves only */
}

/* thin orbital ring mid-right */
.extra4 {
	width: min(40vw, 420px);
	height: min(40vw, 420px);
	top: 55%;
	right: 2%;
	border-radius: 50%;
	border: 1px solid rgba(196, 181, 253, 0.15);
	box-shadow:
		0 0 30px rgba(139, 92, 246, 0.2),
		inset 0 0 30px rgba(34, 211, 238, 0.08),
		0 0 60px rgba(232, 121, 249, 0.1);
	animation: ring-rotate 50s linear infinite reverse;
	opacity: 0.5;
	background:
		conic-gradient(from 90deg, transparent 0%, rgba(34, 211, 238, 0.15) 10%, transparent 25%, rgba(232, 121, 249, 0.12) 55%, transparent 70%);
	-webkit-mask: radial-gradient(farthest-side, transparent 72%, #000 73%, #000 74%, transparent 75%);
	mask: radial-gradient(farthest-side, transparent 72%, #000 73%, #000 74%, transparent 75%);
}

/* small floating diamond */
.extra5 {
	width: 48px;
	height: 48px;
	top: 18%;
	right: 18%;
	background: linear-gradient(45deg, var(--ether-cyan), var(--ether-magenta));
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	box-shadow:
		0 0 20px var(--glow-hard),
		0 0 40px var(--glow-magenta),
		0 0 60px var(--glow-soft);
	animation: diamond-float 12s ease-in-out infinite;
	opacity: 0.65;
	mix-blend-mode: screen;
}

/* horizon light bar */
.extra6 {
	left: 10%;
	right: 10%;
	bottom: 8%;
	height: 2px;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--ether-violet),
		var(--ether-cyan),
		var(--ether-magenta),
		transparent
	);
	box-shadow:
		0 0 20px var(--glow-hard),
		0 0 40px var(--glow-soft),
		0 0 80px var(--glow-magenta),
		0 10px 40px rgba(139, 92, 246, 0.3);
	animation: horizon-pulse 6s ease-in-out infinite;
	opacity: 0.45;
	filter: blur(0.5px);
}

@keyframes nebula-drift {
	from { transform: translate(0, 0) scale(1); }
	to { transform: translate(-4%, 6%) scale(1.12); }
}

@keyframes shard-spin {
	from { transform: rotate(0deg) translateY(0); }
	50% { transform: rotate(180deg) translateY(20px); }
	to { transform: rotate(360deg) translateY(0); }
}

@keyframes diamond-float {
	0%, 100% {
		transform: translateY(0) rotate(0deg) scale(1);
		filter: brightness(1);
	}
	50% {
		transform: translateY(-30px) rotate(45deg) scale(1.15);
		filter: brightness(1.4);
	}
}

@keyframes horizon-pulse {
	0%, 100% { opacity: 0.25; transform: scaleX(0.85); }
	50% { opacity: 0.7; transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   Selection / scrollbar
   -------------------------------------------------------------------------- */
::selection {
	background: rgba(139, 92, 246, 0.45);
	color: var(--ether-white);
	text-shadow: 0 0 10px var(--glow-soft);
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: var(--void-abyss);
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, var(--ether-violet), var(--ether-cyan));
	border-radius: 999px;
	border: 2px solid var(--void-abyss);
	box-shadow: 0 0 12px var(--glow-soft);
}

::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, var(--ether-magenta), var(--ether-cyan));
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	body::before,
	body::after,
	.extra1,
	.extra2,
	.extra3,
	.extra4,
	.extra5,
	.extra6 {
		animation: none !important;
	}
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.intro header {
		clip-path: polygon(
			0% 4%,
			3% 0%,
			97% 0%,
			100% 4%,
			100% 96%,
			97% 100%,
			3% 100%,
			0% 96%
		);
		padding: 2.5rem 1rem;
	}

	.explanation,
	.participation,
	.benefits {
		clip-path: none;
	}

	h1 {
		letter-spacing: 0.06em;
	}

	h2 {
		letter-spacing: 0.14em;
	}

	.extra3,
	.extra5 {
		opacity: 0.2;
	}
}

/* --------------------------------------------------------------------------
   Print — keep it readable if someone prints the void
   -------------------------------------------------------------------------- */
@media print {
	body,
	body::before,
	body::after {
		background: white !important;
		color: black !important;
		animation: none !important;
	}

	.extra1,
	.extra2,
	.extra3,
	.extra4,
	.extra5,
	.extra6 {
		display: none !important;
	}

	.summary,
	.preamble,
	.explanation,
	.participation,
	.benefits,
	.requirements,
	.sidebar .wrapper {
		background: white !important;
		box-shadow: none !important;
		border: 1px solid #ccc !important;
		backdrop-filter: none !important;
		color: black !important;
	}

	h1, h2, h3, a, p {
		color: black !important;
		background: none !important;
		-webkit-text-fill-color: black !important;
		filter: none !important;
	}
}