/* ═══════════════════════════════════════════════════════════════════════
   reveal.css — dark-theme profiling reveal overlay
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Phase 1: darkening (body.revealing) ─────────────────────────────── */
body.revealing {
	background: #0a0a0a !important;
	overflow: hidden !important;
}

body.revealing .page-content {
	opacity: 0;
	transition: opacity 0.5s ease;
}

/* ── Phase 2: fully revealed (body.revealed) ─────────────────────────── */
body.revealed {
	background: #0a0a0a !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	color: #d4d4d8;
}

body.revealed .page-content {
	display: none;
}

/* ── Overlay container ──────────────────────────────────────────────── */
.reveal-overlay {
	position: fixed;
	inset: 0;
	background: #0a0a0a;
	z-index: 10000;
	display: flex;
	justify-content: center;
	overflow-y: auto;
	overflow-x: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.9s ease;
}

body.revealing .reveal-overlay,
body.revealed .reveal-overlay {
	opacity: 1;
	pointer-events: auto;
}

/* ── Content wrapper ────────────────────────────────────────────────── */
.reveal-content {
	max-width: 680px;
	width: 100%;
	padding: 72px 24px 120px;
	text-align: center;
}

/* ── Title ──────────────────────────────────────────────────────────── */
.reveal-title {
	font-size: 2.2rem;
	font-weight: 300;
	letter-spacing: 0.18em;
	text-transform: lowercase;
	color: #ffffff;
	margin-bottom: 6px;
	opacity: 0;
	transform: translateY(20px);
	animation: revealFadeUp 0.8s ease forwards;
}

.reveal-subtitle {
	font-size: 0.85rem;
	color: #52525b;
	margin-bottom: 48px;
	opacity: 0;
	animation: revealFadeUp 0.7s ease forwards;
}

/* ── Section headings ───────────────────────────────────────────────── */
.reveal-heading {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: #52525b;
	border-bottom: 1px solid #27272a;
	padding-bottom: 8px;
	margin: 44px 0 20px;
	opacity: 0;
	animation: revealFadeUp 0.6s ease forwards;
}

/* ── Metric grid ────────────────────────────────────────────────────── */
.metrics-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-bottom: 8px;
}

.metric-card {
	background: #18181b;
	border: 1px solid #27272a;
	border-radius: 8px;
	padding: 14px 10px;
	opacity: 0;
	animation: revealFadeUp 0.5s ease forwards;
}

.metric-label {
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #71717a;
	margin-bottom: 5px;
}

.metric-value {
	font-size: 1.35rem;
	font-weight: 600;
	color: #fafafa;
	font-variant-numeric: tabular-nums;
}

.metric-unit {
	font-size: 0.7rem;
	color: #71717a;
	font-weight: 400;
}

/* ── Classification grid ────────────────────────────────────────────── */
.classification-grid {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.class-row {
	display: flex;
	align-items: center;
	background: #18181b;
	border: 1px solid #27272a;
	border-radius: 8px;
	padding: 13px 16px;
	gap: 12px;
	opacity: 0;
	animation: revealFadeUp 0.5s ease forwards;
}

.class-label {
	font-size: 0.78rem;
	color: #a1a1aa;
	min-width: 130px;
	text-align: left;
	flex-shrink: 0;
}

.class-value {
	font-size: 0.88rem;
	font-weight: 600;
	color: #fafafa;
	flex-grow: 1;
	text-align: left;
}

/* ── Reliability dots ───────────────────────────────────────────────── */
.reliability-dots {
	display: flex;
	gap: 3px;
	flex-shrink: 0;
}

.reliability-dots .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #27272a;
	transition: background 0.3s ease;
}

.reliability-dots .dot.filled {
	background: #4ade80;
}

/* colour by reliability level */
.reliability-dots[data-level="3"] .dot.filled {
	background: #facc15;
}
.reliability-dots[data-level="2"] .dot.filled {
	background: #fb923c;
}
.reliability-dots[data-level="1"] .dot.filled,
.reliability-dots[data-level="0"] .dot.filled {
	background: #f87171;
}

/* ── Info tooltip (ⓘ) ──────────────────────────────────────────────── */
.info-tip {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #27272a;
	color: #71717a;
	font-size: 0.65rem;
	font-style: italic;
	font-weight: 700;
	cursor: help;
	flex-shrink: 0;
	transition:
		background 0.2s,
		color 0.2s;
}

.info-tip:hover,
.info-tip:focus-visible {
	background: #3f3f46;
	color: #e4e4e7;
	outline: none;
}

.info-tip .tip-text {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	background: #27272a;
	border: 1px solid #3f3f46;
	color: #d4d4d8;
	font-size: 0.74rem;
	font-weight: 400;
	font-style: normal;
	line-height: 1.55;
	padding: 10px 14px;
	border-radius: 6px;
	width: 280px;
	text-align: left;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
	z-index: 200;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.info-tip:hover .tip-text,
.info-tip:focus-visible .tip-text {
	opacity: 1;
	pointer-events: auto;
}

.info-tip .tip-text::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: #3f3f46;
}

/* ── Divider ────────────────────────────────────────────────────────── */
.reveal-divider {
	border: none;
	border-top: 1px dashed #27272a;
	margin: 14px 0;
	opacity: 0;
	animation: revealFadeUp 0.4s ease forwards;
}

/* ── Disclaimer box ─────────────────────────────────────────────────── */
.reveal-disclaimer {
	background: #18181b;
	border: 1px solid #27272a;
	border-left: 3px solid #52525b;
	border-radius: 0 8px 8px 0;
	padding: 24px 28px;
	text-align: left;
	margin-top: 44px;
	opacity: 0;
	animation: revealFadeUp 0.8s ease forwards;
}

.reveal-disclaimer h3 {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: #71717a;
	margin-bottom: 14px;
}

.reveal-disclaimer p {
	font-size: 0.82rem;
	line-height: 1.75;
	color: #a1a1aa;
	margin-bottom: 14px;
}

.reveal-disclaimer p:last-child {
	margin-bottom: 0;
}

.reveal-disclaimer strong {
	color: #d4d4d8;
}

/* ── Animation keyframe ─────────────────────────────────────────────── */
@keyframes revealFadeUp {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.reveal-title,
	.reveal-subtitle,
	.reveal-heading,
	.metric-card,
	.class-row,
	.reveal-divider,
	.reveal-disclaimer {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.reveal-overlay {
		transition: none !important;
	}
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.metrics-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.class-row {
		flex-wrap: wrap;
		gap: 6px 10px;
	}

	.class-label {
		min-width: 0;
		flex: 1 1 100%;
	}

	.class-value {
		flex: 1 1 auto;
	}

	.info-tip .tip-text {
		width: 220px;
		left: auto;
		right: -8px;
		transform: none;
	}

	.info-tip .tip-text::after {
		left: auto;
		right: 14px;
		transform: none;
	}

	.reveal-content {
		padding: 56px 16px 80px;
	}

	.reveal-title {
		font-size: 1.6rem;
	}
}