/*
 * neurauter.cloud landing page. Tokens follow docs/design-system.md (the RideLogger look): graphite
 * dark theme first, a full light theme, one orange accent, Geist type and Lucide icons.
 */

@font-face {
	font-family: 'Geist';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('/fonts/geist-latin-wght-normal.woff2') format('woff2-variations');
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Geist';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('/fonts/geist-latin-ext-wght-normal.woff2') format('woff2-variations');
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
		U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}
@font-face {
	font-family: 'Geist Mono';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('/fonts/geist-mono-latin-wght-normal.woff2') format('woff2-variations');
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Geist Mono';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('/fonts/geist-mono-latin-ext-wght-normal.woff2') format('woff2-variations');
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
		U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

/* ------------------------------------------------------------------ tokens */

:root,
:root[data-theme='dark'] {
	--bg: #0b0c0f;
	--surface: #131519;
	--surface-2: #1b1e24;
	--border: #262a31;
	--border-strong: #353a44;
	--text: #f3f4f6;
	--text-2: #a3a9b4;
	--text-3: #6b717c;
	--accent: #ff6b1a;
	--accent-hover: #ff8540;
	--accent-ink: #ff8a4c;
	--on-accent: #1a0a00;
	--accent-soft: rgb(255 107 26 / 0.14);
	--data-speed: #38bdf8;

	--shadow-card: inset 0 1px 0 rgb(255 255 255 / 0.03);
	--shadow-lift: 0 18px 50px rgb(0 0 0 / 0.45), inset 0 1px 0 rgb(255 255 255 / 0.04);
	--grid-line: rgb(255 255 255 / 0.11);
	--glow-strength: 0.34;
	--ridge-fill: 0.28;
	--ridge-back: rgb(56 189 248 / 0.35);
	--topbar-bg: rgb(11 12 15 / 0.72);
	color-scheme: dark;
}

:root[data-theme='light'] {
	--bg: #f4f4f2;
	--surface: #ffffff;
	--surface-2: #f0f0ee;
	--border: #e3e3df;
	--border-strong: #cfcfca;
	--text: #111214;
	--text-2: #5a5f68;
	--text-3: #8c9099;
	--accent: #ea580c;
	--accent-hover: #c2410c;
	--accent-ink: #c2410c;
	--on-accent: #ffffff;
	--accent-soft: rgb(234 88 12 / 0.1);
	--data-speed: #0284c7;

	--shadow-card: 0 1px 2px rgb(16 17 20 / 0.04), 0 4px 16px rgb(16 17 20 / 0.04);
	--shadow-lift: 0 2px 4px rgb(16 17 20 / 0.05), 0 18px 44px rgb(16 17 20 / 0.1);
	--grid-line: rgb(17 18 20 / 0.1);
	--glow-strength: 0.2;
	--ridge-fill: 0.18;
	--ridge-back: rgb(2 132 199 / 0.3);
	--topbar-bg: rgb(244 244 242 / 0.78);
	color-scheme: light;
}

:root {
	--r-md: 12px;
	--r-lg: 16px;
	--r-xl: 22px;
	--gutter: 24px;
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

@media (max-width: 640px) {
	:root {
		--gutter: 16px;
	}
}

/* ------------------------------------------------------------------ base */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 400 15px/22px var(--font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition:
		background-color 240ms ease-out,
		color 240ms ease-out;
}

a {
	color: var(--accent-ink);
}

svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	flex: none;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 6px;
}

.skip {
	position: absolute;
	left: var(--gutter);
	top: -48px;
	z-index: 20;
	padding: 8px 12px;
	border-radius: var(--r-md);
	background: var(--surface);
	color: var(--text);
}
.skip:focus {
	top: 12px;
}

.mono {
	font-family: var(--mono);
}

/* ------------------------------------------------------------------ top bar */

.topbar {
	position: fixed;
	inset: 0 0 auto;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
	padding: 0 var(--gutter);
	padding-top: env(safe-area-inset-top);
	border-bottom: 1px solid transparent;
	transition:
		background-color 240ms ease-out,
		border-color 240ms ease-out;
}
.topbar.scrolled {
	background: var(--topbar-bg);
	border-bottom-color: var(--border);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--text);
	text-decoration: none;
	font-weight: 650;
	font-size: 16px;
	letter-spacing: -0.015em;
}
.brand img {
	border-radius: 8px;
}
.brand .dot {
	color: var(--text-3);
	font-weight: 500;
}

