:root {
	--act-before: var(--p-blue-500);
	--act-during: var(--primary);
	--act-after: var(--p-green-500);
	--reveal-distance: 2rem;
}

@view-transition {
	navigation: auto;
}

@keyframes clk-rise {
	from {
		opacity: 0;
		translate: 0 var(--reveal-distance);
		scale: var(--reveal-scale, 0.985);
	}
}

@keyframes clk-glyph-in {
	from {
		opacity: 0;
		translate: 0 3rem;
		scale: 0.8;
		rotate: -8deg;
	}
}

@keyframes clk-corona-drift {
	50% {
		transform: translate3d(2%, -1.5%, 0) scale(1.06);
	}
}

html,
body {
	min-height: 100%;
}

body {
	background-color: var(--surface-ground);
	color: var(--text);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-height-normal);
}

.site-shell {
	display: flex;
	min-height: 100dvh;
	flex-direction: column;
}

.site-container {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--space-5);
}

.site-skip {
	position: absolute;
	left: var(--space-4);
	top: var(--space-4);
	z-index: var(--z-tooltip);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-lg);
	background: var(--primary);
	color: var(--primary-contrast);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	transform: translateY(-200%);
	transition: transform var(--duration-150) var(--ease-out);
}

.site-skip:focus-visible {
	transform: translateY(0);
	outline: none;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	border-inline: none;
	border-top: none;
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	padding-block: var(--space-3);
}

.site-header__brand {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--text);
	text-decoration: none;
}

.site-header__nav {
	order: 3;
	display: flex;
	flex-basis: 100%;
	gap: var(--space-5);
	padding-top: var(--space-2);
	border-top: 1px solid var(--glass-border);
}

.site-header__link {
	color: var(--text-muted);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	transition: color var(--duration-150) var(--ease-out);
}

.site-header__link:hover,
.site-header__link:focus-visible {
	color: var(--text);
}

.site-header__link[aria-current='page'] {
	color: var(--primary);
}

.site-header__actions {
	display: flex;
	gap: var(--space-2);
	margin-inline-start: auto;
}

.site-main {
	flex: 1;
}

:where(.site-main h1) {
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
}

:where(.site-main h2) {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-snug);
}

:where(.site-main h3) {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-snug);
}

:where(.site-main p) {
	color: var(--text-muted);
}

.site-footer {
	margin-top: var(--space-20);
}

.site-footer__inner {
	display: grid;
	gap: var(--space-10);
	padding-block: var(--space-12) var(--space-8);
}

.site-footer__wordmark {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-tight);
}

.site-footer__blurb {
	margin-top: var(--space-2);
	max-width: 32ch;
	color: var(--text-muted);
	font-size: var(--font-size-sm);
}

.site-footer__columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-8);
}

.site-footer__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-top: var(--space-3);
	padding: 0;
	list-style: none;
}

.site-footer__link {
	color: var(--text-muted);
	font-size: var(--font-size-sm);
	text-decoration: none;
	transition: color var(--duration-150) var(--ease-out);
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
	color: var(--text);
}

@media (min-width: 768px) {
	.site-container {
		padding-inline: var(--space-8);
	}

	.site-header__nav {
		order: 0;
		flex-basis: auto;
		margin-inline-start: var(--space-8);
		padding-top: 0;
		border-top: none;
	}

	:where(.site-main h1) {
		font-size: var(--font-size-6xl);
	}

	:where(.site-main h2) {
		font-size: var(--font-size-4xl);
	}

	.site-footer__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	}

	.site-footer__columns {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.wordmark {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2-5);
}

.wordmark__glyph {
	display: block;
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.wordmark--sm .wordmark__glyph {
	width: 26px;
	height: 26px;
}

.wordmark__name {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text);
}

.wordmark--sm .wordmark__name {
	font-size: var(--font-size-sm);
}

.wordmark__tagline {
	color: var(--text-subtle);
}

.platform-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-full);
	background: var(--platform-color);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: 0.85rem;
	font-weight: var(--font-weight-bold);
	line-height: 1;
	flex-shrink: 0;
}

.platform-dot--xs {
	width: 0.875rem;
	height: 0.875rem;
	font-size: 0.5rem;
}

.platform-dot--sm {
	width: 1.375rem;
	height: 1.375rem;
	font-size: 0.625rem;
}

.platform-dot--lg {
	width: 3rem;
	height: 3rem;
	font-size: 1.25rem;
}

.avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: var(--radius-full);
	background: var(--avatar-color, var(--surface-2));
	color: #fff;
	font-size: 0.65rem;
	font-weight: var(--font-weight-semibold);
	line-height: 1;
	flex-shrink: 0;
}

.avatar--sm {
	width: 1.375rem;
	height: 1.375rem;
	font-size: 0.55rem;
}

.avatar--lg {
	width: 2.75rem;
	height: 2.75rem;
	font-size: 0.95rem;
}

.site-footer__platforms {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-5);
}

.site-footer__heading {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--text);
}

.site-footer__legal {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding-block: var(--space-6) var(--space-10);
}

.site-footer__copyright {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
}

.site-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
	padding: 0;
	list-style: none;
	font-size: var(--font-size-xs);
}

@media (min-width: 768px) {
	.site-footer__legal {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.site-header__link,
	.site-footer__link,
	.contact__value {
		transition:
			color var(--duration-150) var(--ease-out),
			translate var(--duration-150) var(--ease-out);
	}

	.clk-btn {
		transition:
			background-color var(--duration-150) var(--ease-out),
			border-color var(--duration-150) var(--ease-out),
			color var(--duration-150) var(--ease-out),
			transform var(--duration-150) var(--ease-out);
	}

	.clk-btn:hover {
		transform: translateY(-1px);
	}

	.clk-btn:active {
		transform: translateY(0);
	}

	.platform-dot {
		transition: scale var(--duration-200) var(--ease-out);
	}

	.site-footer__platforms:hover .platform-dot {
		scale: 1.08;
	}
}

@media (prefers-reduced-motion: no-preference) {
	::view-transition-old(root) {
		animation: clk-vt-out var(--duration-200) var(--ease-in) both;
	}

	::view-transition-new(root) {
		animation: clk-vt-in var(--duration-500) var(--ease-out) both;
	}

	.site-header {
		view-transition-name: site-header;
	}
}

@keyframes clk-vt-out {
	to {
		opacity: 0;
		translate: 0 -0.75rem;
	}
}

@keyframes clk-vt-in {
	from {
		opacity: 0;
		translate: 0 1.25rem;
	}
}

@keyframes clk-aurora-drift {
	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}
	33% {
		transform: translate3d(-2.5%, 2%, 0) scale(1.09);
	}
	66% {
		transform: translate3d(2%, -1.5%, 0) scale(1.05);
	}
}

@keyframes clk-breathe {
	0%,
	100% {
		scale: 1;
	}
	50% {
		scale: 1.04;
	}
}

@keyframes clk-pulse {
	from {
		transform: scale(0.85);
		opacity: 0.5;
	}
	to {
		transform: scale(1.7);
		opacity: 0;
	}
}

.clk-mono {
	color: var(--text-muted);
}

.clk-placeholder .clk-mono {
	color: var(--text-subtle);
}