.icon-btn {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	background: var(--surface);
	color: var(--text-2);
	cursor: pointer;
	transition:
		color 150ms ease-out,
		border-color 150ms ease-out,
		background-color 150ms ease-out;
}
.icon-btn:hover {
	color: var(--text);
	border-color: var(--border-strong);
}
.icon-btn svg {
	width: 18px;
	height: 18px;
}
:root[data-theme='dark'] .i-moon,
:root[data-theme='light'] .i-sun,
:root:not([data-theme]) .i-moon {
	display: none;
}

/* ------------------------------------------------------------------ hero */

.hero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: 112px var(--gutter) 160px;
	overflow: hidden;
	isolation: isolate;
}

.hero-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/* Warm horizon glow behind the ridge line, like the last light over a mountain pass. */
.glow {
	position: absolute;
	left: 50%;
	bottom: -30vh;
	width: max(1400px, 140vw);
	height: 90vh;
	transform: translateX(-50%);
	background: radial-gradient(
		closest-side,
		rgb(from var(--accent) r g b / var(--glow-strength)),
		rgb(from var(--accent) r g b / 0) 100%
	);
	filter: blur(10px);
}

/* A telemetry grid laid flat like a road surface, slowly rolling towards the viewer. */
.grid {
	position: absolute;
	left: -50%;
	right: -50%;
	bottom: -10%;
	height: 70%;
	background-image:
		linear-gradient(var(--grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
	background-size: 64px 64px;
	transform: perspective(520px) rotateX(62deg);
	transform-origin: 50% 100%;
	mask-image: linear-gradient(to top, #000 10%, transparent 85%);
	-webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
	animation: roll 3.2s linear infinite;
}

@keyframes roll {
	to {
		background-position: 0 64px;
	}
}

.ridges {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: min(46vh, 420px);
	overflow: visible;
}
.ridge-back {
	fill: none;
	stroke: var(--ridge-back);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 2 6;
}
.ridge-area {
	stroke: none;
	opacity: 0;
	animation: fade 1.2s 0.9s ease-out forwards;
}
.ridge-front {
	fill: none;
	stroke: var(--accent);
	stroke-width: 2.5;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	filter: drop-shadow(0 0 8px rgb(from var(--accent) r g b / 0.7));
	animation: draw 2.2s 0.2s var(--ease) forwards;
}

@keyframes draw {
	to {
		stroke-dashoffset: 0;
	}
}
@keyframes fade {
	to {
		opacity: 1;
	}
}
@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.hero-content {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
}
.hero-content > * {
	animation: rise 700ms var(--ease) both;
}
.hero-content > :nth-child(2) {
	animation-delay: 80ms;
}
.hero-content > :nth-child(3) {
	animation-delay: 160ms;
}
.hero-content > :nth-child(4) {
	animation-delay: 240ms;
}

.kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 24px;
	padding: 6px 14px 6px 10px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: rgb(from var(--surface) r g b / 0.6);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--text-2);
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
}
.pulse {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
}
.pulse::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--accent);
	animation: ping 2s ease-out infinite;
}
@keyframes ping {
	to {
		transform: scale(2.8);
		opacity: 0;
	}
}

h1 {
	margin: 0;
	max-width: 14ch;
	font-size: clamp(44px, 8.4vw, 96px);
	line-height: 0.98;
	font-weight: 700;
	letter-spacing: -0.045em;
	text-wrap: balance;
}
h1 .accent {
	background: linear-gradient(95deg, var(--accent) 10%, var(--accent-hover) 55%, #fbbf24 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.lead {
	max-width: 46ch;
	margin: 24px 0 36px;
	color: var(--text-2);
	font-size: clamp(16px, 1.6vw, 19px);
	line-height: 1.5;
	text-wrap: pretty;
}

.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	padding: 0 20px 0 22px;
	border-radius: var(--r-md);
	background: var(--accent);
	color: var(--on-accent);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	box-shadow: 0 8px 28px rgb(from var(--accent) r g b / 0.35);
	transition:
		background-color 150ms ease-out,
		transform 150ms ease-out,
		box-shadow 150ms ease-out;
}
.btn-primary:hover {
	background: var(--accent-hover);
	transform: translateY(-1px);
	box-shadow: 0 12px 34px rgb(from var(--accent) r g b / 0.45);
}
.btn-primary svg {
	transition: transform 150ms ease-out;
}
.btn-primary:hover svg {
	transform: translateY(2px);
}

.scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 28px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-left: -20px;
	border-radius: 50%;
	color: var(--text-2);
	animation: bob 2.4s ease-in-out infinite;
}
.scroll-cue svg {
	width: 22px;
	height: 22px;
}
@keyframes bob {
	50% {
		transform: translateY(6px);
	}
}

/* ------------------------------------------------------------------ apps */

.apps {
	max-width: calc(1080px + 2 * var(--gutter));
	margin: 0 auto;
	padding: 96px var(--gutter) 120px;
	scroll-margin-top: 24px;
}

.section-head {
	margin-bottom: 40px;
}
.overline {
	margin: 0 0 12px;
	color: var(--accent-ink);
	font-size: 11px;
	line-height: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
h2 {
	margin: 0;
	font-size: clamp(30px, 4.4vw, 44px);
	line-height: 1.1;
	font-weight: 650;
	letter-spacing: -0.03em;
}
.section-lead {
	margin: 12px 0 0;
	color: var(--text-2);
	font-size: 16px;
}

.app-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.app-card {
	--app: var(--accent);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 240px;
	padding: 24px;
	border: 1px solid var(--border);
	border-radius: var(--r-xl);
	background: var(--surface);
	box-shadow: var(--shadow-card);
	color: var(--text);
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
	transition:
		transform 240ms var(--ease),
		border-color 240ms ease-out,
		box-shadow 240ms ease-out;
}
/* Light that follows the pointer across the card, in the app's own colour. */
.app-card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(
		420px circle at var(--mx, 85%) var(--my, 0%),
		rgb(from var(--app) r g b / 0.16),
		transparent 60%
	);
	opacity: 0.55;
	transition: opacity 240ms ease-out;
}
a.app-card:hover {
	transform: translateY(-3px);
	border-color: rgb(from var(--app) r g b / 0.5);
	box-shadow: var(--shadow-lift);
}
a.app-card:hover::before {
	opacity: 1;
}
a.app-card:focus-visible {
	border-radius: var(--r-xl);
	outline-offset: 3px;
}

.app-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: 16px;
	border-radius: 14px;
	background: rgb(from var(--app) r g b / 0.14);
	color: var(--app);
	box-shadow: inset 0 0 0 1px rgb(from var(--app) r g b / 0.25);
}
.app-icon svg {
	width: 26px;
	height: 26px;
}

.app-name {
	font-size: 22px;
	line-height: 28px;
	font-weight: 650;
	letter-spacing: -0.02em;
}
.app-tagline {
	color: var(--text-2);
	text-wrap: pretty;
}

.app-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 20px;
	color: var(--text-3);
	font-family: var(--mono);
	font-size: 12px;
	line-height: 16px;
}
.app-open {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font);
	font-size: 13px;
	font-weight: 600;
	/* Pulled towards the text colour so any app colour keeps its contrast in both themes. */
	color: color-mix(in oklab, var(--app) 75%, var(--text));
}
.app-open svg {
	transition: transform 240ms var(--ease);
}
a.app-card:hover .app-open svg {
	transform: translate(2px, -2px);
}

.app-card.soon {
	--app: var(--text-3);
	border-style: dashed;
	background: transparent;
	box-shadow: none;
}
.app-card.soon::before {
	display: none;
}
.app-card.soon .app-name {
	color: var(--text-2);
}
.app-card.soon .app-tagline {
	color: var(--text-3);
}

.noscript {
	margin-top: 24px;
	color: var(--text-2);
}

/* ------------------------------------------------------------------ footer */

.footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	width: calc(100% - 2 * var(--gutter));
	max-width: 1080px;
	margin: 0 auto;
	padding: 28px 0 calc(28px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--border);
	color: var(--text-3);
	font-size: 13px;
}

/* ------------------------------------------------------------------ small screens and motion */

@media (max-width: 640px) {
	.hero {
		padding-top: 96px;
		padding-bottom: 136px;
	}
	.apps {
		padding-top: 72px;
		padding-bottom: 88px;
	}
	.app-card {
		min-height: 0;
		padding: 20px;
	}
	.grid {
		background-size: 48px 48px;
	}
	@keyframes roll {
		to {
			background-position: 0 48px;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-delay: 0ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
	}
}